THREE.js로 불완전한 그림자

Question

나는 초보자이며 THREE.js와 나는 도움이 필요하다.

당신은 내가

을 얻을 것을 아래에 볼 수 있고이 코드입니다 :

// on initialise le moteur de rendu 
 
    renderer = new THREE.WebGLRenderer(); 
 

 
    renderer.setSize(window.innerWidth, window.innerHeight); 
 
    document.getElementById('container').appendChild(renderer.domElement); 
 
    
 
    // on initialise la scène 
 
    scene = new THREE.Scene(); 
 
    
 
    // on initialise la camera que l’on place ensuite sur la scène 
 
    camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 100000); 
 
    camera.position.set(0, 0, 1000); 
 
    scene.add(camera); 
 
    
 
    // plane 
 
\t me = new THREE.Mesh(new THREE.PlaneGeometry(900,550), new THREE.MeshPhongMaterial({color: 0xffffff})); 
 
\t scene.add(me); 
 
    
 
    me.position.x = 130; 
 
    me.position.y = 10; 
 
    me.rotation.y = -20; 
 
    
 
    // on créé un cube au quel on définie un matériau puis on l’ajoute à la scène 
 
    cube = new THREE.Mesh(new THREE.CubeGeometry(100, 100, 100), new THREE.MeshPhongMaterial({color:0x00ffff})); 
 
    scene.add(cube); 
 
    
 
    cube.position.y = 0; 
 
    cube.position.x = 20; 
 
    cube.position.z = 0; 
 
    cube.rotation.y = 0; 
 
    
 
    scene.add(new THREE.AmbientLight(0x212223)); 
 
     
 
    light = new THREE.SpotLight(0xffffff, 1); 
 
    light.position.set(-300,-100,20); 
 
    light.angle = Math.PI/5; 
 
    light.shadowCameraVisible = true; 
 
    scene.add(light); 
 
    
 
    renderer.shadowMap.enabled = true; 
 
    renderer.shadowMapDarkness = 1; 
 
    
 
    light.castShadow = true; 
 
    light.intensity = 0.8; 
 
    cube.castShadow = true; 
 
    cube.receiveShadow = true; 
 
    me.receiveShadow = true; 
 
    
 
    lightHelper = new THREE.SpotLightHelper(light); 
 
    scene.add(lightHelper); 
 
    
 
    renderer.render(scene, camera);

내 코드 변경의 나머지 x와 빛의 Y 값 또는 입방체의 그림자와 그 큐브의 그림자가 항상 완전하지는 않습니다. 이유를 이해하지 못합니다 ... 나는 초보자입니다. 나는 실수를 한 것 같습니다. 암호.

Answer 1

네의 작업 나는 position.x = 300를 넣어하지만 모든 X 값으로 작동하지 않습니다 그리고 (내 애니메이션의 나머지는 x 값을 수정) 내가 왜

을 이해하지 않는 경우

그림자 매핑 (보통)이 같이 작동 :

이

그런 다음 때, 텍스처에 장면의 z 버퍼를 (당신이 방향이나 점 광원을 사용하는 경우에 따라) 새로운 직교 또는 원근 카메라를 만들 렌더링 객체를 렌더링하면 현재 조각에 비해 z 값이 더 큰 z 버퍼의 점이 있는지 확인합니다 , 만약 그렇다면 그것은 그림자 속에 있습니다. 그것이 정확히 같은 값을 가지고 있다면 (깊이 버퍼의 정밀도 때문에 약간의 양), 그것은 빛에있다.

화면에 물건을 렌더링하려면 카메라가 필요하므로 거리를 최소화하여 렌더링 할 수 있습니다.

Tl; 이번에는 클리핑 거리가 가장 좋습니다.