Create js/three_map.js

static/js/three_map.js

@@ -0,0 +1,123 @@
+// 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();