unvollständiger Schatten mit THREE.js

Question

Ich bin ein Anfänger mit Javascript und THREE.js und ich brauche Hilfe.

können Sie unten sehen, was ich erhalten

und dies ist der Code:

// 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);

den Rest meines Code Änderung der x- und y-Wert des Lichts oder der Würfel und der Schatten des Würfels ist nicht immer komplett und ich verstehe nicht warum ... Wie ich bin Anfänger bin ich denke ich habe einen Fehler gemacht in meinem Code.

Answer 1

ja seine Arbeit, wenn ich legte den Position.x = 300, aber es ist nicht mit allen x-Werten arbeitet, und ich verstehe nicht, warum (der Rest meiner Animation den x-Wert ändern)

Shadow Mapping (in der Regel) funktionieren wie folgt aus:

Sie eine neue orthographischer oder Perspektive Kamera erstellen (je nachdem, ob Sie eine gerichtete oder eine Punktlicht verwenden), machen den z-Puffer der Szene auf eine Textur, dann, wenn Wenn Sie Objekte rendern, überprüfen Sie, ob der Punkt im z-Puffer, der dem aktuellen Fragment entspricht, einen höheren z-Wert hat als das aktuelle Fragment und wenn, dann ist es im Schatten. wenn es genau denselben Wert hat (+ - ein Teil wegen der Genauigkeit des Tiefenpuffers), dann ist es im Licht.

Da Sie eine Kamera benötigen, um das Zeug auf dem Bildschirm zu rendern, hat es eine minimale Entfernung, die es etwas wiedergeben kann.

Tl; dr die Clipping-Distanz ist Ihr Fluch diesmal.