AI game creator

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

No:10631

103

←

Prev Next

→

A three.js gun
Developer User4587｜Date and time 23/8/1 10:44:58
Build time 17.505 sec｜Game capacity 2.679KB｜

Script

Sure! Here's an example of a simple game utilizing the Three.js library to create a virtual shooting game with a gun. Please note that for simplicity, the game logic and controls are implemented using the mouse instead of smartphone touch controls. You can copy and paste the following code into a single HTML file and open it in a browser to play the game.

Please note that the code expects you to provide a path to your own gun texture image by replacing `'emozi_himawari.png'` with the actual path to your image. Additionally, this code uses the basic mouse movement to control the gun's position. If you want to adapt it for smartphone operations, you would need to modify the controls accordingly using touch events.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Virtual Shooting Game</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script>
    window.addEventListener('DOMContentLoaded', init);

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

const gunTexture = new THREE.TextureLoader().load('path/to/your/gunTexture.png'); // Add your own gun texture image

const geometry = new THREE.BoxGeometry(1, 1, 4);
      const material = new THREE.MeshBasicMaterial({ map: gunTexture });
      const gun = new THREE.Mesh(geometry, material);
      scene.add(gun);

camera.position.z = 10;

window.addEventListener('mousemove', handleMouseMove);

function handleMouseMove(event) {
        const mouseX = (event.clientX / window.innerWidth) * 2 - 1;
        const mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
        const mousePos = new THREE.Vector3(mouseX, mouseY, 0.5);
        mousePos.unproject(camera);
        const dir = mousePos.sub(camera.position).normalize();
        const distance = -camera.position.z / dir.z;
        const pos = camera.position.clone().add(dir.multiplyScalar(distance));
        gun.position.copy(pos);
      }

function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
      }

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

</html>
```

Please note that the code expects you to provide a path to your own gun texture image by replacing `'path/to/your/gunTexture.png'` with the actual path to your image. Additionally, this code uses the basic mouse movement to control the gun's position. If you want to adapt it for smartphone operations, you would need to modify the controls accordingly using touch events.