この記事の概要
ある日BlenderからglTFに変換してthree.jsで使おうと思っていた際、光源が上手く読み込めませんでした。
軽く調査してみたので記事にしました。
glTFにはArea Lightに相当するものがない
glTFにて用意されているLight Typeは以下の3つです。1
- Directional
- Point
- Spot
このうち、DirectionalはBlenderでいうSunに該当し、あとの2つは同名のものがあります。
このように、Area Lightに相当するものがないため使えません。
Blenderでデータを作る時点で他のLightを使って制作するしかなさそうです。
ただし、将来的には実装されるかもしれません。
2022年10月31日現在、Proposalは存在しています。2
three.jsで読み込んでみた際の見た目
オマケ程度ですが、何かの役に立てばと思い載せておきます。
自動でDirectional / Point / Spot Lightに変換されるわけでもなく、ただただ反映されないだけです。
オブジェクトとライトを次のように配置し、ライトの種類だけを変えます。
| Directional (Sun) | Point | Spot | Area |
|---|---|---|---|
 |
 |
 |
 |
検証した際のコードは以下です。
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.physicallyCorrectLights = true;
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
const renderArea = document.getElementById("render");
renderArea.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
25,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.set(0, 5, 14);
camera.lookAt(0, 1, 0);
const ambientLight = new THREE.AmbientLight(0x404040, 2);
scene.add(ambientLight);
const loader = new GLTFLoader();
loader.load(
"assets/light.glb",
function (gltf) {
scene.add(gltf.scene);
render();
}
);
function render() {
renderer.render(scene, camera);
}
最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！
Devトークでのお話してくださる方も募集中です！