【Three.js】Three.jsの基本的な操作の一連の流れを解説
2023年11月10日WebGL & Three.js
Three.jsは、WebGLを簡単に使用するための現状最も有名なJavaScriptライブラリです。
Three.jsやWebGLが何？という場合は、
WebGLとThree.jsの違いって何？押さえておきたい基本的なことのみ解説を参考にしてみてください。
また、具体的なコードやサンプルのデモが動く形で知りたい場合は、
【WebGL&Three.js入門】Three.jsの一番シンプルなサンプルコードのチュートリアルの解説でデモもみれる状態にしているので参考にしてみてください。
Three.jsを使う上で、一連の操作の流れがあるので、
具体的なコードからではなく、まずはThree.jsのその一連の操作の流れを把握しましょう。
Three.jsの使い方
物体を作成
Three.jsで物体を作成する場合、マテリアルとジオメトリというものから、メッシュを作成します。
それぞれつぎのような意味があります。
・マテリアル(Material): 色や画像
・ジオメトリ(Geometry): 形(平面や球体)
・メッシュ(Mesh): マテリアルとジオメトリを合わせたもの
物体をシーンに追加
物体を作成したら、その物体をどこかに置かないとみることができません。
その物体を置く場所のことをシーン(Scene)といいます。
シーンは、メッシュ(物体)やライトを配置する場所のことです。
カメラを設置
物体をシーンに追加して、ライトを設定してら、
次はカメラを設置します。
カメラ(camera)は、どの角度から、または位置から3Dを描写するのかを決定します。
物体をどこからみるのか、ということです。
シーンとカメラをレンダラーに追加
物体やライトを含んだシーンと、どこから描写するかを決めるカメラができたら、
その二つをレンダラーに追加します。
レンダラー（renderer）は、canvas要素に3Dグラフィクスを描写するためのAPIのことです。
このレンダラーに登録することで、Three.jsを通してWebGLに、この3D空間をcanvasタグにおきたいです、
という意志を表示することができます。
これで、htmlのcanvasタグ上に描写することができます。