javascriptで3Dモデルを作成しよう「three.js」を使って立方体を10分で書いてみた

いきなり立方体を出してみました。
今回作成したものです。
ブラウザで3Dモデルを表示できる「three.js」を紹介します。

three.jsってなに

three.jsとはWebGLを扱うjavascriptのライブラリーです。
WebGLとはブラウザで3Ｄコンピュータグラフィックを扱うためのものです。

WebGLは基本的にHTML5のCanvas要素に表示を行います。

詳細は以下のサイトを確認してみてください。

three.js – JavaScript 3D library

今回の作成物

今回は最初ということで、とりあえず立方体を出してみようと思います。

基本的にはシーンという描画する場所、物体(メッシュ)、カメラの3要素を駆使して描画していきます。

<bodys>
  // three.jsを読み込んでいます。
 <script  src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
  <canvas id="CanvasArea"></canvas>
   <script>
    window.addEventListener('DOMContentLoaded', init);
     function init() {
      // レンダーを作成
      const renderer = new THREE.WebGLRenderer({
       canvas: document.querySelector('#CanvasArea')
      });
      // 表示するサイズを決定しています。
      const width = 500;
      const height = 400;
      renderer.setPixelRatio(window.devicePixelRatio);
      // サイズをセット
      renderer.setSize(width, height);
      // シーンを作成
      const scene = new THREE.Scene();
      // カメラを作成　(遠近法が適用されるカメラ)
      const camera = new THREE.PerspectiveCamera(45, width / height,1,2000);
      // カメラの位置をセット
      camera.position.y = 1000;
      camera.position.z = 1000;
      camera.position.x = 1000;
      // 原点を向くようにカメラを設定
      camera.lookAt(new THREE.Vector3(0, 0, 0));
      // 箱を作成
      const geometry = new THREE.BoxGeometry(500, 500, 500);
      const material = new THREE.MeshStandardMaterial({color: 0xF700FF});
      const box = new THREE.Mesh(geometry, material);
      scene.add(box);
      // 平行光源を作成
      const light = new THREE.DirectionalLight(0xFFFFFF);
      light.intensity = 2; // 光の強さを2に設定
      light.position.set(1000, 1200, 1500); //光源の位置を設定
      // シーンに光源を追加
      scene.add(light);
      // 描画
      renderer.render(scene, camera);
    }
  </script>
</bodys>

こんな感じで割と簡単に3Dオブジェクトを置くことができました。

まとめ

今回は「three.js」というjavascriptライブラリーを用いて表現してみました。
まずは立方体を出しただけですが、もう少し勉強してカメラを自由に動かしたり、複雑な動きもできるようです。

また進捗が出た時に更新します。

リンク