3D stars with three.js's game

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

No:15149

←

Prev Next

→

3D stars with three.js
Developer User6472｜Date and time 23/9/6 16:34:53
Build time 28.707 sec｜Game capacity 2.153KB｜

Script

Sure! Here's an example of a single HTML file implementing a game using Three.js library to create 3D stars.

This code creates a simple game where you can see 100 3D stars rotating in the scene. The stars are randomly positioned and rotate continuously. You can view the game by opening the HTML file in a web browser on your smartphone.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

Sure! Here's an example of a single HTML file implementing a game using Three.js library to create 3D stars.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>3D Stars Game</title>
    <style>
      body { margin: 0; }
      canvas { display: block; }
    </style>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function(event) {
        // Create the scene
        var scene = new THREE.Scene();
        
        // Create the camera
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5;
        
        // Create the renderer
        var renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

// Create a star geometry
        var geometry = new THREE.SphereGeometry(0.5, 32, 32);
        
        // Create a material for the stars
        var material = new THREE.MeshBasicMaterial({color: 0xffffff});

// Create multiple stars
        var stars = [];
        for (var i = 0; i < 100; i++) {
          stars[i] = new THREE.Mesh(geometry, material);
          stars[i].position.x = (Math.random() - 0.5) * 10;
          stars[i].position.y = (Math.random() - 0.5) * 10;
          stars[i].position.z = (Math.random() - 0.5) * 10;
          scene.add(stars[i]);
        }

// Game loop
        function animate() {
          requestAnimationFrame(animate);
          for (var i = 0; i < stars.length; i++) {
            stars[i].rotation.x += 0.01;
            stars[i].rotation.y += 0.01;
          }
          renderer.render(scene, camera);
        }
        
        // Start the game loop
        animate();
      });
    </script>
  </body>
</html>
```

This code creates a simple game where you can see 100 3D stars rotating in the scene. The stars are randomly positioned and rotate continuously. You can view the game by opening the HTML file in a web browser on your smartphone.