three.js：在一定距离内，整个场景在阴影中变暗

Posted 2021-05-03

在此示例中，您可以使用鼠标滚轮进行放大和缩小。如果你继续缩小并继续使场景变小，它最终会变暗。有没有办法阻止它这样做？我想也许光的范围是问题，但默认设置是永远继续，所以我不知道是什么导致它。

width = window.innerWidth
height = window.innerHeight

renderer = new THREE.WebGLRenderer({antialias: true})
renderer.setClearColor(0xeeeeee)
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(width, height)
document.body.appendChild(renderer.domElement)

scene = new THREE.Scene()
camera = new THREE.PerspectiveCamera(35, width / height, 0.1, 3000)
camera.position.set(-45, 47, 75)
controls = new THREE.OrbitControls(camera)
controls.minDistance = 40
controls.maxDistance = 1300
material = new THREE.MeshPhongMaterial({color: 0xFF0000, specular: 0x111111, shininess: 75})

scene.add(camera, new THREE.AmbientLight(0xffffff, 0.4))
light = new THREE.PointLight(0xffffff, 0.8)

renderer.shadowMap.enabled = true
renderer.shadowMap.type = THREE.PCFShadowMap
light.castShadow = true
light.shadow.mapSize.width = 3072
light.shadow.mapSize.height = 3072
light.shadow.camera.left = 500

function shadow(w) {
  w.castShadow = true
  w.receiveShadow = true
}

camera.add(light)
light.position.y += 60
light.position.x += 70

requestAnimationFrame(function animate(){
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
})

b = new THREE.Mesh(new THREE.BoxGeometry(20, 20, 20), material)
shadow(b)
scene.add(b)

c = new THREE.Mesh(new THREE.CylinderGeometry(5,5,10,32), material)
c.position.set(3,15,3)
shadow(c)
scene.add(c)

d = new THREE.Mesh(new THREE.BoxGeometry(20, 10, 1), material)
d.position.set(3,15,-5)
shadow(d)
scene.add(d)

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

答案

您可以通过增加灯光内部阴影相机的far属性来解决问题。尝试类似的东西：

 light.shadow.camera.far = 3000