【制作物共有】3D Room

制作日

2021年7月13日

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

・webpack
・gsap
・three.js
・GLTFLoader
・three-orbitcontrols
・intersection-observer

制作について

今回の制作の目的は「Blenderで作成したアニメーションをサイト上で動かすこと」です。

Blenderでアニメーションを設定するところから初めての経験でした。

キーフレームからアニメーションを作成しようとしますが、オブジェクトの回転軸が間違っていたり、思うような軌道になってくれなかったりと壁にぶつかりまくりました。

また、いざ完成してglTFにエクスポートしてみるとファイル容量が100MB超えていました。

今まではファイル容量など気にしておらず、ここで初めて意識するようになりました。

ファイル容量を減らすために、各オブジェクトの頂点数を減らして対応しました。

頂点を減らすためには、オブジェクト選択→モディファイアを追加→デシメートから対応可能です。

中には１万を超えるものもあり、それは100MB超えるな... と思いました。

全てのオブジェクトを確認し、再度エクスポートします。今度は10MBでできました。（それでも大きいという印象ですが...）

コーディングではAnimationMixerでアニメーションを再生します。

//一部抜粋
const loader = new GLTFLoader();
this.three.clock = new THREE.Clock();
loader.load(this.srcObj, (obj) => {
　　　　const gltf = obj;
　　　　const data = gltf.scene;
　　　　this.three.animations = gltf.animations;

　　　　　if (this.three.animations && this.three.animations.length) {
　　　　　　　　　//Animation Mixerインスタンスを生成
　　　　　　　　this.three.mixer = new THREE.AnimationMixer(data);

　　　　　　　　//全てのAnimation Clipに対して
　　　　　　　　for (let i = 0; i < this.three.animations.length; i++) {
　　　　　　　　　　　　const animation = this.three.animations[i];
　　　　　　　　　　　　//Animation Actionを生成
　　　　　　　　　　　　const action = this.three.mixer.clipAction(animation);

　　　　　　　　　　　//ループ設定（1回のみ）
　　　　　　　　　　// action.setLoop(THREE.LoopOnce);

　　　　　　　　　//ループ設定（無限）
　　　　　　　　action.setLoop(THREE.Loop);
　　　　　　　　//アニメーションの最後のフレームでアニメーションが終了
　　　　　　　　action.clampWhenFinished = true;
　　　　　　　　//アニメーションを再生
　　　　　　　　action.play();
　　　　　}
}

this.three.scene.add(data);

これで今回の目標達成です。

Blenderのキーフレームやファイル容量、Three.jsのAnimationMixerなど勉強になることばかりの良い経験でした。