【制作物共有】3D Room
見出し画像

【制作物共有】3D Room

制作日

2021年7月13日


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

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


制作について


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

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

スクリーンショット 2021-10-26 9.20.04

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

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

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

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

スクリーンショット 2021-10-26 9.52.17

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

中には1万を超えるものもあり、それは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など勉強になることばかりの良い経験でした。


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
社会人3年目。Webプログラマー目指して勉強中。