【JavaScript】Three.jsでかわいい飛行機と飛行機雲を作ってみた

最近はゲームや、VR、ARなどの業界で当たり前のように 現実と見紛うような3DCGがぼんぼん出てきていますね！
AIで現実そっくりのCGを高速で生成する時代も近いかもしれません! 最近は技術進歩の早さに驚くと同時に、焦りを覚える日々でございます..。

しかし、案ずる何も動じることはありません！

現実と相違ないようなCGも良いですが、できる限り3Dの情報量を削り出したLowPolyもまた味のある整った表現の一つです。

マウス座標で揺れ動くキュートな3Dモデル

---

Blenderで可愛い飛行機のモデルを作る。

---

Blenderでローポリの飛行機をモデリングします。

今回は、超点数多めで作りましたが、角がカクカクしている、ザ ローポリ！という感じでも、映えます。

---

機械の3Dモデルも生き物に寄せると映える

---

ローポリで何か作る時のコツは、何らかの生物に寄せてモデリングすることだと思います！

そうすることで、視聴者が潜在的に興味を引く形にすることができます。

今回は、サメの体に近づけてモデリングしてみました。("Shark Lowpoly")で検索してもらうとエッジが出てきます＾＾

さて、上のボテボテした可愛い飛行機を動かしてみました！

                        
      // 飛行機を出力
  
      class Rocket {
        constructor() {
          this.mesh = new THREE.Object3D();
          let mtlLoader = new THREE.MTLLoader();
          mtlLoader.setPath("./Model/");
          mtlLoader.load('plane.mtl', function (materials) {
            materials.preload();
            let objLoader = new THREE.OBJLoader();
            objLoader.setMaterials(materials);
            objLoader.setPath("./Model/");
            objLoader.load('plane.obj', function (object) {
      
              object.scale.set(20, 20, 20);
              RocketMesh = object;
              blade = RocketMesh.children[1];
              scene.add(RocketMesh);
              RocketMesh.rotation.x = Math.PI / 1;
              RocketMesh.rotation.y = Math.PI / 1;
              RocketMesh.rotation.z = Math.PI / 2;
            });
          });
        }
      }
                        

                        
                      

最近知ったのですが、OBJ、MTLローダーを使用してモデルをロードすると、 3Dモデルの子要素を取り出せるようになっており、 そこから、個別にアニメーションなどを適用できるようになっていました。

ただし、原点の位置が、3Dカーソルの位置に全て合わされるので、そこは注意が必要です。

Youtubeに制作過程をあげています

---

こちらは、上昇するロケットのアニメーションですが、煙のロジックなども掲載しているのでぜひ見ていってください!

---

あとがき

ローポリはやっぱりいい！
下のコメント投稿欄で感想を共有していただけるととても嬉しいです！！

---

ご拝読ありがとうございます。お気軽にお問い合わせください。

---

お問い合わせフォームへ