制作日

2022年4月22日

使用しているプラグインなど

・webpack
・Typescript
・React
・gsap
・three.js
・GLTFLoader
・DRACOLoader

制作について

今回の制作の目的は「ユーザーが操作できる部分を増やし、サイトとして実装すること」です。

3Dに関連してユーザーが操作できる部分として簡単に思いつくものは
・3Dモデルの色（マテリアル）
・3Dモデルの位置
・3Dモデルの角度
・3Dモデルのサイズ
でした。

上記の4 つを全て自由に操作できるようにしてしまうと、見やすいサイトとはなりにくそうなので、引き算しつつ実装します。

今回はBlenderでメガネのフレームを作成しました。

ミラーモディファイアを使って片面の作成で左右対称のものにしていきます。
平面でフレームの形を作成し、

ソリッド化で厚みをつけます。

耳にかける部分（テンプル）を作成し、

テンプルの角度を修正します。

鼻パッドの部分も作成し、最後にサブディビジョンサーフェスで表面を滑らかにして完成です。

同じ要領で何種類か作成しました。

ラウンド型

スクエア型

フォックス型

ティアドロップ型

完成したファイルをDRACO圧縮して読み込みます。

gltf-pipeline -i glasses.glb -o glasses-d.glb -d

dat.guiでマテリアルの色を変更できるようにします。

       const gui = new dat.GUI();
       const folder = gui.addFolder('MATERIAL');
       let params = {
           color: 0xff00ff,
       };
       three.material = new THREE.MeshLambertMaterial({ color: params.color });
       folder.addColor(params, 'color').onChange(() => {
           three.ovalMesh.material.color.set(params.color);
       });
       folder.open();

各フレームごとに読み込みます。

  loader.load(srcObj, (obj) => {
       three.ovalMesh = obj.scene.children.find((child: THREE.Mesh) => child.name === 'oval');
       three.bostonMesh = obj.scene.children.find((child: THREE.Mesh) => child.name === 'boston');
       three.teardropMesh = obj.scene.children.find((child: THREE.Mesh) => child.name === 'teardrop');
       three.squareMesh = obj.scene.children.find((child: THREE.Mesh) => child.name === 'square');
       three.roundMesh = obj.scene.children.find((child: THREE.Mesh) => child.name === 'round');
       three.foxMesh = obj.scene.children.find((child: THREE.Mesh) => child.name === 'fox');
  });

レイキャスターを使って交差を検知します。
クリックしたボタンに応じて、リンクした3Dオブジェクトが拡大するようアニメーションを設定します。

リセットボタンで初期画面に戻します。

これで完成とします。

今回拡大縮小の動きはボタン（クリック）操作で実装しました。OrbitControlsで自由にし過ぎてしまうと、少し操作しづらさを感じました。
今回のように、複数の3Dモデルを表示したい時などはこのような実装の方がユーザのためになるかもと勉強になりました。

作成したサイト

Git