You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

求助: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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.19 07:35:16