Threejs 基本的な描画とアニメ

WebGLを簡単に扱えるJSのライブラリを実装してみました。

まず、Three.jsを読み込みます。

手っ取り早くCDNを利用する場合はこちら

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/three.min.js"></script>

https://threejs.org/こちらからDLしてもよいです。

そして以下のようなJSを記述します。

  window.addEventListener("DOMContentLoaded", init);

function init() {
  const width = 300;
  const height = 250;

  // 描画（レンダー）を作成
  const renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector("#demo_canvas")
  });

  //解像度をデバイスにあわす
  renderer.setPixelRatio(window.devicePixelRatio);
  //サイズをセットする
  renderer.setSize(width, height);

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

  // カメラの種類の指定　これは遠近方を効かすカメラ
  const camera = new THREE.PerspectiveCamera(
    45,
    width / height,
    1,
    10000
  );
  //カメラの位置
  camera.position.set(0, 0, +1000);

  // 形状を決める　これは箱を作っている
  const geometry = new THREE.BoxGeometry(200, 200, 500);
  // 材質を決める　これはスタンダートなやつ
  const material = new THREE.MeshStandardMaterial({
    color: 0x0000ff
  });
  const box = new THREE.Mesh(geometry, material);
  // シーンに追加
  scene.add(box);

  // 光を当てる DirectionalLightは面で降り注ぐ光
  const light = new THREE.DirectionalLight(0xffffff);
  light.intensity = 2; // 光の強さ
  light.position.set(30, 10, 20);

  // シーンに追加
  scene.add(light);

  // 実行
  tick();

  function tick() {
    //アニメーションの設定
    requestAnimationFrame(tick);

    // 箱を回転させる
    box.rotation.x += 0.01;

    // 描画する（レンダリング）
    renderer.render(scene, camera);
  }
}

HTMLはこちら