3Dグラフィック 3Dグラフィックを表示します。十字キーを押すことで回転させることができ、見る角度(x軸、y軸、z軸)を変えることが可能です。's game

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

No:2309

6168

←

Prev Next

→

3Dグラフィック 3Dグラフィックを表示します。十字キーを押すことで回転させることができ、見る角度..ALL
Developer もちきなこ｜Date and time 23/6/20 22:03:28
Build time 55.725 sec｜Game capacity 4.516KB｜

Script

以下は1枚のhtmlファイルで実装された3Dグラフィック表示のゲームの例です。

このゲームでは、矢印キーを使って見る角度を変えることができます。描画しているのは立方体で、回転させることで立方体を見ることができます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

以下は1枚のhtmlファイルで実装された3Dグラフィック表示のゲームの例です。

<!DOCTYPE html>
<html>
<head>
	<title>3Dグラフィック</title>
	<style>
		canvas {
			width: 100%;
			height: 100%;
			display: block;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		// 3Dグラフィックを表示するための変数や定数を初期化
		const canvas = document.getElementById('canvas');
		const ctx = canvas.getContext('2d');
		const width = canvas.width = window.innerWidth;
		const height = canvas.height = window.innerHeight;
		const cubeSize = 200;

let xAngle = 0;
		let yAngle = 0;
		let zAngle = 0;

// キーボードの入力を受け取る
		window.addEventListener('keydown', function(event) {
			switch(event.keyCode) {
				case 37: // 左
					yAngle -= 0.05;
					break;
				case 38: // 上
					xAngle += 0.05;
					break;
				case 39: // 右
					yAngle += 0.05;
					break;
				case 40: // 下
					xAngle -= 0.05;
					break;
			}
		});

// 3Dグラフィックを描画する
		function draw() {
			// キャンバスをクリア
			ctx.clearRect(0, 0, width, height);

// 平行投影変換の行列を計算
			const halfWidth = width / 2;
			const halfHeight = height / 2;
			const cosY = Math.cos(yAngle);
			const sinY = Math.sin(yAngle);
			const cosX = Math.cos(xAngle);
			const sinX = Math.sin(xAngle);
			const cosZ = Math.cos(zAngle);
			const sinZ = Math.sin(zAngle);

const transformMatrix = [
				[cosY * cosZ, sinY * sinX - cosY * sinZ * cosX, sinY * cosX + cosY * sinZ * sinX],
				[sinZ, cosZ * cosX, -cosZ * sinX],
				[-sinY * cosZ, cosY * sinX + sinY * sinZ * cosX, cosY * cosX - sinY * sinZ * sinX],
				[0, 0, 0]
			];

// キューブの座標を計算
			const vertices = [
				[-cubeSize, -cubeSize, -cubeSize],
				[-cubeSize, -cubeSize, cubeSize],
				[-cubeSize, cubeSize, -cubeSize],
				[-cubeSize, cubeSize, cubeSize],
				[cubeSize, -cubeSize, -cubeSize],
				[cubeSize, -cubeSize, cubeSize],
				[cubeSize, cubeSize, -cubeSize],
				[cubeSize, cubeSize, cubeSize]
			];

const transformedVertices = vertices.map(vertex => (
				vertex.map((component, index) => {
					let transformedComponent = 0;
					for (let i = 0; i < 3; i++) {
						transformedComponent += vertex[i] * transformMatrix[i][index];
					}
					return transformedComponent;
				})
			));

// キューブの描画
			ctx.beginPath();
			ctx.moveTo(halfWidth + transformedVertices[0][0], halfHeight - transformedVertices[0][1]);
			ctx.lineTo(halfWidth + transformedVertices[1][0], halfHeight - transformedVertices[1][1]);
			ctx.lineTo(halfWidth + transformedVertices[3][0], halfHeight - transformedVertices[3][1]);
			ctx.lineTo(halfWidth + transformedVertices[2][0], halfHeight - transformedVertices[2][1]);
			ctx.closePath();
			ctx.stroke();

ctx.beginPath();
			ctx.moveTo(halfWidth + transformedVertices[4][0], halfHeight - transformedVertices[4][1]);
			ctx.lineTo(halfWidth + transformedVertices[5][0], halfHeight - transformedVertices[5][1]);
			ctx.lineTo(halfWidth + transformedVertices[7][0], halfHeight - transformedVertices[7][1]);
			ctx.lineTo(halfWidth + transformedVertices[6][0], halfHeight - transformedVertices[6][1]);
			ctx.closePath();
			ctx.stroke();

ctx.beginPath();
			ctx.moveTo(halfWidth + transformedVertices[0][0], halfHeight - transformedVertices[0][1]);
			ctx.lineTo(halfWidth + transformedVertices[4][0], halfHeight - transformedVertices[4][1]);
			ctx.stroke();

ctx.beginPath();
			ctx.moveTo(halfWidth + transformedVertices[1][0], halfHeight - transformedVertices[1][1]);
			ctx.lineTo(halfWidth + transformedVertices[5][0], halfHeight - transformedVertices[5][1]);
			ctx.stroke();

ctx.beginPath();
			ctx.moveTo(halfWidth + transformedVertices[2][0], halfHeight - transformedVertices[2][1]);
			ctx.lineTo(halfWidth + transformedVertices[6][0], halfHeight - transformedVertices[6][1]);
			ctx.stroke();

ctx.beginPath();
			ctx.moveTo(halfWidth + transformedVertices[3][0], halfHeight - transformedVertices[3][1]);
			ctx.lineTo(halfWidth + transformedVertices[7][0], halfHeight - transformedVertices[7][1]);
			ctx.stroke();

// 角度を更新して再描画
			zAngle += 0.01;
			requestAnimationFrame(draw);
		}

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