三个 JS 在 gltf 上投下阴影不起作用答案

【问题标题】：THREE JS cast shadow on gltf doesn't work三个 JS 在 gltf 上投下阴影不起作用
【发布时间】：2021-04-05 17:45:34
【问题描述】：

我还是新的，为什么模型没有投射任何阴影？我启用了环境光和定向光

// import model
const loader = new THREE.GLTFLoader();
loader.load( 'object/GalaxyS10.gltf', function ( gltf ) {
    scene.add( gltf.scene );
        
    }, undefined, function ( error ) {
        console.error( error );
    } 
);
loader.castShadow = true;

【问题讨论】：

标签： three.js

【解决方案1】：

很遗憾，您的帖子遗漏了很多细节。通常，您必须执行以下操作才能获得适当的阴影：

GLTFLoader.castShadow 不存在。设置它没有效果。
您必须将renderer.shadowMap.enabled = true; 添加到您的代码中才能全局启用阴影。
您必须在阴影投射灯上启用阴影。由于您使用的是定向光，因此典型代码如下所示。请注意，阴影截头体的配置取决于场景的比例。您可以通过CameraHelper 直观地调试截锥体。

const light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 10, - 10 );
light.castShadow = true;
light.shadow.camera.top = 2;
light.shadow.camera.bottom = - 2;
light.shadow.camera.left = - 2;
light.shadow.camera.right = 2;
light.shadow.camera.near = 0.1;
light.shadow.camera.far = 10;
scene.add( light );

// scene.add( new THREE.CameraHelper( light.shadow.camera ) );

您需要某种能够接收阴影的地面或其他物体。对于这些 3D 对象，您必须将 receiveShadow 设置为 true。
您必须通过将相应的属性设置为true 来定义应该投射阴影的对象。您没有在代码 sn-p 中执行此操作。它应该是这样的：

gltf.scene.traverse( function ( object ) {

    if ( object.isMesh ) object.castShadow = true;

} );

【讨论】：