【制作物共有】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);
}
完成したものがこちらです。
以上となります。
この記事が気に入ったらサポートをしてみませんか?