Draw 3D graphics with Three.js.'s game

Click here for free DL of the app version that can save data.

No:8423

3466

←

Prev Next

→

Draw 3D graphics with Three.js.
Developer もちきなこ｜Date and time 23/7/16 3:39:37
Build time 11.365 sec｜Game capacity 1.277KB｜

Script

了解です。以下はThree.jsを使って3Dグラフィックを描画する簡単なゲームの例です。

この例では、Three.jsを使って緑色の立方体を回転させるシンプルなゲームを作成しています。回転する立方体は、マウスやタッチ操作で操作することができます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

Click here for free DL of the app version that can save data.

了解です。以下はThree.jsを使って3Dグラフィックを描画する簡単なゲームの例です。

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>3D Game</title>
	<style>
		body { margin: 0; }
		canvas { display: block; }
	</style>
</head>
<body>
	<script src="https://threejs.org/build/three.js"></script>
	<script>
		const scene = new THREE.Scene();
		const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();
		renderer.setSize(window.innerWidth, window.innerHeight);
		document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry();
		const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
		const cube = new THREE.Mesh(geometry, material);
		scene.add(cube);

camera.position.z = 5;

function animate() {
			requestAnimationFrame(animate);

cube.rotation.x += 0.01;
			cube.rotation.y += 0.01;

renderer.render(scene, camera);
		}

animate();
	</script>
</body>
</html>
```

この例では、Three.jsを使って緑色の立方体を回転させるシンプルなゲームを作成しています。回転する立方体は、マウスやタッチ操作で操作することができます。