Three.js 3.js平面不';投下阴影
我将一个平面和一个球体叠加在一个更大的平面上,如下图所示 从WebGL inspector可以看出,三个对象似乎都在阴影贴图中绘制,但只有球体有效地出现在阴影贴图中,从而导致较小的平面永远不会在较大的平面上投射阴影 这是现场施工Three.js 3.js平面不';投下阴影,three.js,Three.js,我将一个平面和一个球体叠加在一个更大的平面上,如下图所示 从WebGL inspector可以看出,三个对象似乎都在阴影贴图中绘制,但只有球体有效地出现在阴影贴图中,从而导致较小的平面永远不会在较大的平面上投射阴影 这是现场施工 renderer.shadowMap.enabled = true camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 5000); camera.p
renderer.shadowMap.enabled = true
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 5000);
camera.position.z = 600;
window.controls = new THREE.OrbitControls(camera, renderer.domElement);
light = new THREE.SpotLight(0xffffff, 1, 0, Math.PI / 2);
light.position.set(1, 1000, 1);
light.castShadow = true;
light.shadow = new THREE.LightShadow(new THREE.PerspectiveCamera(50, 1, 1, 5000));
scene.add(light);
var planeGeometry = new THREE.PlaneGeometry( innerWidth * 0.5, innerHeight * 0.5, 10, 10);
var plane = new THREE.Mesh( planeGeometry, new THREE.MeshPhongMaterial({ color: 0xffcccc }));
plane.rotation.x = -Math.PI / 2;
plane.castShadow = true;
plane.receiveShadow = true;
scene.add(plane);
var sphere = new THREE.SphereGeometry(100, 16, 8);
var spheremesh = new THREE.Mesh(sphere, new THREE.MeshPhongMaterial( ));
spheremesh.position.y = 200;
spheremesh.castShadow = true;
spheremesh.receiveShadow = true;
scene.add(spheremesh);
var planeGeometry1 = new THREE.PlaneGeometry( innerWidth, innerHeight, 10, 10);
var plane1 = new THREE.Mesh( planeGeometry1, new THREE.MeshPhongMaterial( ));
plane1.position.y = -250;
plane1.rotation.x = -Math.PI / 2;
plane1.castShadow = true;
plane1.receiveShadow = true;
scene.add(plane1);
默认情况下,three.js在生成阴影贴图时会剔除正面
renderer.shadowMap.renderReverseSided = true; // default is true
这意味着只有背面(从灯光的角度)投射阴影。剔除飞机的正面将不会留下任何阴影
因此,一个选项是用一个薄的具有深度的BoxGeometry
替换您的PlaneGeometry
第二个选项是设置
renderer.shadowMap.renderSingleSided = false; // default is true
在这种情况下,您的平面将投射阴影,但可能存在自阴影瑕疵,因为您同时拥有plane.castShadow=true
和plane.receiveShadow=true
通常,第一个选项是最佳选项
3.js r.86