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

date
Jun 19, 2022
slug
about-threejs
status
Published
summary
3Dコンテンツの作成で最も人気のJavaScriptライブラリ、Three.jsを本格的に触り始めて1ヶ月ほどになり、どういう立ち位置のライブラリかがわかってきたのでメモ。
type
Post
ステータス
3Dコンテンツの作成で最も人気のJavaScriptライブラリ、「Three.js」
Bruno Simonの講座で学ぶこと1ヶ月。最初の方にやったことの振り返りとしてメモ。

WebGLとは何か

notion image
 
Three.jsはWebGL上で動作している。WebGLはモダンブラウザでcanvasタグ上に高速なグラフィック描画を行うことができるJavaScriptのAPI。

特徴

  • 「三角形」を高速に描画することができる。それを組み合わせて立体を作ることができる。
  • 結果はcanvasタグに描画される
  • 頂点の配置とピクセルの描画方法はシェーダー(shaders)で書かれる → むずい
  • ほとんどのモダンブラウザに対応
  • CPUではなくGPUを使用する。CPUは高速だが同時計算ができない。GPUは処理は少し遅いが、並行して大量の計算ができる。
  • 三角形の頂点を配置したら、GPUはスクリーンの各ピクセルを高速に描画する
  • しかしながら、1つの三角形を描画するのに100行以上のコードを書く必要がある。
  • そこでThreeJSの出番

Three.js とは何か

WebGLをより実用的にラップしたもの。上記のNative WebGLでは描画の詳細なコントロールが可能だが、一般的に行われる3Dオブジェクトの作成やそのコントロールをより簡単に行うことができる。
 

特徴

  • 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)

Three.jsには計算式の型のようなものがいくつか存在している。たとえば代表的なものがx,y,zを指定するVector3
 
例:mesh.position.set(1,1,1) /. mesh.scale.set(1,1,1)
 
mesh.roation.y = 2 // yの線を軸に回転させる
mesh.rotaion.x = Math.PI * 0.25 → 90度。1で一回転
 
mesh.rotation.reorder(’yxz’) → rotationする順番を変更する(その位置から回転してしまうため)
 

回転制御

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()
 

まとめ

THREE.js 楽しい。アニメーション制御をある程度網羅したら、応用編を書きたい。
 

© わくてか 2022