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

【制作物共有】3D Banana

KaitoTakase

制作日

2021年10月11日


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

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


制作について


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

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

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

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

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);
   }

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


以上となります。

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
KaitoTakase
社会人4年目。BlenderとThree.js、WebGLが好きです。作成した3Dモデルでウェブサイトをよく作っています。