three.js:阴影中的亮边

时间:2018-07-17 16:06:08

标签: three.js

似乎当物体投射并接收阴影时,您会获得明亮的边缘,看起来像是光在穿透。有什么办法可以克服这个问题?在我给您的代码段中,您可以看到两个立方体上的圆柱体阴影在图中没有问题,但是在背面是您看到线条发生的地方。

enter image description here

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>

0 个答案:

没有答案