5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

この記事の概要

Blenderで作ったシーンをglTFに書き出してthree.jsから呼び出した際、そのままではカメラが適用されません。
別途three.js内でカメラを作成しても良いですが、目視で合わせるのも大変なため、Blenderで定義したカメラをそのまま使う方法を記事にしました。

Blenderからの書き出し設定

まずはじめに、書き出し時の設定が必要です。

File > Export > glTF 2.0 (.glb/.gltf)を選択します。
このとき開いたウィンドウの右側にあるIncludeを開きます。

すると色々な項目が出現します。
今回はカメラのデータを含めたいのでData > Camerasにチェックを入れます。

これで設定は完了です。
あとはウィンドウ右下のExport glTF 2.0を押して保存します。

three.jsでの読み込み

先に完成形のイメージをお見せします。

import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; // 1

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);

const renderArea = document.getElementById("render");
renderArea.appendChild(renderer.domElement);

const scene = new THREE.Scene();

let camera; // 2
const loader = new GLTFLoader();
loader.load("path/to/file.glb", (gltf) => {
  scene.add(gltf.scene);
  camera = gltf.cameras[0]; // 3
  animate();
});

const animate = () => {
  // code for some kind of animation
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
};

上記のコードの説明です。

  1. まずはGLTFLoaderをimport
  2. 空のcameraを作成
  3. gltf.cameras[0](Blender内で作成したカメラのうち、1つ目)を、既に定義したcameraに代入
    1. もちろん複数のカメラがあればcameras[1]cameras[2]で取得可能

three.jsを使うのであれば、ロードしたモデルをアニメーションさせる場合がほとんどだと思います。
その際にloader.loadの内側だけでcameraを定義してしまっては、アニメーション用の関数にcameraが渡せなくなってしまいます。
そのため、グローバルにカメラを用意し、後で書き換えるように実装しました。

最後に

改めて整理すると非常に簡単な内容なのですが、リアルタイムでは結構困惑しました。
自分用の備忘録含めて、誰かのお役に立てれば幸いです。


最後まで読んでくださってありがとうございます!
Twitterでも情報を発信しているので、良かったらフォローお願いします!

Devトークでのお話してくださる方も募集中です!

5
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?