Create Next App

3DモデルをWeb上で閲覧したり、回転して操作できるように展開してみた。

Adobe Stock等でもダウンロードできる.obj形式の3Dモデルを、Blenderで.glb形式に変換して、three.jsを使ってcanvas上に展開。

GLBはファイルサイズも小さく、オブジェクトの形の情報だけでなく、テクスチャやマテリアル情報も含めることができるので、Web上の配信に適しているよう。

const loader = new GLTFLoader()
loader.load('/lab/webgl/webgl-3dmodel-try-wssyr74yrp/moon.glb', (model) => {
  Init(model)
})

こんな具合に、GLTFLoaderでインスタンス化したローダーを使って、.glb形式のモデルを読み込んで...

function init(model) {
  ...
  scene.add(
    model.scene,
  )
  // modelにGLTFLoaderでインストールしたモデル情報が含まれている
  ...
}

こんな具合に手軽にシーンに追加できる。

🛠️

3Dモデル操作をモジュール化したい

three.jsの3Dモデル展開をWeb上で現実的に活用されるとしたら、Web上でも製品情報を360度閲覧できる機能だと思う。

ユーザーがドラッグ等のアクションをすれば、見たい角度で見たい場所を閲覧できれば、WebアプリやWebサイトのUI・UX向上できそう。

下記のようなワークフローで展開できれば良きかな。

📔

dat.gui、Stats.js追加

少なくともdat.guiでスポットライトの操作をできるようにする。

🤔

記述をとにかく簡単にしたい

OrbitControlsとか、よく使うカメラワークとかをいちいち書いているとソースが冗長になるから、lab/webgl共通のlib/ディレクトリとか作って、再利用しやすいようにしたいな。

何か調べたり試したりするために、余計な時間は使いたくない...！

3Dモデル操作の実験