JavaScript上で手軽に3Dモデルを扱えるThree.js

Node.js Web JavaScript

前書き

諸事情でThree.jsについて扱っています。
Three.jsを扱えばJavaScriptで3Dモデルを扱えます。
node.js環境の場合、npmでthree.jsを導入できます。

基礎知識

webGLとは

ブラウザ上で3D表示のための標準仕様です。
webGLではGPUによる高速なコンピュータグラフィックスの描画を実現できます。
JavaScriptで扱えるようにするライブラリをThree.jsというイメージ。

ics.media

webGLにレンダリング

HTML上に3D表示を実現するcanvasを描きます。
sizeも設定できます。

const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector("#myCanvas")
});
renderer.setSize(width, height);

SceneとCameraとlight

Sceneはオブジェクトや光源の置き場（空間）。
Cameraは視点で、配置によってwebGLにどの視点がレンダーされるか変わります。
lightはそのまま光源です。

//scene
const scene = new THREE.Scene();

//camera
const camera = new THREE.PerspectiveCamera(画角, アスペクト比, 描画開始距離, 描画終了距離);
camera.position.set(0, 0, +1000);

// light
const directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1);
  scene.add(directionalLight);

オブジェクトの作成

立方体を作成していきます。
参考サイトによるとGeometryとは形状で、Materialとは素材を示します。
GeometryとMaterialの情報をMeshと呼ばれる表示オブジェクトに変換します。
MeshをSceneに配置します。設定によると座標も配置できるみたいです。

  const geometry = new THREE.BoxGeometry(500, 500, 500);
  const material = new THREE.MeshStandardMaterial({
    color: 0x0000ff
  });
  const box = new THREE.Mesh(geometry, material);
scene.add(box);

render

renderer.render(scene, camera);

モデルデータを読み込みたい

melheaven.hatenadiary.jp