影three.js R-54に取り組んでいますがthree.js R-84

Question

私はこのシナリオではthree.js

の影に問題があるに取り組んでいない：https://jsfiddle.net/manumid/q5qhjkka/2/は私がに光ポインティングとキューブを持っていますそれ。それはthree.js r-54を使用します。影がうまくいく。

しかし、同じ例では、3つの.js r-84：https://jsfiddle.net/manumid/krpgr0x0/を使用すると、影が表示されません。

コード間の唯一の違いはthree.jsバージョン、光影ヘルパー（これは私の影の問題とは関係ないが）の他に、である：R-54で

：オン spot.shadowCameraVisible = true;

R-84： scene.add (new THREE.CameraHelper(spot.shadow.camera));

ありがとうございます！

Answer 1

小道具の多くは、3のものと30のバージョン間で変更されているように見えます。私はそれがまったく同じように見えることはありませんが、少なくともこれは少なくとも助けてくれればうれしく思います。影と影のマップネームの多くは別の場所にあり、スポットライトには今より多くのコントロールがあります。性質が光をどのように影響するかを見るために良いベビーサークルがここhttps://threejs.org/examples/#webgl_lights_spotlight

https://jsfiddle.net/4to72rkn/

var scene, camera, renderer, cube, cubeM, terrain, spot; 
 

 

 
scene = new THREE.Scene(); 
 

 
camera = new THREE.PerspectiveCamera(50, 400/300, 0.01, 10000); 
 
camera.position.set(600, 0, 5000); 
 
scene.add(camera); 
 

 
renderer = new THREE.WebGLRenderer() 
 
renderer.setClearColor (0xdddddd, 1) 
 
renderer.setSize(400, 300); 
 
renderer.shadowMap.enabled = true; 
 
renderer.shadowMap.type = THREE.PCFSoftShadowMap; 
 

 
container = document.getElementById('canv_0') 
 
container.appendChild(renderer.domElement); 
 

 
cubeM = new THREE.MeshPhongMaterial({ 
 
    color: 0xff0000 
 
}); 
 

 
cube = new THREE.Mesh(
 
new THREE.CubeGeometry(1000, 1000, 1000), cubeM); 
 
cube.position.set(0, 0, 0); 
 
cube.rotation.set(0, 0, 0); 
 
cube.castShadow = true; 
 
scene.add(cube); 
 

 

 
terrain = new THREE.Mesh(
 
new THREE.CubeGeometry(10000, 1000, 10000), new THREE.MeshPhongMaterial({ 
 
    color: 0x00ff00 
 
})); 
 
terrain.receiveShadow = true; 
 
terrain.position.set(0, -2000, 0); 
 
terrain.rotation.set(0, 0, 0); 
 

 
scene.add(terrain); 
 

 
spot = new THREE.SpotLight(0xffffff, 1); 
 
spot.shadow.camera.near = 1000; 
 
spot.shadow.camera.far = 10000; 
 
spot.castShadow = true; 
 
spot.position.set(-1000, 2000, 1500); 
 
spot.distance = 20000; 
 
spot.penumbra = 1; 
 
scene.add(spot); 
 
scene.add (new THREE.CameraHelper(spot.shadow.camera)); 
 

 
(function animate() { 
 
    requestAnimationFrame(animate); 
 

 
    cube.rotation.x += 0.01; 
 
    cube.rotation.y += 0.01; 
 

 
    renderer.render(scene, camera); 
 
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.js"></script> 
 
<div id="canv_0" width="400" height="300"> 
 
</div>