🧊

BlenderからエクスポートしたGLBモデルのライト調節

に公開
Blender
Web
Three.js
3DCG
tech

はじめに

Blenderが作成した3DモデルをThree.jsで使用する際、シーンを思ったように表示できないことが多々あります。

この記事ではライト強度調節と環境光追加について説明します。

環境

Blender3.4

問題の例

エクスポートしたいモデル(サンライトの強さ: 1)

出力したglbファイルをそのままThree.js表示

ライトが強すぎて真っ白になっています

blenderからエクスポート(今回はglb形式)

gltfのエクスポート設定で内容>Punctualライトをチェックon

サンライトの強度調整

GLBファイルに含まれるLightオブジェクトのintensityを適切な明るさになるよう調節します。

BlenderのサンライトはThree.jsのDirectionalLightとなります。

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';

// シーンの作成
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x404040);

// GLBファイルの読み込み
const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.4.1/');
loader.setDRACOLoader(dracoLoader);

const gltf = await loader.loadAsync('/demo/demo_01.glb');

// モデルをシーンに追加（GLBファイルに含まれるライトも含まれる）
const gltfScene = gltf.scene;
scene.add(gltfScene);

// ライト調整
gltfScene.children?.filter(gChild => gChild.type === 'DirectionalLight')
  .forEach(light => {
    if (light instanceof THREE.DirectionalLight) {
      // 初期値を確認（明るさが強すぎる）
      console.log('初期のintensity:', light.intensity); // 初期のintensity:683
      // 明るさの値を調整
      light.intensity = 1.5;
    }
  });

ライト強度調節後

環境光の追加

Blender初期設定ではワールドの環境光があるため、Three.js側のシーンにも必要に応じてAmbientLightを追加します。

// 環境光追加
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

環境光追加後

環境光で全体的に若干明るくなっています

※shadowの設定がないため影がついていません

まとめ

  • Blenderからエクスポートしたシーンはライトの調節が必要です
  • Lightのintensityを調整することで、GLBファイルから読み込んだライトの明るさを最適化できます
  • 環境光（AmbientLight）を追加することで、シーン全体を明るくできます

Discussion