неполная тень с THREE.js

Question

Я начинаю с javascript и 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);

остальная часть моего изменения коды х и у значения света или куба, и тень куба не всегда завершена, и я не понимаю, почему ... Как я начинаю, я думаю, что у меня есть ошибка в моей код.

Answer 1

да свою работу, когда я поставил position.x = 300, но это не работает со всеми значениями х, и я не понимаю, почему (остальная часть моей анимации изменить значение х)

отображения Shadow (обычно) работает так:

вы создаете новую орфографическую или перспективную камеру (в зависимости от того, если вы используете направленный или точечный свет), делают Z-буфер сцены на текстуру, а затем, когда вы визуализируете объекты, вы проверяете, имеет ли точка в z-буфере, которая соответствует текущему фрагменту, более высокое значение z, чем текущий фрагмент , и если да, то это в тени. если он имеет то же самое значение (+ - некоторое количество из-за точности буфера глубины), то он находится на свету.

Потому что вам нужна камера для рендеринга на экране, она имеет минимальное расстояние, что может что-то визуализировать.

Tl; dr отсечение расстояние ваше проклятие на этот раз.