최신버전 DirectionalLight 에서 그림자가 잘리는 현상

아래 그림과 같이 그림자가 잘리고 있습니다.

 

그림자를 활성화시켰던 방법

 

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

..

camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 1000);

..

mainLight = new THREE.DirectionalLight(0xffffff, 0.5);
mainLight.position.set(50, 50, 50);
mainLight.castShadow = true;
mainLight.shadow.mapSize.width = width * window.devicePixelRatio;
mainLight.shadow.mapSize.height = width * window.devicePixelRatio;
mainLight.shadow.camera.near = 1;
mainLight.shadow.camera.far = 1000;
mainLight.shadow.camera.fov = 100;
scene.add(mainLight);

..

plane.receiveShadow = true;

..

model.castShadow = true;
model.receiveShadow = true;

DirectionalLight를 사용할 때주의해야합니까? SpotLight가 아닌 모든 모델에서 조명이 필요합니다.

 

---

DirectionalLightShadow에 대한 three.js 문서를 참조하십시오 .

DirectionalLightShow는 DirectionalLights그림자를 계산하기 위해 내부적으로 사용됩니다 .

다른 그림자 클래스와 달리 이것은 OrthographicCamera 를 사용하지 않고 PerspectiveCamera 를 사용 하여 그림자를 계산합니다. 이것은 DirectionalLights 가 평행 하기 때문 입니다.

DirectionalLight 을 더 참조하세요.

방향성 조명에서 일반적으로 혼란스러운 것은 회전 설정이 효과가 없다는 것입니다. three.js의 DirectionalLight가 다른 응용 프로그램에서 종종 'Target Direct Light' 라고하는 것과 동일하기 때문입니다.

이는 방향이 조명 위치에서 대상 위치를 가리키는 것으로 계산됨을 의미합니다 (회전 구성 요소 만있는 '자유 직접 라이트'와 반대임).

그 이유는 빛이 그림자를 드리울 수 있기 때문입니다. 그림자 카메라는 그림자를 계산할 위치가 필요합니다 .

이는 그림자의 영향을받는 영역 이 광원 의 position및 camera( DirectionalLight) 에 의해 정의됨을 의미합니다.

카메라를 설정하고 mainLight필요에 맞게 직교 투영을 정의하십시오.

mainLight.shadow.camera = new THREE.OrthographicCamera( -100, 100, 100, -100, 0.5, 1000 );

 

 

소스

...
// 랜더러
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.xr.enabled = true;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
container.appendChild( renderer.domElement );

// 주변광
scene.add( new THREE.HemisphereLight( 0x888877, 0x777788 ) );

// 태양광
var directLight = new THREE.DirectionalLight( 0xffffff );
directLight.position.set( 0, 6, 0 );
directLight.castShadow = true;
directLight.shadow.mapSize.width = 4096;
directLight.shadow.mapSize.height = 4096;
directLight.shadow.camera.near = 0.5;
directLight.shadow.camera.far = 500;
directLight.shadow.camera = new THREE.OrthographicCamera( -100, 100, 100, -100, 0.5, 1000 );
scene.add( directLight );

var cameraHelper = new THREE.CameraHelper( directLight.shadow.camera );
scene.add( cameraHelper );

// cube
var cubeGeometry = new THREE.BoxGeometry(10, 10, 10);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff3333});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;				// 그림자를 보냄
cube.receiveShadow = true;			// 그림자를 받음
cube.position.set( 0, 10, 0);
scene.add(cube);

...

 

 

 

원본 : https://stackoverflow.com/questions/48355479/three-js-directionallight-and-shadow-cut-off