Loading model data in Three.js's game

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

No:8573

6558

←

Prev Next

→

Loading model data in Three.js
Developer User4200｜Date and time 23/7/17 0:54:13
Build time 22.473 sec｜Game capacity 2.428KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

}
      }
    </script>
    <script type="module">
      import * as THREE from "three";
      import { OrbitControls } from "three/addons/controls/OrbitControls.js";
      import { ColladaLoader } from "three/addons/loaders/ColladaLoader.js";
 //import { FBXLoader } from 'https://unpkg.com/three@0.126.1/examples/jsm/loaders/FBXLoader.js';

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

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

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

// カメラを作成
      const camera = new THREE.PerspectiveCamera(45, width / height, 0.5, 10000);
      // カメラの初期座標を設定
      camera.position.set(0, 20, 30);

// カメラコントローラーを作成
      const controls = new OrbitControls(camera, canvasElement);
      controls.target.set(0, 3, 0);
      controls.update();

// 平行光源を作成
      const directionalLight = new THREE.DirectionalLight(0xffffff);
      directionalLight.position.set(1, 1, 1);
      scene.add(directionalLight);
      // 環境光を追加
      const ambientLight = new THREE.AmbientLight(0x888888);
      scene.add(ambientLight);

// Collada形式のモデルデータを読み込む
      const loader = new ColladaLoader();
      // Colladaファイルのパスを指定
      const collada = await loader.loadAsync("nekobraver.dae ");
      // 読み込み後に3D空間に追加
      const model = collada.scene;
      scene.add(model);

tick();

// 毎フレーム時に実行されるループイベントです
      function tick() {
        // レンダリング
        renderer.render(scene, camera);
        requestAnimationFrame(tick);
      }

</script>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
  </body>
</html>