Update app.py

app.py

@@ -532,7 +532,133 @@ def create_interface():
                 # Three.jsを使用した3Dマップの表示
                 three_map = gr.HTML(
                     value="""
-                    <iframe src="./static/index.html" width="100%" height="600px" frameborder="0"></iframe>
+                    <div id="three-container" style="width: 100%; height: 600px;"></div>
+                    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+                    <script>
+                        // Three.jsを使用した3Dマップの実装
+                        let scene, camera, renderer, buildings = {}, residents = {};
+
+                        function init() {
+                            // シーンの作成
+                            scene = new THREE.Scene();
+                            scene.background = new THREE.Color(0x87CEEB); // 空色の背景
+
+                            // カメラの設定
+                            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+                            camera.position.set(50, 50, 50);
+                            camera.lookAt(0, 0, 0);
+
+                            // レンダラーの設定
+                            renderer = new THREE.WebGLRenderer({ antialias: true });
+                            renderer.setSize(window.innerWidth, window.innerHeight);
+                            document.getElementById('three-container').appendChild(renderer.domElement);
+
+                            // 光源の追加
+                            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+                            scene.add(ambientLight);
+                            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+                            directionalLight.position.set(50, 50, 50);
+                            scene.add(directionalLight);
+
+                            // 地面の作成
+                            const groundGeometry = new THREE.PlaneGeometry(100, 100);
+                            const groundMaterial = new THREE.MeshStandardMaterial({ 
+                                color: 0x90EE90,
+                                side: THREE.DoubleSide
+                            });
+                            const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+                            ground.rotation.x = -Math.PI / 2;
+                            scene.add(ground);
+
+                            // アニメーションループの開始
+                            animate();
+
+                            // ウィンドウリサイズのハンドリング
+                            window.addEventListener('resize', onWindowResize, false);
+                        }
+
+                        function createBuilding(name, position, color = 0x808080) {
+                            const geometry = new THREE.BoxGeometry(10, 10, 10);
+                            const material = new THREE.MeshStandardMaterial({ color: color });
+                            const building = new THREE.Mesh(geometry, material);
+                            building.position.set(position.x, 5, position.z);
+                            scene.add(building);
+                            buildings[name] = building;
+
+                            // 建物名のラベル
+                            const canvas = document.createElement('canvas');
+                            const context = canvas.getContext('2d');
+                            canvas.width = 256;
+                            canvas.height = 64;
+                            context.fillStyle = '#ffffff';
+                            context.font = '24px Arial';
+                            context.fillText(name, 10, 32);
+                            const texture = new THREE.CanvasTexture(canvas);
+                            const labelMaterial = new THREE.SpriteMaterial({ map: texture });
+                            const label = new THREE.Sprite(labelMaterial);
+                            label.position.set(position.x, 15, position.z);
+                            scene.add(label);
+                        }
+
+                        function createResident(name, position, color = 0xff0000) {
+                            const geometry = new THREE.SphereGeometry(1, 32, 32);
+                            const material = new THREE.MeshStandardMaterial({ color: color });
+                            const resident = new THREE.Mesh(geometry, material);
+                            resident.position.set(position.x, 1, position.z);
+                            scene.add(resident);
+                            residents[name] = resident;
+
+                            // 住民名のラベル
+                            const canvas = document.createElement('canvas');
+                            const context = canvas.getContext('2d');
+                            canvas.width = 256;
+                            canvas.height = 64;
+                            context.fillStyle = '#ffffff';
+                            context.font = '24px Arial';
+                            context.fillText(name, 10, 32);
+                            const texture = new THREE.CanvasTexture(canvas);
+                            const labelMaterial = new THREE.SpriteMaterial({ map: texture });
+                            const label = new THREE.Sprite(labelMaterial);
+                            label.position.set(position.x, 3, position.z);
+                            scene.add(label);
+                        }
+
+                        function updatePositions(state) {
+                            // 建物の位置を更新
+                            state.locations.forEach(location => {
+                                if (!buildings[location.name]) {
+                                    createBuilding(location.name, location.position);
+                                }
+                            });
+
+                            // 住民の位置を更新
+                            state.residents.forEach(resident => {
+                                if (!residents[resident.name]) {
+                                    createResident(resident.name, resident.position);
+                                } else {
+                                    residents[resident.name].position.set(
+                                        resident.position.x,
+                                        1,
+                                        resident.position.z
+                                    );
+                                }
+                            });
+                        }
+
+                        function onWindowResize() {
+                            camera.aspect = window.innerWidth / window.innerHeight;
+                            camera.updateProjectionMatrix();
+                            renderer.setSize(window.innerWidth, window.innerHeight);
+                        }
+
+                        function animate() {
+                            requestAnimationFrame(animate);
+                            renderer.render(scene, camera);
+                        }
+
+                        // 初期化
+                        init();
+                    </script>
                     """,
                     label="3D町マップ"
                 )
@@ -576,7 +702,6 @@ def create_interface():
                     updatePositions({json.dumps(state)});
                 }}
             </script>
-            <iframe src="./static/index.html" width="100%" height="600px" frameborder="0"></iframe>
             """
         
         # ボタンイベントの接続
@@ -662,8 +787,5 @@ if __name__ == "__main__":
         server_name="0.0.0.0",
         server_port=7860,
         share=True,
-        show_error=True,
-        root_path="",
-        favicon_path=None,
-        allowed_paths=["static"]
+        show_error=True
     )