Update index.html
Browse files- 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.
|
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,
|
107 |
-
(canvas.height / 2 - y) * cubeSize * 1.2,
|
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 |
-
|
134 |
-
}
|
135 |
|
136 |
-
|
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 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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>
|