【制作物共有】3D Banana

制作日

2021年10月11日

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

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

制作について

今回の制作の目的は「Three.jsのClone()を使うこと」です。

Cloneを使うことで簡単に3Dモデルを複製することができるのでやってみたかった実装になります。

まずはBlenderでバナナを作成します。

UV Editingでテクスチャを貼るとこんなにリアルになります。
（少し先端がヘタですが目を瞑りました。）

Three.jsで読み込みます。

Pushボタンを押すと増えるような実装をします。

// 一部抜粋
    increaseObj() {
       // GLTFのクローンを作成
       this.three.cloneObj = this.data.clone();
       // クローンの位置をランダムで設定
       this.three.cloneObj.position.set(this.randomNum.x.toFixed(2), this.randomNum.y.toFixed(2), this.randomNum.z.toFixed(2));
       this.three.cloneObj.rotation.set(0, this.randomNum.y.toFixed(2), this.randomNum.z.toFixed(2));

       // クローンをシーンに追加
       this.three.scene.add(this.three.cloneObj);
   }

​完成したものがこちらです。

3D Demo Clone Object

以上となります。