3D Crystal Displays an octahedron drawn by JavaScript. The octahedron is a 3D graphic (3DCG) created by JavaScript and canvas. The octahedron can be rotated using the crosshairs. The color of the octahedron is light blue, and its opacity is 200. The color of the faces is also light blue, and the opacity is 150.'s game

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

No:7206

7938

←

Prev Next

→

3D Crystal Displays an octahedron drawn by JavaScr..ALL
Developer もちきなこ｜Date and time 23/7/6 12:34:44
Build time 15.226 sec｜Game capacity 2.22KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>3Dクリスタル</title>
    <style>
      canvas {
        background-color: black;
        display: block;
        margin: 50px auto;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");

const width = window.innerWidth;
      const height = window.innerHeight;
      canvas.width = width;
      canvas.height = height;

const tetrahedron = {
        vertices: [
          { x: 0, y: -100, z: 0 },
          { x: -100, y: 100, z: 100 },
          { x: -100, y: 100, z: -100 },
          { x: 100, y: 100, z: 0 }
        ],
        edges: [
          [0, 1],
          [0, 2],
          [0, 3],
          [1, 2],
          [2, 3],
          [3, 1]
        ]
      };

const rotationSpeed = 0.01;
      let rotationX = 0;
      let rotationY = 0;

function render() {
        ctx.clearRect(0, 0, width, height);

tetrahedron.vertices.forEach((vertex, index) => {
          const x = vertex.x;
          const y = vertex.y * Math.cos(rotationX) + vertex.z * Math.sin(rotationX);
          const z = vertex.z * Math.cos(rotationX) - vertex.y * Math.sin(rotationX);

const perspective = 500 / (500 + z);

const screenX = x * perspective + width / 2;
          const screenY = y * perspective + height / 2;

tetrahedron.vertices[index].screenX = screenX;
          tetrahedron.vertices[index].screenY = screenY;
        });

tetrahedron.edges.forEach(edge => {
          const x1 = tetrahedron.vertices[edge[0]].screenX;
          const y1 = tetrahedron.vertices[edge[0]].screenY;
          const x2 = tetrahedron.vertices[edge[1]].screenX;
          const y2 = tetrahedron.vertices[edge[1]].screenY;

ctx.beginPath();
          ctx.moveTo(x1, y1);
          ctx.lineTo(x2, y2);
          ctx.strokeStyle = "rgba(0, 255, 255, 0.2)";
          ctx.lineWidth = 2;
          ctx.stroke();
        });

rotationX += rotationSpeed;
        rotationY += rotationSpeed;

requestAnimationFrame(render);
      }

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