北京・天壇祈年殿 TypeScript + Three.js WebGLプロジェクト

作者のメモ

TypeScript + Three.js で、完全に動作する北京・天壇祈年殿のWebGLプロジェクトを作成してください。建築物のジオメトリ、テクスチャ、アニメーションはすべて実行時にコードでプロシージャル生成し、.glb、.gltf、.obj、.fbx などの外部モデルは読み込まないでください。 建築の再現： サイズと高さの異なる3層の青い瑠璃瓦の円形屋根、金色の宝頂、赤い円柱、円形の殿堂本体、青・緑・金色の彩色、斗拱、扉や窓を再現してください。 屋根には曲線の輪郭、回転体、またはカスタムジオメトリを使用し、伸びやかでわずかに反り上がった軒先を表現してください。単純な円錐で代用してはいけません。 白い漢白玉による3層の円形基壇を作り、中央の石段、欄干、柱を配置してください。全体のプロポーションを整え、各層を明確に表現します。 瓦のテクスチャと装飾はプロシージャルに生成し、繰り返し使用する部材には InstancedMesh を優先してください。 シーンとインタラクション： 北京の青空、広場の地面、少量の植栽を用意してください。DirectionalLight と AmbientLight／HemisphereLight を組み合わせ、シャドウ、アンビエントオクルージョン、適度なシネマティックトーンマッピングを有効にします。 OrbitControls による回転とズームに対応し、オン／オフを切り替えられるゆっくりとした自動周回表示も実装してください。 ボタンで「分解／再組立」を切り替えられるようにします。屋根、柱、斗拱、壁、扉や窓、欄干、基壇を階層に沿って滑らかに展開し、その後、正確に元の位置へ戻してください。アニメーションはコードで制御し、時間差のあるリズムを付け、瞬間移動のような動きは避けます。 完全なプロジェクトと起動手順をそのまま納品してください。ページはウィンドウサイズに応じてレスポンシブに対応し、高品質なビジュアルと滑らかな操作感を備えるものとします。インスタンシング、適切なジオメトリのディテール、レンダリング最適化によって、一般的なデスクトップブラウザでも性能を確保してください。コードは明確にモジュール化し、拡張しやすくします。ビルドと主要機能を検証し、未検証の項目があれば正直に記載してください。