3Dモデル操作の実験

  • 研究中
  • 課題有り
Now Loading...

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向上できそう。

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

  • 3Dモデルデータは支給される想定
  • BlenderでGLB形式に変換
  • 「製品情報を3Dで閲覧する」等のボタンをクリック
  • canvas要素に画面が非同期で展開される
  • ユーザーが操作して閲覧
📔
dat.gui、Stats.js追加

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

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

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

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