ThreeJS 修改阴影范围物体高光缺失填坑记

解决Three.js中高光消失问题

最新推荐文章于 2025-01-02 14:43:21 发布

原创最新推荐文章于 2025-01-02 14:43:21 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5

本文探讨了在Three.js中使用方向光源并设置阴影属性导致物体高光消失的问题。通过调整light对象的shadow属性，如mapSize、camera边界及bias值，成功解决了阴影效果覆盖高光显示的难题。


            let light=new THREE.DirectionalLight(0xFFF2B2,1);
            scene.add(light);
            light.position.set(-100,100,100);

            light.castShadow=true;
            //Set up shadow properties for the light
            light.shadow.mapSize.width = 1024;  // default
            light.shadow.mapSize.height = 1024; // default
            light.shadow.camera.left=-16;
            light.shadow.camera.right=16;
            light.shadow.camera.top=-16;
            light.shadow.camera.bottom=16;
            light.shadow.camera.near = 0.5;    // default
            light.shadow.camera.far = 1000;     // default  
            light.shadow.bias=0.0001;

添加了红框的代码后高光就没有了，原因是物体添加了接受阴影。去掉receiveShadow就好了。