3Dグラフィックキューブ型の3Dモデルを表示します。3Dモデルは、十字キーを押すことで回転させることが可能で、見る角度(x軸,y軸,z軸)を変えることが出来ます。's game

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

No:2868

5006

←

Prev Next

→

3Dグラフィックキューブ型の3Dモデルを表示します。3Dモデルは、十字キーを押すことで回転させる..ALL
Developer もちきなこ｜Date and time 23/6/23 0:20:37
Build time 27.029 sec｜Game capacity 2.326KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>3D Cube Game</title>
	<style>
		canvas {
			display: block;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	
	<script>
		const canvas = document.getElementById('canvas');
		const context = canvas.getContext('2d');
		
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		
		const rotation = {
			x: 0,
			y: 0,
			z: 0
		};
		
		const cube = {
			vertices: [
				[-50, -50, -50],
				[-50, 50, -50],
				[50, 50, -50],
				[50, -50, -50],
				[-50, -50, 50],
				[-50, 50, 50],
				[50, 50, 50],
				[50, -50, 50]
			],
			edges: [
				[0, 1],
				[1, 2],
				[2, 3],
				[3, 0],
				[4, 5],
				[5, 6],
				[6, 7],
				[7, 4],
				[0, 4],
				[1, 5],
				[2, 6],
				[3, 7]
			]
		};
		
		function renderCube() {
			context.clearRect(0, 0, canvas.width, canvas.height);
			
			const projectedVertices = [];
			
			for (let i = 0; i < cube.vertices.length; i++) {
				const vertex = cube.vertices[i];
				
				const rotatedX = vertex[0] * Math.cos(rotation.x) + vertex[2] * Math.sin(rotation.x);
				const rotatedY = vertex[1] * Math.cos(rotation.y) + vertex[2] * Math.sin(rotation.y);
				const rotatedZ = vertex[2] * Math.cos(rotation.z) - vertex[0] * Math.sin(rotation.z);
				
				const distance = 500;
				const fov = (canvas.width + canvas.height) / 2;
				const scale = fov / (fov + rotatedZ + distance);
				
				const x = canvas.width / 2 + rotatedX * scale;
				const y = canvas.height / 2 + rotatedY * scale;
				
				projectedVertices.push([x, y]);
			}
			
			for (let i = 0; i < cube.edges.length; i++) {
				const edge = cube.edges[i];
				const startPoint = projectedVertices[edge[0]];
				const endPoint = projectedVertices[edge[1]];
				
				context.beginPath();
				context.moveTo(startPoint[0], startPoint[1]);
				context.lineTo(endPoint[0], endPoint[1]);
				context.stroke();
			}
		}
		
		document.addEventListener('keydown', function(event) {
			switch(event.keyCode) {
				case 37: // left arrow
					rotation.x -= 0.05;
					break;
				case 38: // up arrow
					rotation.y += 0.05;
					break;
				case 39: // right arrow
					rotation.x += 0.05;
					break;
				case 40: // down arrow
					rotation.y -= 0.05;
					break;
			}
			
			renderCube();
		});
		
		renderCube();
	</script>
	
</body>
</html>