Particles in three.js's game

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

No:8838

975

←

Prev Next

→

Particles in three.js
Developer User4246｜Date and time 23/7/18 20:21:26
Build time 48.962 sec｜Game capacity 2.641KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<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 = 960;
      const height = 540;
      let rot = 0; // 角度

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

// シーンを作成
      const scene = new THREE.Scene();

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

// 星屑を作成します (カメラの動きをわかりやすくするため)
      createStarField();

function createStarField() {
        // 頂点情報を格納する配列
        const vertices = [];

// 配置する範囲
        const SIZE = 3000;
        // 配置する個数
        const LENGTH = 1000;

for (let i = 0; i < LENGTH; i++) {
          const x = SIZE * (Math.random() - 0.5);
          const y = SIZE * (Math.random() - 0.5);
          const z = SIZE * (Math.random() - 0.5);

vertices.push(x, y, z);
        }

// 形状データを作成
        const geometry = new THREE.BufferGeometry();
        geometry.setAttribute("position", new THREE.Float32BufferAttribute(vertices, 3));

// マテリアルを作成
        const material = new THREE.PointsMaterial({
          // 一つ一つのサイズ
          size: 10,
          // 色
          color: 0xffffff,
        });

// 物体を作成
        const mesh = new THREE.Points(geometry, material);
        scene.add(mesh);
      }

tick();

// 毎フレーム時に実行されるループイベントです
      function tick() {
        rot += 1;

// ラジアンに変換する
        const radian = (rot * Math.PI) / 180;
        // 角度に応じてカメラの位置を設定
        camera.position.x = 1000 * Math.sin(radian);
        camera.position.z = 1000 * Math.cos(radian);
        // 原点方向を見つめる
        camera.lookAt(new THREE.Vector3(0, 0, 0));

// レンダリング
        renderer.render(scene, camera);

requestAnimationFrame(tick);
      }
    </script>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
  </body>
</html>