【制作物共有】3D Balls
制作日
2022年3月29日
使用しているプラグインなど
・webpack
・Typescript
・gsap
・three.js
・GLTFLoader
・DRACOLoader
制作について
今回の制作の目的は「3Dモデルを複数読み込みThree.jsで操作すること」です。
前にも複数モデルの読み込みを行いました。
その時は3Dモデルごとにファイルを分けていましたが、今回は1つのファイルに複数の3Dモデルを入れた状態で行います。
前に書いたものはこちら
早速始めます。
今回はBlenderでボールを3種類作成しました。
Blender上でメッシュに名前をつけて置くことが重要です。
Three.jsではこの名前で操作を分けます。
glb形式でエクスポートしてThree.jsで読み込みます。
まずはファイルを読み込みます。
setModels(): void {
// glTF形式の3Dモデルを読み込む
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/draco/');
// glTF形式の3Dモデルを読み込む
const loader = new GLTFLoader();
loader.setDRACOLoader(dracoLoader);
loader.load(this.srcObj, (obj) => {
// シーンに3Dモデルを追加
this.three.scene.add(obj.scene);
// レンダリングを開始する
this.rendering();
});
}
表示できています。
次にバスケットボールだけ消してみます。
setModels(): void {
// glTF形式の3Dモデルを読み込む
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/draco/');
// glTF形式の3Dモデルを読み込む
const loader = new GLTFLoader();
loader.setDRACOLoader(dracoLoader);
loader.load(this.srcObj, (obj) => {
// 追記
this.three.basketballMesh = obj.scene.children.find((child: THREE.Mesh) => child.name === 'basketball');
// 追記 バスケットボールのサイズを調整
this.three.basketballMesh.scale.set(0, 0, 0);
// シーンに3Dモデルを追加
this.three.scene.add(obj.scene);
// レンダリングを開始する
this.rendering();
});
}
これでバスケットボールだけ消せました。
次にサッカーボールの位置を移動します。
setModels(): void {
// glTF形式の3Dモデルを読み込む
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/draco/');
// glTF形式の3Dモデルを読み込む
const loader = new GLTFLoader();
loader.setDRACOLoader(dracoLoader);
loader.load(this.srcObj, (obj) => {
this.three.basketballMesh = obj.scene.children.find((child: THREE.Mesh) => child.name === 'basketball');
// 追記
this.three.soccerballMesh = obj.scene.children.find((child: THREE.Mesh) => child.name === 'soccerball');
//3dメッシュのサイズ
this.three.basketballMesh.scale.set(0, 0, 0);
// 追記 サッカーボールの位置を調整
this.three.soccerballMesh.position.set(-3, 3, 0);
// シーンに3Dモデルを追加
this.three.scene.add(obj.scene);
// レンダリングを開始する
this.rendering();
});
}
サッカーボールの位置をずらせました。
最後にバレーボールの角度を変更します。
setModels(): void {
// glTF形式の3Dモデルを読み込む
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/draco/');
// glTF形式の3Dモデルを読み込む
const loader = new GLTFLoader();
loader.setDRACOLoader(dracoLoader);
loader.load(this.srcObj, (obj) => {
this.three.basketballMesh = obj.scene.children.find((child: THREE.Mesh) => child.name === 'basketball');
this.three.soccerballMesh = obj.scene.children.find((child: THREE.Mesh) => child.name === 'soccerball');
//追記
this.three.volleyballMesh = obj.scene.children.find((child: THREE.Mesh) => child.name === 'volleyball');
//3dメッシュのサイズ
this.three.basketballMesh.scale.set(0, 0, 0);
//3dメッシュの位置
this.three.soccerballMesh.position.set(-3, 3, 0);
// 追記 バレーボールの角度を調整
this.three.volleyballMesh.rotation.set(1, 1, 3);
// シーンに3Dモデルを追加
this.three.scene.add(obj.scene);
// レンダリングを開始する
this.rendering();
});
}
バレーボールの角度が変更できました。
これらを使用してアニメーションをつけることも可能です。
完成したものがこちらになります。
この記事が気に入ったらサポートをしてみませんか?