a simple 3d cube spinning all the x y and z axis's game

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

No:41454

←

Prev Next

→

a simple 3d cube spinning all the x y and z axis
Developer User18554｜Date and time 24/2/7 14:17:33
Build time 84.877 sec｜Game capacity 4.115KB｜

Script

Sure, here's an example of a simple 3D cube spinning on all axes using HTML and JavaScript:

You can save this code as an HTML file and open it in a web browser on your smartphone. It will display a 3D cube spinning on all axes. The cube is represented by different colored faces drawn using JavaScript's Canvas API.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Sure, here's an example of a simple 3D cube spinning on all axes using HTML and JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Spinning 3D Cube</title>
  <style>
    #canvas {
      border: 1px solid black;
      width: 200px;
      height: 200px;
      margin: 20px;
    }
  </style>
</head>
<body>
  <div id="canvas"></div>

var width = canvas.width;
    var height = canvas.height;
    var cx = width / 2;
    var cy = height / 2;

var angleX = 0;
    var angleY = 0;
    var angleZ = 0;

function rotateX(x, y, z, angle) {
      var radian = angle * Math.PI / 180;
      var cos = Math.cos(radian);
      var sin = Math.sin(radian);
      var ny = y * cos - z * sin;
      var nz = y * sin + z * cos;
      return [x, ny, nz];
    }

function rotateY(x, y, z, angle) {
      var radian = angle * Math.PI / 180;
      var cos = Math.cos(radian);
      var sin = Math.sin(radian);
      var nx = x * cos + z * sin;
      var nz = -x * sin + z * cos;
      return [nx, y, nz];
    }

function rotateZ(x, y, z, angle) {
      var radian = angle * Math.PI / 180;
      var cos = Math.cos(radian);
      var sin = Math.sin(radian);
      var nx = x * cos - y * sin;
      var ny = x * sin + y * cos;
      return [nx, ny, z];
    }

function draw() {
      // Clear the canvas
      ctx.clearRect(0, 0, width, height);

// Calculate the vertices of the cube
      var vertices = [
        [-50, 50, -50],
        [50, 50, -50],
        [50, -50, -50],
        [-50, -50, -50], // Front face
        [-50, 50, 50],
        [50, 50, 50],
        [50, -50, 50],
        [-50, -50, 50] // Back face
      ];

// Rotate the cube on all axes
      for (var i = 0; i < vertices.length; i++) {
        var rotated = rotateX(vertices[i][0], vertices[i][1], vertices[i][2], angleX);
        rotated = rotateY(rotated[0], rotated[1], rotated[2], angleY);
        rotated = rotateZ(rotated[0], rotated[1], rotated[2], angleZ);
        vertices[i] = rotated;
      }

// Draw the cube faces
      ctx.beginPath();
      ctx.moveTo(cx + vertices[0][0], cy - vertices[0][1]);
      ctx.lineTo(cx + vertices[1][0], cy - vertices[1][1]);
      ctx.lineTo(cx + vertices[2][0], cy - vertices[2][1]);
      ctx.lineTo(cx + vertices[3][0], cy - vertices[3][1]);
      ctx.closePath();
      ctx.fillStyle = "#FF0000"; // Red
      ctx.fill();

ctx.beginPath();
      ctx.moveTo(cx + vertices[4][0], cy - vertices[4][1]);
      ctx.lineTo(cx + vertices[5][0], cy - vertices[5][1]);
      ctx.lineTo(cx + vertices[6][0], cy - vertices[6][1]);
      ctx.lineTo(cx + vertices[7][0], cy - vertices[7][1]);
      ctx.closePath();
      ctx.fillStyle = "#00FF00"; // Green
      ctx.fill();

ctx.beginPath();
      ctx.moveTo(cx + vertices[0][0], cy - vertices[0][1]);
      ctx.lineTo(cx + vertices[4][0], cy - vertices[4][1]);
      ctx.lineTo(cx + vertices[7][0], cy - vertices[7][1]);
      ctx.lineTo(cx + vertices[3][0], cy - vertices[3][1]);
      ctx.closePath();
      ctx.fillStyle = "#0000FF"; // Blue
      ctx.fill();

ctx.beginPath();
      ctx.moveTo(cx + vertices[1][0], cy - vertices[1][1]);
      ctx.lineTo(cx + vertices[5][0], cy - vertices[5][1]);
      ctx.lineTo(cx + vertices[6][0], cy - vertices[6][1]);
      ctx.lineTo(cx + vertices[2][0], cy - vertices[2][1]);
      ctx.closePath();
      ctx.fillStyle = "#FFFF00"; // Yellow
      ctx.fill();

// Rotate the cube
      angleX += 0.5;
      angleY += 0.5;
      angleZ += 0.5;

requestAnimationFrame(draw);
    }

// Start the animation
    draw();
  </script>
</body>
</html>
```