Three.jsとは何かわかってきたのでメモ

WebGLとは何か

特徴

• 「三角形」を高速に描画することができる。それを組み合わせて立体を作ることができる。

• 結果はcanvasタグに描画される

• 頂点の配置とピクセルの描画方法はシェーダー（shaders）で書かれる → むずい

• ほとんどのモダンブラウザに対応

• CPUではなくGPUを使用する。CPUは高速だが同時計算ができない。GPUは処理は少し遅いが、並行して大量の計算ができる。

• 三角形の頂点を配置したら、GPUはスクリーンの各ピクセルを高速に描画する

• しかしながら、1つの三角形を描画するのに100行以上のコードを書く必要がある。

• そこでThreeJSの出番

Three.js とは何か

特徴

• WebGL上で動作

• MITライセンス

• SVGやCSSとは一緒に使えない

• Native WebGLを直接書くことも必要になることがある。

実装例：

• Scene
• objectsやmodels、lightsなどを入れる箱
• 必要に応じてthreeJSにレンダーさせる

   const scene = new THREE.Scene()

• オブジェクト
• 基本的なジオメトリ
• インポートしたモデル
• particles
• lights
• そのほか…

• カメラ

• レンダラー

「Mesh」とは

• ジオメトリ（形）とマテリアル（素材・見た目）から構成されるもの

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

// ジオメトリ（BoxGeometry）を作る
const geo = new THREE.BoxGeometry(1,1,1)
// マテリアルを作る
const material = new THREE.MeshBasicMaterial({ color: '#f00' })
// メッシュを作る
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

カメラ・レンダラー

• カメラ自体は見えない

• どこからみるかを設定する

• 複数のカメラを切り替えることはできる

• 複数のカメラがある

• PerspectiveCamera → いわゆるカメラ（遠ければ小さく）
• 2つのパラメータが必要
• 視野（the field of view、fov）人間の視野角をイメージ → 度数（degrees）で指定
• アスペクトレシオ … ジオメトリで設定した「1」がどれくらいの縦横比になるかの設定。

const sizes = { width: 800, height: 600 }
const fov = 75;
const camera = new THREE.PerspectiveCamera(fov, sizes);
camera.position.z = 3;
scene.add(camera)

const canvas = document.querySelector('.canvas');

// レンダラーの作成
const renderer = new THREE.WebGLRenderer({
	canvas,
})

renderer.setSize(sizes.width, sizes.height)
renderer.render(scene, camera);

// カメラを後ろにずらしてmeshを見れるようにする
camera.position.z = 3

Math（Vector3）

回転制御

Quaternion

// 既存のquaternionを取得
const quaternion = OBJ.quaternion;

var target = new THREE.Quaternion();
var axis = new THREE.Vector3(X, Y, Z).normalize();
target.setFromAxisAngle(axis, ANGLERAD);

// 既存のquaternionに、新規のquaternionをapply
quaternion.multiply(target);

lookAtメソッド

camera.lookAt(mesh.position)

グループ機能

group = new THREE.Group()

まとめ