Update static/js/three_map.js

static/js/three_map.js

@@ -1,5 +1,6 @@
 // Three.jsを使用した3Dマップの実装
 let scene, camera, renderer, buildings = {}, residents = {};
+let controls;
 
 function init() {
     // シーンの作成
@@ -14,6 +15,7 @@ function init() {
     // レンダラーの設定
     renderer = new THREE.WebGLRenderer({ antialias: true });
     renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.shadowMap.enabled = true;
     document.getElementById('three-container').appendChild(renderer.domElement);
 
     // 光源の追加
@@ -21,6 +23,7 @@ function init() {
     scene.add(ambientLight);
     const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
     directionalLight.position.set(50, 50, 50);
+    directionalLight.castShadow = true;
     scene.add(directionalLight);
 
     // 地面の作成
@@ -31,8 +34,14 @@ function init() {
     });
     const ground = new THREE.Mesh(groundGeometry, groundMaterial);
     ground.rotation.x = -Math.PI / 2;
+    ground.receiveShadow = true;
     scene.add(ground);
 
+    // カメラコントロールの追加
+    controls = new THREE.OrbitControls(camera, renderer.domElement);
+    controls.enableDamping = true;
+    controls.dampingFactor = 0.05;
+
     // アニメーションループの開始
     animate();
 
@@ -40,11 +49,46 @@ function init() {
     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 });
+function createBuilding(name, position, type) {
+    let geometry, material, color;
+    
+    // 建物の種類に応じて形状と色を設定
+    switch(type) {
+        case '住宅':
+            geometry = new THREE.BoxGeometry(8, 6, 8);
+            color = 0xFFB6C1; // ピンク系
+            break;
+        case '公園':
+            geometry = new THREE.CylinderGeometry(5, 5, 2, 32);
+            color = 0x228B22; // 森の緑
+            break;
+        case '図書館':
+            geometry = new THREE.BoxGeometry(12, 8, 12);
+            color = 0x8B4513; // 茶色
+            break;
+        case 'カフェ':
+            geometry = new THREE.BoxGeometry(10, 6, 10);
+            color = 0xDEB887; // ベージュ
+            break;
+        case '商店':
+            geometry = new THREE.BoxGeometry(10, 5, 10);
+            color = 0x4682B4; // スチールブルー
+            break;
+        default:
+            geometry = new THREE.BoxGeometry(10, 10, 10);
+            color = 0x808080;
+    }
+
+    material = new THREE.MeshStandardMaterial({ 
+        color: color,
+        roughness: 0.7,
+        metalness: 0.2
+    });
+    
     const building = new THREE.Mesh(geometry, material);
-    building.position.set(position.x, 5, position.z);
+    building.position.set(position.x, geometry.parameters.height / 2, position.z);
+    building.castShadow = true;
+    building.receiveShadow = true;
     scene.add(building);
     buildings[name] = building;
 
@@ -59,15 +103,53 @@ function createBuilding(name, position, color = 0x808080) {
     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);
+    label.position.set(position.x, geometry.parameters.height + 2, 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);
+function createResident(name, position, profession) {
+    let geometry, material, color;
+    
+    // 職業に応じて色を設定
+    switch(profession) {
+        case '教師':
+            color = 0x0000FF; // 青
+            break;
+        case '看護師':
+            color = 0xFF0000; // 赤
+            break;
+        case 'エンジニア':
+            color = 0x00FF00; // 緑
+            break;
+        case 'デザイナー':
+            color = 0xFF00FF; // マゼンタ
+            break;
+        case '商店主':
+            color = 0xFFA500; // オレンジ
+            break;
+        default:
+            color = 0xFFFFFF; // 白
+    }
+
+    // 頭部
+    const headGeometry = new THREE.SphereGeometry(1, 32, 32);
+    const headMaterial = new THREE.MeshStandardMaterial({ color: 0xFFE4C4 });
+    const head = new THREE.Mesh(headGeometry, headMaterial);
+    head.position.y = 2;
+    head.castShadow = true;
+
+    // 胴体
+    const bodyGeometry = new THREE.CylinderGeometry(0.7, 0.7, 2, 32);
+    const bodyMaterial = new THREE.MeshStandardMaterial({ color: color });
+    const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
+    body.position.y = 0.5;
+    body.castShadow = true;
+
+    // グループ化
+    const resident = new THREE.Group();
+    resident.add(head);
+    resident.add(body);
+    resident.position.set(position.x, 0, position.z);
     scene.add(resident);
     residents[name] = resident;
 
@@ -82,7 +164,7 @@ function createResident(name, position, color = 0xff0000) {
     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);
+    label.position.set(position.x, 4, position.z);
     scene.add(label);
 }
 
@@ -90,20 +172,41 @@ function updatePositions(state) {
     // 建物の位置を更新
     state.locations.forEach(location => {
         if (!buildings[location.name]) {
-            createBuilding(location.name, location.position);
+            const type = location.name.includes('住宅') ? '住宅' :
+                       location.name.includes('公園') ? '公園' :
+                       location.name.includes('図書館') ? '図書館' :
+                       location.name.includes('カフェ') ? 'カフェ' :
+                       location.name.includes('商店') ? '商店' : 'その他';
+            createBuilding(location.name, location.position, type);
         }
     });
 
     // 住民の位置を更新
     state.residents.forEach(resident => {
         if (!residents[resident.name]) {
-            createResident(resident.name, resident.position);
+            createResident(resident.name, resident.position, resident.profession);
         } else {
-            residents[resident.name].position.set(
+            // 現在位置から目標位置への移動をアニメーション
+            const currentPos = residents[resident.name].position;
+            const targetPos = new THREE.Vector3(
                 resident.position.x,
-                1,
+                0,
                 resident.position.z
             );
+            
+            // 移動速度
+            const speed = 0.1;
+            
+            // 現在位置から目標位置への方向ベクトル
+            const direction = targetPos.sub(currentPos).normalize();
+            
+            // 移動
+            currentPos.add(direction.multiplyScalar(speed));
+            
+            // 住民の向きを移動方向に合わせる
+            if (direction.length() > 0) {
+                residents[resident.name].lookAt(targetPos);
+            }
         }
     });
 }
@@ -116,6 +219,7 @@ function onWindowResize() {
 
 function animate() {
     requestAnimationFrame(animate);
+    controls.update();
     renderer.render(scene, camera);
 }