このセクションでは、GLTF形式の3Dモデルを読み込んで表示する方法を学びます。
GLTF形式の3Dモデルを無料で入手するには、テクスチャ画像と同じく、 Poly Haven のようなサイトを利用すると便利です。
GLTFモデルは、Poly Haven では Models として配布されています。
ここでは、Poly Haven のDidelta Spinosaを利用してみましょう。
ページ右上のところで、「1K」の解像度を選択し、 その右の形式の選択では「GLTF」を選んでダウンロードします。
ダウンロードしたZipファイルを解答するとフォルダが出てきます。
中にはモデルファイル以外にも、テクスチャ画像などが入っています(モデルによっては入っていない場合もあります)。
これらのファイルは同じ場所になければならないので、 今回は、モデルファイルが入っている「フォルダ」をプログラムのファイルと同じ場所に配置してください。
フォルダ名は「didelta_spinosa」としましょう。
GLTFモデルを読み込むには、load.gltf(モデルファイルのパス) を使います。
load.gltf(GLTFモデルのパス)今の場合、次のようにするとGLTFモデルが表示されます。
const { camera, create, animate, controls } = init()
controls.connect()
camera.position.set(0, 1, 2)
controls.autoRotate = true
create.ambientLight()
create.directionalLight()
load.gltf("./didelta_spinosa/didelta_spinosa_1k.gltf")
animate()
他のオブジェクトを作るときと同じように、 サイズや位置を調整することができます。
これまでに学んだ「背景」「環境マップ」「テクスチャ」などと併用すると、 よりリアルな3Dシーンを作成することができます。
基本的にGLTFなどの3Dモデルは表示が重いため、 シーンに表示するオブジェクト数には注意が必要です。