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

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 157

Warning: in_array() expects parameter 2 to be array, bool given in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 476

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 484
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 | AI game creator

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

No:7206

7725

←

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>