完成品

今回はピングーに活躍いただきました。
角度をマウス操作で自由に変えられるよ！

STEP1: 3Dモデルを手に入れる

3Dモデルを作りたいところだが、今回は省略。
自作でなくてもOKな人はライセンスフリーなのを適当にSketchfabから拾ってこよう
自作で作りたい！という方は無料3DモデリングソフトのBlenderがおすすめ

Three.jsを使用する

ここから本題

Three.jsとは何か

本来であれば3Dモデルの描画はWebGLで表現する必要がある
でも大丈夫
Three.jsを使えばjsだけで気軽にできる
公式ドキュメント参照

じゃあWebGLとは何か

二次元および三次元の描画をHTMLのcanvasタグにおいて行うことができるAPI
GPUにアクセスしてWeb上で表現できる幅が広がったもの
公式ドキュメント参照

Three.jsのインストール

使い方は3つ

ローカルサーバを立てないとき

公式サイトからダウンロードして必要ファイルを持ってくる
CDNがあるのでそれを使う

ローカルサーバを立てるとき

npm install three　で入れる

ローカルサーバを立てなくてもCORSを許可したらjsがモデルを見に行けるが...あまりおすすめしない

今回は自前の3Dモデルピングーを使うのでローカルサーバを立てる

Three.jsでコーディング

githubに完成したのをあげましたhttps://github.com/pingu-noots/threejs-pingu

必要な要素

大きく分けて以下が必要
・レンダラー
・シーン
・カメラ
・物質(モデル)
それらの構成が上手いことまとまっている図がこちら(画像はICS MEDIAから)

コード解説

https://github.com/pingue-noots/threejs-pingu のコードの中で重要なものを抜粋して紹介
レンダラー、シーン、ライト、カメラを作る

// レンダラー
const renderer = new THREE.WebGLRenderer({
  canvas: canvas, 
  alpha: true, 
  antialias: true, 
});
// シーン
const scene = new THREE.Scene();
// ライト
const pointLight = new THREE.PointLight();
// カメラ
const camera = new THREE.PerspectiveCamera()

モデルを読み込ませる

loader.load(
  // モデルの場所
  url,
  // 3Dモデルをsceneに入れる
  function (gltf) {
    model = gltf.scene;
    model.position.set(0, -0.5, 0);
    scene.add(model);
    //ANIMATION
    mixer = new THREE.AnimationMixer(model);
    gltf.animations.forEach((animation) => {
      actions.push(mixer.clipAction(animation).play());
    });
    tick();
  },
  function (error) {
    console.log("An error happened");
    console.log(error);
  }
);

ピングーをマウス操作できるようにするなどのアニメーションの追加

const tick = () => {
  const delta = clock.getDelta();
  mixer.update(delta);

  // Update Orbital Controls マウス操作の有効化
  controls.update();

  // Render
  renderer.render(scene, camera);

  // Call tick again on the next frame ここが大事！次フレームにアニメーションを渡す
  window.requestAnimationFrame(tick);
};

見てみよう!

githubのコードはwebpackでbundleしてます
npm run devでサーバを立ち上げlocalhost:8080に行くと...
ピングーだ！

好きな３Dモデルに置き換える

今回はピングーでしたがgithubのソースコードの /static/textures/ にお好きな3Dモデルを入れて以下の部分を変えたらお好きなものを表示できます。

const url = "/textures/pingu.glb";