3Dクリスタル JavaScriptによって線画された正八面体を表示します。なお、正八面体はJavaScriptとcanvasによる3Dグラフィック(3DCG)です。正八面体は十字キーによって回転させることが出来ます。また、正八面体の色は水色で、不透明度は100です。's game

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

No:4906

3899

←

Prev Next

→

3Dクリスタル JavaScriptによって線画された正八面体を表示します。なお、正八面体はJ..ALL
Developer もちきなこ｜Date and time 23/6/29 0:00:16
Build time 36.934 sec｜Game capacity 3.591KB｜

Script

了解しました。以下がプログラムの例です。

このプログラムは、HTMLのcanvas要素を使用して正八面体を描画します。正八面体は十字キーによって回転させることができます。また、正八面体の色は水色で、不透明度は100です。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

了解しました。以下がプログラムの例です。

```html
<!DOCTYPE html>
<html>
<head>
    <title>3Dクリスタル</title>
    <style>
        canvas {
            background-color: black;
        }
    </style>
</head>
<body>
<br><br><br><br><br>
    <canvas id="canvas"></canvas>

const rotationSpeed = 0.01; // 回転速度

const cube = {
            vertices: [
                { x: -50, y: -50, z: -50 },
                { x: 50, y: -50, z: -50 },
                { x: 50, y: 50, z: -50 },
                { x: -50, y: 50, z: -50 },
                { x: -50, y: -50, z: 50 },
                { x: 50, y: -50, z: 50 },
                { x: 50, y: 50, z: 50 },
                { x: -50, y: 50, z: 50 }
            ],
            faces: [
                { a: 0, b: 1, c: 2 },
                { a: 2, b: 3, c: 0 },
                { a: 1, b: 5, c: 6 },
                { a: 6, b: 2, c: 1 },
                { a: 7, b: 6, c: 5 },
                { a: 5, b: 4, c: 7 },
                { a: 4, b: 0, c: 3 },
                { a: 3, b: 7, c: 4 },
                { a: 4, b: 5, c: 1 },
                { a: 1, b: 0, c: 4 },
                { a: 3, b: 2, c: 6 },
                { a: 6, b: 7, c: 3 }
            ]
        };

let alpha = 0;
        let beta = 0;
        let gamma = 0;

function update() {
            alpha += rotationSpeed;
            beta += rotationSpeed;
            gamma += rotationSpeed;

draw();
            requestAnimationFrame(update);
        }

function draw() {
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;

context.clearRect(0, 0, canvas.width, canvas.height);
            context.strokeStyle = "rgba(0, 255, 255, 1)";

cube.vertices.forEach(vertex => {
                const x = vertex.x;
                const y = vertex.y;
                const z = vertex.z;

// 3D回転
                const x1 = x * Math.cos(alpha) - z * Math.sin(alpha);
                const z1 = z * Math.cos(alpha) + x * Math.sin(alpha);
                const y2 = y * Math.cos(beta) - z1 * Math.sin(beta);
                const z2 = z1 * Math.cos(beta) + y * Math.sin(beta);
                const x3 = x1 * Math.cos(gamma) + y2 * Math.sin(gamma);
                const y3 = y2 * Math.cos(gamma) - x1 * Math.sin(gamma);

// 3D→2D変換
                const scale = 200 / (200 + z2); // 遠近法
                const x2 = x3 * scale + centerX;
                const y1 = -y3 * scale + centerY;

vertex.x2d = x2;
                vertex.y2d = y1;
            });

cube.faces.forEach(face => {
                const vertexA = cube.vertices[face.a];
                const vertexB = cube.vertices[face.b];
                const vertexC = cube.vertices[face.c];

context.beginPath();
                context.moveTo(vertexA.x2d, vertexA.y2d);
                context.lineTo(vertexB.x2d, vertexB.y2d);
                context.lineTo(vertexC.x2d, vertexC.y2d);
                context.closePath();
                context.stroke();
            });
        }

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