MengTo/towers

6つの塔が4.5秒かけて自動生成され、建設工程を視覚的に表現するWebGL作品です。

完成アプリ要確認企画・設計HTML難易度
108+22今週0
24フォーク0Issue
デモ・公式サイトをひらくmengto.github.io

中辛 の解説

Three.js r149とWebGLで構築された単一HTMLファイルの体験型3Dビジュアライゼーション作品です。2.3MBのバンドルに、テクスチャ(423KB)、オーディオ(797KB)、生成された3Dモデルがすべて埋め込まれており、実行時にネットワークリクエストはゼロです。切断面による建設表現、パラメトリック建築生成(掃引プラン、プリズム、ラス、リング)、GPT Image 2で生成されたシームレステクスチャ、Higgsfield で生成された多言語サウンドトラック(日本、中国、ベトナム、タイ、カンボジア、オスマン帝国各国の楽器)を実装しています。草104,000本を頂点シェーダで生成、1フレーム131万三角形を18ドロー呼び出しで表現する仕様で、スマートフォン対応のレスポンシブレイアウトを備えています。

이런 레포예요

이럴 때 쓰면 좋아요

  • 建築の時間表現と建設工程の可視化が必要なプロジェクト
  • 複数の文化的建築様式を1つのインタラクティブ体験で比較展示したい場合
  • Webベースの3Dビジュアルストーリーテリングの実装例として参考にしたいとき

핵심 기능

4.5秒間の自動建設アニメーション、6つの塔スタイル(日本・中国・ベトナム・タイ・カンボジア・オスマン帝国)時間帯(朝・昼・夕方・夜)と天気(晴天・雨・嵐・雪)の動的変更、39,200個の星を含む風景生成ネットワークリクエストゼロの完全なオフライン実行、すべてのアセット(テクスチャ・オーディオ・3Dモデル)が単一HTMLに埋め込まれ

대안 대비 차별점

建設工程を視覚的に表現する切断面メカニズムと、パラメトリック生成により6つの異なる建築様式が同じアニメーション・タイムラインを共有し、文化的比較が可能な設計が特徴です。

食べた人たち

実際に使ってみた人の記録です — 一言も完走の記録も、確認のうえで公開しています。

試食評 · 使った人のひとこと

まだ試食評がありません。使ってみたら、最初のひとことをどうぞ。

ほかのリポジトリの試食評を見る →

이 레포로 만든 것들

🖋 완주 인증하기

아직 이 레포로 만든 완주 인증이 없어요. 첫 밥도장을 찍어보세요!

このリポジトリの作り方

はじめてですか? むずかしくありません — 上から順にたどれば、自分の環境で動かして味見できます。

바로 시작하기

  1. Python を使ったローカルサーバーの起動
python3 -m http.server 4173 --bind 127.0.0.1
  1. ブラウザで表示 http://127.0.0.1:4173/ にアクセスするか、index.html をディスクから直接開きます(ネットワークリクエストがないため、file:// でも HTTP でも動作します)。

ギット飯トライで味見

入れるのが面倒で少し不安だったなら — 安全スキャンからインストールまで、ターミナル一行で終わります。

ターミナルに貼り付ければ、ギット飯の安全スキャン → 隔離フォルダへ clone → インストール → 実行方法の案内まで自動です。はじめてでも大丈夫 — この一行だけです。

npx gitbap-try MengTo/towers

Node.js さえあれば、インストールなしで動きます · ギット飯トライとは? →

スター推移 · 7日

108+22 / 7일

使いやすさ · まねしやすいか

サンプル評点 14/100
  • ゆるいライセンス
  • テストあり
  • サンプル集
  • 最近の更新
  • AGENTS.md
  • llms.txt
  • テンプレート

最近の更新あり · 2026 年に作成

「기획·설계」 こういうリポジトリを毎週受け取りませんか?

毎週月曜の朝、選んだ一膳だけ。広告なし · いつでも解除。

自分のリポジトリですか? README にギット飯バッジを貼る
[![깃밥](https://www.gitbap.com/badge/MengTo/towers.svg)](https://www.gitbap.com/r/MengTo/towers)
Claude からそのまま使う — ギット飯のつなぎ方

ギット飯を Claude につなぐと、こうしたリポジトリを Claude・Cursor・Codex から直接さがして試せます。

方法 ① コネクタ URL

Claude の設定 → コネクタにこのアドレスを貼り付け。

https://www.gitbap.com/api/mcp
方法 ② プラグイン(試用まで)

プラグインを入れると /gitbap-trending·/gitbap-try のスラッシュコマンドで、その場でリポジトリを試せます。Claude Code で下の 2 行を順に実行してください。

/plugin marketplace add jakeparkcolde/gitbap-cowork
/plugin install gitbap-cowork@gitbap
つなぎ方をくわしく →

AI が README をもとに要約しました · 原文を見る