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

私のコードの変更の残りの光のxとyの値またはキューブの影とキューブの影が必ずしも完全ではないと私はなぜ理解していません... 私は初心者のように私は私のミスをしていると思うコード。

Answer 1

はい、その作業私はposition.x = 300を置くが、それはすべてのxの値では動作しませんだと（私のアニメーションの残りの部分は、xの値を変更）なぜ私は

を理解していないとき

シャドウマッピング（通常は）このように動作します：

あなたは（あなたが方向性や点光源を使用する場合に応じて）新しい正投影や視点のカメラを作成して、テクスチャにシーンのzバッファをレンダリングし、その後、ときオブジェクトをレンダリングする場合、現在のフラグメントに対応するzバッファ上のポイントが現在のフラグメントよりもz値が高いかどうかをチェックします、そうであれば、それは影の中にあります。それが正確に同じ値（+ - 深度バッファの精度のためにある量）を持っていれば、それは光の中にあります。

カメラで画面上のものをレンダリングする必要があるため、レンダリングできる距離は最小限です。

Tl;今回のクリッピング距離はあなたのベーンです。