three.js - 三个 JS 在 gltf 上投下阴影不起作用
问题描述
我还是新的,为什么模型不投射任何阴影?我启用了环境光和定向光
// 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;
解决方案
不幸的是,您的帖子遗漏了很多细节。通常,您必须执行以下操作才能获得适当的阴影:
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
阴影。您没有在代码片段中执行此操作。它应该看起来像这样:
gltf.scene.traverse( function ( object ) {
if ( object.isMesh ) object.castShadow = true;
} );
推荐阅读
- r - 负数比较错误
- python - 如何通过将日期与该数据框中的日期时间对象进行比较来获取数据框中的索引值?
- scala - 如何将响应正文字段传递给其他请求的正文(加特林)
- outlook-web-addins - 调用 saveAsync 更改 ChangeKey
- java - 正则表达式或字符串操作从字符串派生自动模块名称
- laravel-5 - 新的 Laravel 应用程序页面加载缓慢
- scala - Scala/Spark:如何检查数据框是否包含特定的列列表?
- javascript - 修改没有突变的数组
- node.js - 在 Heroku 应用程序中的 Safari 上阻止 socket.io CORS 请求
- bash - 使用 UNIX less 命令更改正在显示的文件的颜色设置