制作日

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

バレーボールの角度が変更できました。

これらを使用してアニメーションをつけることも可能です。

完成したものがこちらになります。