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

No:2315

5503

←

Prev Next

→

3D graphics Display 3D graphics. You can rotate it..ALL
Developer もちきなこ｜Date and time 23/6/20 22:33:16
Build time 71.057 sec｜Game capacity 4.307KB｜

Script

3D Graphics Game

十字キーで回転、見る角度を変えられます。

←

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 Graphics Game</title>
	<style>
		canvas { 
			width: 100%; 
			height: 80vh;
			background-color: #777;
			border: 1px solid #000;
		}
		button {
			background-color: #fff;
			border: none;
			color: #000;
			font-size: 20px;
			padding: 10px 20px;
			border-radius: 10px;
			margin-top: 10px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>3D Graphics Game</h1>
	<p>十字キーで回転、見る角度を変えられます。</p>

// フェースを構成する頂点のインデックスの配列
		const faces = [
			[0, 1, 2, 3],
			[4, 5, 6, 7],
			[0, 1, 5, 4],
			[2, 3, 7, 6],
			[0, 4, 7, 3],
			[1, 5, 6, 2]
		];

// キャンバスのコンテキストを取得
		const canvas = document.getElementById('canvas');
		const ctx = canvas.getContext('2d');

// 初期の見る角度
		let angleX = 30 * Math.PI / 180;
		let angleY = 60 * Math.PI / 180;
		let angleZ = 0;

// 座標を回転させる関数
		function rotate(vertex) {
			const x = vertex[0];
			const y = vertex[1];
			const z = vertex[2];

const sinX = Math.sin(angleX);
			const cosX = Math.cos(angleX);
			const sinY = Math.sin(angleY);
			const cosY = Math.cos(angleY);
			const sinZ = Math.sin(angleZ);
			const cosZ = Math.cos(angleZ);

const x1 = x * cosY * cosZ - y * cosY * sinZ + z * sinY;
			const y1 = x * (sinX * sinY * cosZ + cosX * sinZ) + y * (cosX * cosZ - sinX * sinY * sinZ) - z * sinX * cosY;
			const z1 = x * (sinX * sinZ - cosX * sinY * cosZ) + y * (sinX * cosZ + cosX * sinY * sinZ) + z * cosX * cosY;
			
			return [x1, y1, z1];
		}

// 描画処理
		function draw() {
			// 背景を黒にする
			ctx.fillStyle = '#000';
			ctx.fillRect(0, 0, canvas.width, canvas.height);

// グラフィックを描画
			ctx.beginPath();
			for(let i = 0; i < faces.length; i++) {
				const face = faces[i];
				const vertex0 = vertices[face[0]];
				const vertex1 = vertices[face[1]];
				const vertex2 = vertices[face[2]];
				const vertex3 = vertices[face[3]];

const [x0, y0, z0] = rotate(vertex0);
				const [x1, y1, z1] = rotate(vertex1);
				const [x2, y2, z2] = rotate(vertex2);
				const [x3, y3, z3] = rotate(vertex3);

// z座標が正のものだけ描画する
				if(z0 > 0 && z1 > 0 && z2 > 0 && z3 > 0) {
					// 3D座標を2D座標に変換
					const sx0 = (x0 / z0 + 1) / 2 * canvas.width;
					const sy0 = (-y0 / z0 + 1) / 2 * canvas.height;
					const sx1 = (x1 / z1 + 1) / 2 * canvas.width;
					const sy1 = (-y1 / z1 + 1) / 2 * canvas.height;
					const sx2 = (x2 / z2 + 1) / 2 * canvas.width;
					const sy2 = (-y2 / z2 + 1) / 2 * canvas.height;
					const sx3 = (x3 / z3 + 1) / 2 * canvas.width;
					const sy3 = (-y3 / z3 + 1) / 2 * canvas.height;

ctx.moveTo(sx0, sy0);
					ctx.lineTo(sx1, sy1);
					ctx.lineTo(sx2, sy2);
					ctx.lineTo(sx3, sy3);
					ctx.lineTo(sx0, sy0);
				}
			}
			ctx.fillStyle = '#fff';
			ctx.fill();
		}

// 再生成ボタンをクリックしたときの処理
		document.getElementById('generateBtn').addEventListener('click', function() {
			// 座標をランダムに調整
			for(let i = 0; i < vertices.length; i++) {
				vertices[i][0] += Math.random() * 0.5 - 0.25;
				vertices[i][1] += Math.random() * 0.5 - 0.25;
				vertices[i][2] += Math.random() * 0.5 - 0.25;
			}

angleX = Math.random() * Math.PI * 2;
			angleY = Math.random() * Math.PI * 2;
			angleZ = Math.random() * Math.PI * 2;

draw();
		});

// キャンバスがクリックされたときの処理
		canvas.addEventListener('click', function(event) {
			const rect = event.target.getBoundingClientRect();
			const x = event.clientX - rect.left;
			const y = event.clientY - rect.top;

// キャンバスの中心を原点とした座標に変換
			const mouseX = (x / canvas.width - 0.5) * 2;
			const mouseY = -(y / canvas.height - 0.5) * 2;

angleX += mouseY * 0.5;
			angleY += mouseX * 0.5;

draw();
		});

draw();
	</script>
</body>
</html>