soiz commited on
Commit
d040897
·
verified ·
1 Parent(s): 36722fa

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +30 -27
index.html CHANGED
@@ -38,14 +38,14 @@
38
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
39
  <!-- OrbitControls ライブラリ -->
40
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/controls/OrbitControls.js"></script>
 
41
  <script>
42
  const canvas = document.getElementById('canvas');
43
  const ctx = canvas.getContext('2d');
44
  let scene, camera, renderer, controls;
45
  const cubeSize = 5; // 立方体のサイズ
46
  let cubes = []; // 立方体を格納する配列
47
-
48
- let cameraSpeed = 5; // カメラ移動速度
49
 
50
  function processImage() {
51
  const fileInput = document.getElementById('imageInput');
@@ -68,19 +68,17 @@
68
  // Three.jsの基本設定
69
  scene = new THREE.Scene();
70
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
71
- camera.position.set(0, 0, 300); // 最初のカメラ位置を設定
72
-
73
- // OrbitControlsを使ってマウス操作で視点を回転できるようにする
74
- controls = new THREE.OrbitControls(camera);
75
- controls.enableDamping = true;
76
- controls.dampingFactor = 0.25;
77
- controls.screenSpacePanning = false;
78
- controls.maxPolarAngle = Math.PI / 2;
79
 
80
  renderer = new THREE.WebGLRenderer();
81
  renderer.setSize(window.innerWidth, window.innerHeight);
82
  document.getElementById('scene-container').appendChild(renderer.domElement);
83
 
 
 
 
 
 
84
  createCubesFromImage();
85
 
86
  animate(); // アニメーション開始
@@ -101,11 +99,10 @@
101
  const material = new THREE.MeshBasicMaterial({ color: color });
102
  const cube = new THREE.Mesh(geometry, material);
103
 
104
- // x座標はそのままに、y座標のみ反転させる
105
  cube.position.set(
106
- (x - canvas.width / 2) * cubeSize * 1.2, // x座標をそのまま使用
107
- (canvas.height / 2 - y) * cubeSize * 1.2, // y座標を反転
108
- Math.random() * 200 - 100 // 初期位置のばらつきを与える
109
  );
110
  scene.add(cube);
111
  cubes.push(cube);
@@ -116,9 +113,6 @@
116
  function animate() {
117
  requestAnimationFrame(animate);
118
 
119
- // OrbitControlsの更新
120
- controls.update();
121
-
122
  // 各立方体をターゲット位置へ移動させる
123
  cubes.forEach((cube, index) => {
124
  const targetX = ((index % canvas.width) - canvas.width / 2) * cubeSize * 1.2;
@@ -130,19 +124,28 @@
130
  cube.position.z += (targetZ - cube.position.z) * 0.05;
131
  });
132
 
133
- renderer.render(scene, camera);
134
- }
135
 
136
- // カメラの移動(WASDキー)
137
- function moveCamera(event) {
138
- const key = event.key.toLowerCase();
139
- if (key === 'w') camera.position.z -= cameraSpeed;
140
- if (key === 's') camera.position.z += cameraSpeed;
141
- if (key === 'a') camera.position.x -= cameraSpeed;
142
- if (key === 'd') camera.position.x += cameraSpeed;
143
  }
144
 
145
- window.addEventListener('keydown', moveCamera);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
146
  </script>
147
  </body>
148
  </html>
 
38
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
39
  <!-- OrbitControls ライブラリ -->
40
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/controls/OrbitControls.js"></script>
41
+
42
  <script>
43
  const canvas = document.getElementById('canvas');
44
  const ctx = canvas.getContext('2d');
45
  let scene, camera, renderer, controls;
46
  const cubeSize = 5; // 立方体のサイズ
47
  let cubes = []; // 立方体を格納する配列
48
+ let cameraSpeed = 5; // カメラの移動速度
 
49
 
50
  function processImage() {
51
  const fileInput = document.getElementById('imageInput');
 
68
  // Three.jsの基本設定
69
  scene = new THREE.Scene();
70
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
71
+ camera.position.z = 300;
 
 
 
 
 
 
 
72
 
73
  renderer = new THREE.WebGLRenderer();
74
  renderer.setSize(window.innerWidth, window.innerHeight);
75
  document.getElementById('scene-container').appendChild(renderer.domElement);
76
 
77
+ controls = new THREE.OrbitControls(camera, renderer.domElement);
78
+ controls.enableDamping = true; // スムーズな操作
79
+ controls.dampingFactor = 0.25;
80
+ controls.screenSpacePanning = false;
81
+
82
  createCubesFromImage();
83
 
84
  animate(); // アニメーション開始
 
99
  const material = new THREE.MeshBasicMaterial({ color: color });
100
  const cube = new THREE.Mesh(geometry, material);
101
 
 
102
  cube.position.set(
103
+ (x - canvas.width / 2) * cubeSize * 1.2,
104
+ (canvas.height / 2 - y) * cubeSize * 1.2,
105
+ Math.random() * 200 - 100
106
  );
107
  scene.add(cube);
108
  cubes.push(cube);
 
113
  function animate() {
114
  requestAnimationFrame(animate);
115
 
 
 
 
116
  // 各立方体をターゲット位置へ移動させる
117
  cubes.forEach((cube, index) => {
118
  const targetX = ((index % canvas.width) - canvas.width / 2) * cubeSize * 1.2;
 
124
  cube.position.z += (targetZ - cube.position.z) * 0.05;
125
  });
126
 
127
+ controls.update(); // OrbitControls の更新
 
128
 
129
+ renderer.render(scene, camera);
 
 
 
 
 
 
130
  }
131
 
132
+ // カメラ移動処理
133
+ document.addEventListener('keydown', (event) => {
134
+ switch (event.key) {
135
+ case 'w': // 前進
136
+ camera.position.z -= cameraSpeed;
137
+ break;
138
+ case 's': // 後退
139
+ camera.position.z += cameraSpeed;
140
+ break;
141
+ case 'a': // 左
142
+ camera.position.x -= cameraSpeed;
143
+ break;
144
+ case 'd': // 右
145
+ camera.position.x += cameraSpeed;
146
+ break;
147
+ }
148
+ });
149
  </script>
150
  </body>
151
  </html>