【制作物共有】3D CHANGE BANANA COLOR
制作日
2022年2月26日
使用しているプラグインなど
・webpack
・Typescript
・gsap
・three.js
・GLTFLoader
・DRACOLoader
制作について
今回の制作の目的は「DRACOLoaderを実装すること」です。
3Dモデルを読み込んで表示するにあたって、DRACO圧縮を行うと3Dモデルのファイルサイズを大幅に小さくすることができます。
存在は知っていましたが、DRACO圧縮を行うことによりDRACOLoaderの実装が必要になるため、今まで触れていませんでした。
案件などで行う際には今後必須であると考えたため、今回は勉強して行きます。
今回使用する3Dファイルは以前に作成したバナナを使います。
Three.jsで影やライトを読み込むと重くなるので、Blenderでベイクを行います。
バナナをUV展開し、書き出すテクスチャ画像には「bake-banana.png」と名前をつけます。
ライトはこんな感じで３方向からつけました。
作成したテクスチャはこんな感じ
（ファイルサイズが大きかったのでスクショ）
次にDRACO圧縮を行います。
Node.jsを利用してgltf-pipelineをインストールします。
npm install -g gltf-pipeline作成したバナナの3Dファイルを圧縮します。
gltf-pipeline -i banana.gltf -o banana-d.gltf -dこれでDRACO圧縮の完了です。
あとはthree.jsとGLTFLoader、DRACOLoaderで読み込みます。
詳しいコードはGitにあげていますのでご確認ください。
Git
参考