Collada物体上的剥离阴影

Question

Collada物体上的剥离阴影

javascriptthree.jsshadowdirectional-light

5

我有一个场景，包含两个Collada对象和一个定向光源。第一个Collada对象基本上是一个平面，第二个由多个盒子组成。

似乎当场景被渲染时，“侧边”的阴影被很大程度地削弱了，尽管在地面上的阴影渲染得非常好。

以下是阴影截图 .

当我在寻找答案时，我发现这可能是我的Collada文件的问题，因此我添加了一个基本的立方体到场景中（最上面的大立方体），但是它似乎也有同样的问题。

是否有人有提示或已经知道这个问题？

我正在使用最新的three.js修订版本（r71），在Google Chrome和Mozilla Firefox（MacOS）上测试过。我已经尝试调整了`directional light`的几乎所有`shadow*`属性，除了与`shadowCascade`相关的属性（我没有使用）。我还测试了调整与阴影相关的渲染器属性。

这是我的光源设置：

var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
directionalLight.target.position = THREE.Vector3(0, 0, 0);
directionalLight.position.set( 250, 500, 250 );
directionalLight.castShadow = true;
directionalLight.shadowCameraNear = 100;
directionalLight.shadowCameraFar = 1000;
directionalLight.shadowMapWidth = 2048;
directionalLight.shadowMapHeight = 2048;
directionalLight.shadowBias = 0.0001;
directionalLight.shadowDarkness = 0.5;
directionalLight.shadowCameraLeft = -300;
directionalLight.shadowCameraRight = 300;
directionalLight.shadowCameraTop = 300;
directionalLight.shadowCameraBottom = -300;
directionalLight.shadowCameraVisible = true;

我的collada对象有点大，所以我的shadowCamera界限也很大。

我的渲染器设置：

renderer = new THREE.WebGLRenderer( {antialias: true} );
renderer.setClearColor(0x222222);
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );

这是另一种场景的视图，主要展示我的灯光设置。编辑：以下是片段：

var container;
var camera, scene, renderer, controls;
var particleLight;

scene = new THREE.Scene();
init();
animate();

function init() {

  container = document.createElement( 'div' );
  document.body.appendChild( container );
  camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
  camera.position.set( 300, 100, 0 );

// Controls
  controls = new THREE.OrbitControls( camera );

  
  
// Cube
  var geometry = new THREE.BoxGeometry( 100, 100, 100 );
  var material = new THREE.MeshLambertMaterial();
  var cube = new THREE.Mesh( geometry, material );
  cube.position.y = 50;
  cube.rotation.y = 0.8;
  cube.castShadow = true;
  cube.receiveShadow = true;
  scene.add( cube );

// Plane
  var planeGeometry = new THREE.PlaneBufferGeometry( 300, 300, 300 );
  var plane = new THREE.Mesh( planeGeometry, material );
  plane.position.set( 0, 0, 0 );
  plane.rotation.x = -1.6;
  plane.castShadow = true;
  plane.receiveShadow = true;
  scene.add( plane );
  
// Light

  var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
  directionalLight.target.position = THREE.Vector3(0, 0, 0);
  directionalLight.position.set( 250, 500, 250 );
  directionalLight.castShadow = true;
  directionalLight.shadowCameraNear = 100;
  directionalLight.shadowCameraFar = 1000;
  directionalLight.shadowMapWidth = 2048;
  directionalLight.shadowMapHeight = 2048;
  directionalLight.shadowBias = 0.0001;
  directionalLight.shadowDarkness = 0.5;
  directionalLight.shadowCameraLeft = -300;
  directionalLight.shadowCameraRight = 300;
  directionalLight.shadowCameraTop = 300;
  directionalLight.shadowCameraBottom = -300;
  directionalLight.shadowCameraVisible = true;
  scene.add( directionalLight );

  scene.add( new THREE.AmbientLight( 0x555555 ) );
  renderer = new THREE.WebGLRenderer( {antialias: true} );
  renderer.setClearColor(0x222222);
  renderer.shadowMapEnabled = true;
  renderer.shadowMapSoft = true;
  renderer.shadowMapType = THREE.PCFSoftShadowMap;
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  container.appendChild( renderer.domElement );

  window.addEventListener( 'resize', onWindowResize, false );
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize( window.innerWidth, window.innerHeight );
}


function animate() {
  requestAnimationFrame( animate );
  render();
}

var clock = new THREE.Clock();

function render() {
  var timer = Date.now() * 0.0005;
  camera.lookAt(new THREE.Vector3(0, 0, 0));
  renderer.render( scene, camera );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

感谢您的提前帮助。

- Shikatsu Kagaminara

请提供一个 MCVE ，好吗？ - Telokis

提示：请使用THREE.PlaneBufferGeometry(300, 300, 1, 1)代替。 - WestLangley

@WestLangley，这段代码只是“剥离阴影”问题的另一个示例。 - Shikatsu Kagaminara

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- WestLangley · Accepted Answer

您遇到了自阴影问题，因为定向光线恰好与几何体的某些面平行。将定向光移动到稍微不同的位置。例如，

directionalLight.position.set( 250, 500, 200 );

通常情况下，light.shadow.bias 被用来解决自阴影问题，但当光线和面平行时，它将无效，就像你的情况一样。另外，将 shadow.bias 设置为负数有助于减轻其他面上的伪影。

directionalLight.shadow.bias = - 0.01;

很不幸，通常会导致另一个产物：“彼得潘”。

这些折衷方案很常见。你只需要找到一个可接受的妥协。（也许可以根据相机位置设置偏差。）

three.js版本为r.75。