🐾

作成した3Dモデルの中にthree.jsで影をつける方法

2021/10/11に公開

Blender

blenderで作成した3DモデルをGLTF形式で書き出し、3Dモデルの中にthree.jsで影をつけます。

影がついていないver

https://kaito-takase.dev/3d-animation/

3Dモデルを読み込んでるのでもちろん立体感はありますが、影がないのでのっぺりした感じに見えます。

影がついているver

影がついているのでより立体感を感じます。

影をつける方法

影をつけるのに必要な部分だけ記述します。
Scene等の設定は省きます

function initRenderer(){
    renderer = new THREE.WebGLRenderer({
        antialias: true, // 表面を滑らかにする
	alpha: true,
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.physicallyCorrectLights = true;
    // レンダラー：シャドウを有効にする
    renderer.shadowMap.enabled = true;
    renderer.outputEncoding = THREE.GammaEncoding;
    canvas.appendChild(renderer.domElement);
}
function setLight(){
    const positionArr = [
        [1, 5, 3.5, 6],
	[0, 1, 2, 4],
	[0, 2, 0, 2],
    ];
    
    for (let i = 0; i < positionArr.length; i++) {
    // 環境光源を作成
    const directionalLight = new THREE.DirectionalLight(0xffffff, positionArr[i][3]);
    directionalLight.position.set(positionArr[i][0], positionArr[i][1], positionArr[i][2]);
    
    if (i == 0 || i == 2 || i == 3) {
        // ライトに影を有効にする
        directionalLight.castShadow = true;
	// 影の解像度を設定
        directionalLight.shadow.mapSize.set(4096, 4096);
    }
    
    scene.add(directionalLight);
    }
}
function setLoading(){
    const loader = new GLTFLoader();
　　　　　　　　    :
        :
    data.traverse((model) => {
        model.castShadow = true;
        model.receiveShadow = true;
    });
        :
        :
}

説明

必須の部分の説明です。

// レンダラー：シャドウを有効にする
renderer.shadowMap.enabled = true;

レンダラーのshadowMapプロパティーを有効にします。

// ライトに影を有効にする
directionalLight.castShadow = true;
// 影の解像度を設定
directionalLight.shadow.mapSize.set(4096, 4096);

ライトに影を落とす設定し、
影の解像度はデフォルトだと低く設定されていて影が荒く見えることがあるのでshadow.mapSizeで設定しておきます。

data.traverse((model) => {
　　　　model.castShadow = true;
  model.receiveShadow = true;
});

GLTFLoaderで3Dモデルを読み込んでいる設定の部分で
影を落とす設定（castShadow）と影を受ける設定（receiveShadow）を読み込んだ3Dモデルに実装します。

これで3Dモデル内に影が落ちるようになります。

three.jsで読み込んだMesh等に影を落とす方法は多く見つけられましたが、
3Dモデル内に影を落とす方法はなかなか見つからなかったので備忘録として残しました。

おまけ

BlenderでライトをつけたままGLTF形式でエクスポートする

「Punctualライト」にチェックを入れてエクスポートするとライトもつけられます。