Minecraft in 3d, Three.js's game

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

No:38772

←

Prev Next

→

Minecraft in 3d, Three.js
Developer User17421｜Date and time 24/1/25 9:28:27
Build time 17.508 sec｜Game capacity 4.638KB｜

Script

Here's an example of a simple game implemented using Three.js library to create a 3D version of Minecraft. The game allows you to move around using smartphone controls and interact with the environment.

Please note that this is just a basic template to get started with a 3D game using Three.js and smartphone controls. You can further enhance the game by adding more game mechanics, textures, models, and interactions as per your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Minecraft 3D</title>
  <style>
    body { margin: 0; }
    canvas { width: 100%; height: 100%; display: block; }
  </style>
</head>
<body>
  <script src="https://threejs.org/build/three.js"></script>
  <script>
    const cameraSpeed = 0.02;
    const movementSpeed = 0.2;

let camera, scene, renderer;
    let controls, player;

init();
    animate();

function init() {
      scene = new THREE.Scene();
      camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      
      renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

controls = new THREE.DeviceOrientationControls(camera, true);

const geometry = new THREE.BoxGeometry(1, 1, 1);
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      player = new THREE.Mesh(geometry, material);
      scene.add(player);
      
      window.addEventListener('resize', onWindowResize, false);
    }

function animate() {
      requestAnimationFrame(animate);
      controls.update();

const moveForward = new THREE.Vector3(0, 0, -movementSpeed).applyQuaternion(camera.quaternion);
      const moveBackward = new THREE.Vector3(0, 0, movementSpeed).applyQuaternion(camera.quaternion);
      const moveLeft = new THREE.Vector3(-movementSpeed, 0, 0).applyQuaternion(camera.quaternion);
      const moveRight = new THREE.Vector3(movementSpeed, 0, 0).applyQuaternion(camera.quaternion);

const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints;
      if (isTouchDevice) {
        if (controls.alphaOffset !== null && controls.alphaOffset !== undefined) {
          camera.rotation.y -= controls.alphaOffset * cameraSpeed;
          controls.alphaOffset = 0;
        }

if (controls.betaOffset !== null && controls.betaOffset !== undefined) {
          camera.rotation.x -= controls.betaOffset * cameraSpeed;
          controls.betaOffset = 0;
        }
      }

if (movement.forward) player.position.add(moveForward);
      if (movement.backward) player.position.add(moveBackward);
      if (movement.left) player.position.add(moveLeft);
      if (movement.right) player.position.add(moveRight);
      
      renderer.render(scene, camera);
    }

function onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);
    }

// Touch event handlers for smartphone controls
    const movement = {
      forward: false,
      backward: false,
      left: false,
      right: false
    };

function onTouchStart(event) {
      switch (event.target.id) {
        case 'forward':
          movement.forward = true;
          break;
        case 'backward':
          movement.backward = true;
          break;
        case 'left':
          movement.left = true;
          break;
        case 'right':
          movement.right = true;
          break;
      }
    }

function onTouchEnd(event) {
      switch (event.target.id) {
        case 'forward':
          movement.forward = false;
          break;
        case 'backward':
          movement.backward = false;
          break;
        case 'left':
          movement.left = false;
          break;
        case 'right':
          movement.right = false;
          break;
      }
    }

document.getElementById('forward').addEventListener('touchstart', onTouchStart);
    document.getElementById('backward').addEventListener('touchstart', onTouchStart);
    document.getElementById('left').addEventListener('touchstart', onTouchStart);
    document.getElementById('right').addEventListener('touchstart', onTouchStart);

document.getElementById('forward').addEventListener('touchend', onTouchEnd);
    document.getElementById('backward').addEventListener('touchend', onTouchEnd);
    document.getElementById('left').addEventListener('touchend', onTouchEnd);
    document.getElementById('right').addEventListener('touchend', onTouchEnd);
  </script>
</body>
</html>
```

Please note that this is just a basic template to get started with a 3D game using Three.js and smartphone controls. You can further enhance the game by adding more game mechanics, textures, models, and interactions as per your requirements.