Three.js|Three.jsの導入と基本

ブラウザで3Dグラフィックスを表現する方法について書きます。今回は、Three.jsの導入と基本的な記述の仕方についてご紹介します。

前提知識
下準備
3D空間の表示と基本のコード
Three.js(3D)の基本要素
まとめ
参考サイト

前提知識

JavaScript
ローカル開発環境の構築
- 画像を表示する際は、ローカル開発環境で確認するため。画像を読み込まない場合は必要ないです。

下準備

Three.js公式サイト:https://threejs.org/

Three.jsをダウンロードするかCDNを利用して、HTMLに読み込みます。以下のコードでは、CDNを利用しています。コードは、適宜変更してください。

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Three.jsの練習</title>
</head>
<body>
<div id="stage"><!-- ここに描画結果が表示される --></div>
<!-- Three.jsの読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" integrity="sha512-dLxUelApnYxpLt6K2iomGngnHO83iUvZytA3YjDUCjT0HDOHKXnVYdf3hU4JjM8uEhxf9nD1/ey98U3t2vZ0qQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
(function(){
  'use strict';

  /* ここにコードを書く */


})();
</script>
</body>
</html>

レンダリング結果を表示する場所として、<div id="stage"></div>を予め記述します。こちらのid名も適宜変更して構いません。

3D空間の表示と基本のコード

公式サイトのdocumentationに倣って、基本となるコードを書きます。

(function(){
  'use strict';

  const width = 500;  //表示領域の幅
  const height = 250;  //表示領域の高さ

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

  // Mesh = Geometry + Material
  const geometry = new THREE.BoxGeometry(50, 50, 50);
  const material = new THREE.MeshBasicMaterial( { color: 0x0000ff} );
  const cube = new THREE.Mesh(geometry, material);
  cube.position.set(0, 0, 0);
  scene.add(cube);

  // Camera
  const camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000);
  camera.position.set(200, 100, 300);
  camera.lookAt(scene.position);

  // Light
  const light = new THREE.AmbientLight(0xffffff);
  light.intensity = 2;
  light.position.set(1,1,1);
  scene.add(light);

  // Renderer
  const renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(width, height);
  renderer.setClearColor(0xefefef);
  renderer.setPixelRatio(window.devicePixelRatio);
  document.getElementById('stage').appendChild(renderer.domElement);

  renderer.render(scene, camera);

})();