Three.jsを学習する【第一回】

前回のブラウザで AR を使ってみたを触って、オブジェクトをThree.jsで作りたいと思いました。

Three.jsを学習するにあたって、良さげなサイトがあったので、こちらを参考に学習していこうと思います。忘備録です。

function をアロー関数に変える

なんでアロー関数にしたいのかは、関数宣言 vs 関数式 | ES2015+を参照。

1
2
3
4
5

window.addEventListener('load', init);

function init() {
  // 処理
}

から

1
2
3
4

const init = () => {
  // 処理
};
window.addEventListener('load', init);

に変える。

Three.js でオブジェクトを表示させるには

1. レンダラーを作成する
2. シーンを作成する

意味

レンダラー

描画するシステムのこと
レンダリングエンジン

シーン

3D 空間のこと。オブジェクトの置き場になる。

カメラ

どの位置から撮影するかを決めるシステムのこと。

メッシュ

表示オブジェクトのこと。
メッシュを作成するには、ジオメトリとマテリアルが必要。

ジオメトリ

形状のこと

マテリアル

色、質感などの情報のこと