A three.js tree change the XYNZ coordinates in rotations with buttons's game

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

No:10633

←

Prev Next

→

A three.js tree change the XYNZ coordinates in rot..ALL
Developer User4587｜Date and time 23/8/1 10:46:38
Build time 20.773 sec｜Game capacity 2.625KB｜

Script

Sure! Here's an example of a simple game implemented as a single HTML file using three.js library for creating 3D graphics. In this game, you can rotate a tree object along the X, Y, and Z axes using buttons. The game assumes smartphone operation and uses pictograms for the buttons.

You can save this code into an HTML file and open it in a web browser to play the game. The buttons labeled with "X," "Y," and "Z" can be clicked to rotate the tree object along the respective axes.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tree Rotation Game</title>
    <style>
      body { margin: 0; }
      canvas { display: block; }
      #buttons-container { position: absolute; top: 10px; left: 10px; }
      .button { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; background-color: #ddd; margin-bottom: 10px; font-size: 24px; }
    </style>
  </head>
  <body>
    <div id="buttons-container">
      <div class="button" id="buttonX">X</div>
      <div class="button" id="buttonY">Y</div>
      <div class="button" id="buttonZ">Z</div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.js"></script>
    <script>
      // Initialize three.js renderer
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

// Create a scene
      const scene = new THREE.Scene();

// Create a camera
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.z = 5;

// Create a tree object
      const geometry = new THREE.BoxGeometry(1, 1, 1);
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      const tree = new THREE.Mesh(geometry, material);

// Add the tree to the scene
      scene.add(tree);

// Functions to handle button clicks
      function rotateX() {
        tree.rotation.x += 0.1;
      }

function rotateY() {
        tree.rotation.y += 0.1;
      }

function rotateZ() {
        tree.rotation.z += 0.1;
      }

// Button event listeners
      document.getElementById('buttonX').addEventListener('click', rotateX);
      document.getElementById('buttonY').addEventListener('click', rotateY);
      document.getElementById('buttonZ').addEventListener('click', rotateZ);

// Animation loop
      function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
      }
      animate();
    </script>
  </body>
</html>
```

You can save this code into an HTML file and open it in a web browser to play the game. The buttons labeled with "X," "Y," and "Z" can be clicked to rotate the tree object along the respective axes.