Three.js¶
- 目次
- Three.js
Three.jsとは¶
JavaScriptでWebページ上に3Dコンテンツを簡単に描画できることを目的とした3Dグラフィックスライブラリです。
現バージョンでは、WebGLを基盤に使用しています。WebGLは低レベルの3D描画ライブラリで、その上にThree.jsが、シーン、光源、陰影、テクスチャ、3D計算などの要素を実装しています。
公式サイト¶
ドキュメント、サンプル、コミュニティサイト、コード(リポジトリ、ダウンロード)、リソースなどが記載されています。
Three.jsの構成¶
- Renderer
SceneとCameraをRendererに渡すと、Webページのcanvas上の2Dイメージに擬似3次元を描画します。 - Scenegraph
Sceneオブジェクトのツリー構造で、描画すべき3D空間の要素を定義します。Sceneオブジェクトは、Mesh, Light, Group, Object3Dなどがあります。 - Camera
Mesh¶
GeometryとMaterialを持つ描画される物を定義します。
Geometry¶
頂点データの定義を表現します。球、立方体、犬、人物、などなど各種3D物体の形状を表現します。
Material¶
表面(Surface)の属性を定義します。Geometryを描画する時に使われます。色、輝度、テクスチャなどを表現します。
Texture¶
Light¶
初めての Three.js プログラミング¶
3Dグラフィックスにおける最初のプログラムとして、立方体を表示する Hello Cube を作成してみます。
公式サイトのマニュアル(Getting Started)から最初のプログラムを作成します。
https://threejs.org/docs/#manual/en/introduction/Creating-a-scene
Hello Cube¶
ファイル構造¶
HTMLファイル hello.html を用意し、そこに Three.jsライブラリを使用する JavaScript コードを記述します。
HTML構造の記述¶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Cube</title>
<style>
body { margin:0; }
</style>
</head>
<body>
<script type="module">
import * as THREE from 'https://unpkg.com/three/build/three.module.js';
// ここに Three.jsプログラムを記載
</script>
</body>
</html>
ここでは、単一のHTMLファイルをローカルのWebブラウザで開いて実行するので、JavaScriptのThree.jsライブラリは既存のネットワーク(CDN)から取得しています。
importを使うため、script要素のtype属性にmoduleを定義しています。
Scene と Camera と Renderer¶
<script type="module">
import * as THREE from 'https://unpkg.com/three/build/three.module.js';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
</script>
- scenegraphを保持するSceneオブジェクトを生成
- Cameraの1つ、PerspectiveCamera(遠近法による写像をする3Dで一般的なカメラ)を生成
- 第1引数にはFOV(Field Of View:視野角)を指定(単位は度)
- 第2引数にはアスペクト比(縦横比)を指定
- 第3、第4引数には、レンダリング対象とするオブジェクトの距離範囲をnear, farの順で指定。nearより近いオブジェクトとfarより遠いオブジェクトはレンダリングされません
- レンダラーにWebGLを使うレンダラーを生成し、レンダラーが描画する領域の大きさを設定
- WebブラウザのDOMにレンダラーが描画するcanvasを追加
Cubeの定義¶
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
続いて、上述のコードを追記します。
3Dオブジェクトは、頂点データを定義するgeometryと表面の属性を定義するmaterialを組み合わせたMeshとして定義します。
- 直方体のgeometryであるBoxGeometryを生成、幅、高さ、奥行きを指定すると直方体の頂点と面を定義
- 表面の描画に使用されるmaterialとして、MeshBasicMaterialを生成、ここでは色だけを指定
- geometryとmaterialをあわせ持つMeshを定義
- Meshをsceneに追加
- カメラの位置(Z軸)を5に設定
ただし、まだここまでのコードではWebブラウザ上に何も表示されません。
animationFrame¶
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
Webブラウザに表示するために、アニメーションループを定義します。画面が更新されるたびにrendererがシーンを描画する処理を実行します。
アニメーションループを定義すると、描画されるようになります。
次に、画面が更新されるたびにcubeを回転させるコードを追加します。
function animate() {
requestAnimationFrame(animate);
+ cube.rotation.x += 0.01;
+ cube.rotation.y += 0.01;
renderer.render(scene, camera);
}