pixiv/three-vrmでVRMの影を床に出す

https://gyazo.com/671c60881270af434c5c1446c6234449

バージョン情報

code:json

"@pixiv/three-vrm": "^0.6.6",

"three": "^0.132.2"

three.jsで影を落とす方法

レンダラのshadowMapを有効化

ライトにSpotLight等を使用しcastShadowを有効化

shadow.mapsizeを十分に設定

影が落ちるメッシュ（床）のreciveShadowを有効化

code:ts

// レンダラ

renderer.shadowMap.enabled = true;

// スポットライト

const light = new THREE.SpotLight(0xFFFFFF);

light.castShadow = true;

light.shadow.mapSize.width = 2048;

light.shadow.mapSize.height = 2048;

// 影が落ちるメッシュ（床）

meshfloor.receiveShadow = true;

VRMが影を落とすようにする

VRMの全てのメッシュのcastShadowを有効化する

code:ts

vrm.scene.traverse((obj) => {

if ((obj as THREE.Mesh).isMesh) {

obj.castShadow = true;

}

});

参考