Sprites in 3D with Three.js's game

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

No:8543

9545

←

Prev Next

→

Sprites in 3D with Three.js
Developer anonymous｜Date and time 70/1/1 9:40:42
Build time unknown sec｜Game capacity 2.442KB｜

Script

Probably works only on new smartphones..

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

Probably works only on new smartphones..

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script type="importmap">
      {
        "imports": {
           "three": "https://unpkg.com/three@0.152.2/build/three.module.js"
        }
      }
    </script>
    <script type="module">
      import * as THREE from "three";

// サイズを指定
      const width = 340;
      const height = 540;

// レンダラーを作成
      const renderer = new THREE.WebGLRenderer({
        canvas: document.querySelector("#myCanvas"),
      });
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(width, height);
      renderer.setClearColor(0xf9f9f9, 1.0);

// シーンを作成
      const scene = new THREE.Scene();
      scene.fog = new THREE.Fog(0xf9f9f9, 200, 300);

// カメラを作成
      const camera = new THREE.PerspectiveCamera(45, width / height);

// マテリアルを作成する
      const material = new THREE.SpriteMaterial({
        map: new THREE.TextureLoader().load("imgs/star.png"),
      });
      // フォグ（霞）を有効にする
      material.fog = true;

// ビルボードを作成
      for (let i = 0; i < 1000; i++) {
        const sprite = new THREE.Sprite(material);
        // ランダムな座標に配置
        sprite.position.x = 500 * (Math.random() - 0.5);
        sprite.position.y = 100 * Math.random() - 40;
        sprite.position.z = 500 * (Math.random() - 0.5);
        // 必要に応じてスケールを調整
        sprite.scale.set(10, 10, 10);

scene.add(sprite);
      }

// 地面を作成
      const plane = new THREE.GridHelper(300, 10, 0x888888, 0x888888);
      plane.position.y = -40;
      scene.add(plane);

tick();

// 毎フレーム時に実行されるループイベントです
      function tick() {
        // カメラの自動移動
        camera.position.x = 100 * Math.sin(Date.now() / 2000);
        camera.position.z = 100 * Math.cos(Date.now() / 2000);
        camera.position.y = 50 * Math.sin(Date.now() / 1000) + 60;
        camera.lookAt(new THREE.Vector3(0, 0, 0));

// レンダリング
        renderer.render(scene, camera);
        requestAnimationFrame(tick);
      }
    </script>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
  </body>
</html>