Question

我在three.js上有阴影问题

在这种情况下：https://jsfiddle.net/manumid/q5qhjkka/2/我有一个指向它的灯的立方体。它使用three.js r-54。阴影效果很好。

但在同一个例子中，使用three.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

很多道具似乎在这30个版本的三个之间发生了变化。我不是看起来完全一样但希望这至少有帮助吗？很多阴影和阴影地图名称都在不同的地方，聚光灯现在拥有相当多的控件。可以在https://threejs.org/examples/#webgl_lights_spotlight

找到一个很好的围栏，看看属性如何影响光线

https://jsfiddle.net/4to72rkn/

＆＃13;

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

＆＃13;

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

＆＃13;

阴影在three.js r-54上工作，但没有在three.js上工作r-84

1 个答案: