求助:THREE.OBJLoader加载物体如何实现投射与接收阴影?
解决MTLLoader/OBJLoader加载物体的阴影投射与接收问题
终于搞定这个阴影不显示的问题了!在使用THREE.SpotLight的场景里,用MTLLoader和OBJLoader加载的物体没法投射或接收阴影,主要是两个核心问题导致的:
问题1:SpotLight阴影相机的near值设置不当
SpotLight的阴影相机有个near参数,如果这个值设得太大,阴影相机的视锥体就会“错过”场景里的物体,根本不会生成阴影。比如你之前可能把near设成了较大的数值,但你的物体离光源很近,完全在阴影相机的近裁剪面之外了。
修复方法:
把spotLight.shadow.camera.near改成一个更小的合理值,比如0.1:
spotLight.shadow.camera.near = 0.1;
要是不确定视锥体范围对不对,可以加个相机助手来调试,能直观看到阴影相机的覆盖区域:
const shadowCamHelper = new THREE.CameraHelper(spotLight.shadow.camera); scene.add(shadowCamHelper);
调试完记得把助手删掉即可。
问题2:加载的模型未启用阴影属性
通过MTLLoader和OBJLoader加载的模型,默认是不会开启阴影投射和接收的,得手动给每个网格设置对应属性:
修复方法:
在模型加载完成的回调里,遍历所有子网格,开启阴影相关属性:
// 假设你已完成MTL加载并关联到OBJLoader objLoader.load('模型路径.obj', function (loadedObj) { loadedObj.traverse(function (child) { if (child.isMesh) { child.castShadow = true; // 允许投射阴影 child.receiveShadow = true; // 允许接收阴影 // 确保材质更新,避免缓存导致设置不生效 child.material.needsUpdate = true; } }); scene.add(loadedObj); });
另外还要确认渲染器已经开启了阴影支持:
renderer.shadowMap.enabled = true; // 可选:使用软阴影让视觉效果更自然 renderer.shadowMap.type = THREE.PCFSoftShadowMap;
这样调整之后,加载的模型应该就能正常投射和接收阴影啦!
内容的提问来源于stack exchange,提问作者Avi
相关产品推荐
相关产品推荐

