Lots of boxes with three.js's game

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

No:8376

6703

←

Prev Next

→

Lots of boxes with three.js
Developer User4160｜Date and time 23/7/15 15:05:52
Build time 12.065 sec｜Game capacity 1.553KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Box Game</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
  </head>
  <body style="margin: 0;">
    <div id="game"></div>

// Create renderer
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.getElementById("game").appendChild(renderer.domElement);

// Create boxes
      var boxes = [];
      for (var i = 0; i < 100; i++) {
        var geometry = new THREE.BoxGeometry(1, 1, 1);
        var material = new THREE.MeshBasicMaterial({ color: "blue" });
        var box = new THREE.Mesh(geometry, material);
        box.position.set(
          Math.random() * 20 - 10,
          Math.random() * 20 - 10,
          Math.random() * 20 - 10
        );
        boxes.push(box);
        scene.add(box);
      }

// Set camera position
      camera.position.z = 5;

// Game loop
      function animate() {
        requestAnimationFrame(animate);

// Rotate boxes
        boxes.forEach(function (box) {
          box.rotation.x += 0.01;
          box.rotation.y += 0.01;
        });

renderer.render(scene, camera);
      }

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