AI game creator

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

No:8524

11104

←

Prev Next

→

Three.js Camera
Developer anonymous｜Date and time 70/1/1 9:58:35
Build time unknown sec｜Game capacity 3.515KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!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 = 320;
      const height = 540;

// レンダラーを作成
      const renderer = new THREE.WebGLRenderer({
        canvas: document.querySelector("#myCanvas"),
        antialias: true,
      });
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(width, height);
      // レンダラー側で影を有効に
      renderer.shadowMap.enabled = true;

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

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

// 光源を作成
      {
        const spotLight = new THREE.SpotLight(0xffffff, 4, 2000, Math.PI / 5, 0.2, 1.5);
        spotLight.position.set(500, 300, 500);
        spotLight.castShadow = true; // 影を落とす設定
        spotLight.shadow.mapSize.width = 512;
        spotLight.shadow.mapSize.height = 512;
        scene.add(spotLight);
      }

// 地面を作成
      {
        // 床のテクスチャー
        const texture = new THREE.TextureLoader().load("imgs/floor.png");
        texture.wrapS = texture.wrapT = THREE.RepeatWrapping; // リピート可能に
        texture.repeat.set(10, 10); // 10x10マスに設定
        texture.magFilter = THREE.NearestFilter; // アンチエイリアスを外す

const floor = new THREE.Mesh(
          new THREE.PlaneGeometry(1000, 1000),
          new THREE.MeshStandardMaterial({
            map: texture,
            roughness: 0.0,
            metalness: 0.6,
          })
        );
        floor.rotation.x = -Math.PI / 2;
        floor.receiveShadow = true; // 影の設定
        scene.add(floor);
      }

// マス目を作成
      {
        // 立方体のマテリアルとジオメトリを作成
        const material = new THREE.MeshStandardMaterial({
          color: 0x22dd22,
          roughness: 0.1,
          metalness: 0.2,
        });
        const geometry = new THREE.BoxGeometry(45, 45, 45);

// 立方体を複数作成しランダムに配置
        for (let i = 0; i < 60; i++) {
          const box = new THREE.Mesh(geometry, material);
          box.position.x = Math.round((Math.random() - 0.5) * 19) * 50 + 25;
          box.position.y = 25;
          box.position.z = Math.round((Math.random() - 0.5) * 19) * 50 + 25;
          // 影の設定
          box.receiveShadow = true;
          box.castShadow = true;
          scene.add(box);
        }
      }

tick();

// 毎フレーム時に実行されるループイベントです
      function tick() {
        // 角度に応じてカメラの位置を設定
        camera.position.x = 500 * Math.sin(Date.now() / 2000);
        camera.position.y = 250;
        camera.position.z = 500 * Math.cos(Date.now() / 2000);
        // 原点方向を見つめる
        camera.lookAt(new THREE.Vector3(0, 0, 0));

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