three.js r75 pointLight 阴影在错误的地方
three.js r75 pointLight shadows in wrong places
我有一个 jsfiddle 包含一个固定的太阳和月亮以及一个围绕太阳运行的移动行星地球。
这是两个光源(环境光和点)和示例对象的代码。
var light2 = new THREE.AmbientLight(0x444444);//... for lighting the Sun and other MeshBasicMaterial meshes.
scene.add(light2);
//... PointLight
// http://threejs.org/docs/#Reference/Lights/PointLight
var light3 = new THREE.PointLight( 0xffffff, 10, 150000,1);
light3.castShadow = true;
light3.shadow.camera.near = 1;
light3.shadow.camera.far = 5000;
light3.shadow.camera.fov = 90;
// light3.shadowCameraVisible = true;
light3.shadow.bias = 0.001;
scene.add( light3 );
// SPHERES
var sphereGeom = new THREE.SphereGeometry( 40, 32, 16 );
var SunMaterial = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
this.Sun01 = new THREE.Mesh( sphereGeom.clone(), SunMaterial );
Sun01.position.set(-500, 0, 220);
scene.add( Sun01 );
//Sun01.castShadow = false;
//Sun01.receiveShadow = false;
light3.position.set( Sun01.position.x, Sun01.position.y , Sun01.position.z);
var moonMaterial = new THREE.MeshPhongMaterial( { color: 0xaa00aa } );
var Moon02 = new THREE.Mesh( sphereGeom.clone(), moonMaterial );
Moon02.scale.set( 0.5,0.5,0.5 );
Moon02.position.set(-200, 0, 220);
scene.add( Moon02 );
Moon02.castShadow = true;
Moon02.receiveShadow = false;
有两个问题。
首先,遥远的固定卫星即使在范围内也不会被 PointLight 照亮。
其次,即使地球比那些固定的卫星离太阳更近,来自遥远卫星的阴影也会出现在(绕太阳运行的)地球上。
请注意,内部固定月亮(名为 Moon02,洋红色)确实被 PointLight 照亮并且它确实在地球上投下了阴影。
这里是渲染器设置代码:-
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0x000022 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
//... Enable Shadows
renderer.shadowMap.enabled = true;//.shadowMapEnabled = true;
//renderer.shadowMap.type = THREE.BasicShadowMap;//
//renderer.shadowMap.type = THREE.PCFShadowMap
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
我的问题 = 需要做什么来 (a) 照亮外层卫星和 (b) 确保外层卫星的阴影不会出现在(靠近太阳的内层)行星地球上。
简而言之,您将事情间隔得太远了。
从点光源计算阴影非常昂贵。事实上,THREE.js只是为它添加了功能a few months ago。我在文档中找不到任何可靠的东西,但似乎有一个硬编码限制从点光源计算阴影的距离。
解决方法很简单:减少对象之间的 space。当十几个就足够时,绝对没有理由让对象彼此相距数千个单位。我解决了你的两个问题 just by reducing all distances and scales by a factor of 10. 我还调整了 PointLight 的强度,因为 10 太刺眼了哈哈。
// color, intensity, falloff radius, falloff amount
// if falloff radius is 0 then there is no falloff
var light3 = new THREE.PointLight( 0xffffff, 1, 0, 0);
我有一个 jsfiddle 包含一个固定的太阳和月亮以及一个围绕太阳运行的移动行星地球。
这是两个光源(环境光和点)和示例对象的代码。
var light2 = new THREE.AmbientLight(0x444444);//... for lighting the Sun and other MeshBasicMaterial meshes.
scene.add(light2);
//... PointLight
// http://threejs.org/docs/#Reference/Lights/PointLight
var light3 = new THREE.PointLight( 0xffffff, 10, 150000,1);
light3.castShadow = true;
light3.shadow.camera.near = 1;
light3.shadow.camera.far = 5000;
light3.shadow.camera.fov = 90;
// light3.shadowCameraVisible = true;
light3.shadow.bias = 0.001;
scene.add( light3 );
// SPHERES
var sphereGeom = new THREE.SphereGeometry( 40, 32, 16 );
var SunMaterial = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
this.Sun01 = new THREE.Mesh( sphereGeom.clone(), SunMaterial );
Sun01.position.set(-500, 0, 220);
scene.add( Sun01 );
//Sun01.castShadow = false;
//Sun01.receiveShadow = false;
light3.position.set( Sun01.position.x, Sun01.position.y , Sun01.position.z);
var moonMaterial = new THREE.MeshPhongMaterial( { color: 0xaa00aa } );
var Moon02 = new THREE.Mesh( sphereGeom.clone(), moonMaterial );
Moon02.scale.set( 0.5,0.5,0.5 );
Moon02.position.set(-200, 0, 220);
scene.add( Moon02 );
Moon02.castShadow = true;
Moon02.receiveShadow = false;
有两个问题。
首先,遥远的固定卫星即使在范围内也不会被 PointLight 照亮。
其次,即使地球比那些固定的卫星离太阳更近,来自遥远卫星的阴影也会出现在(绕太阳运行的)地球上。
请注意,内部固定月亮(名为 Moon02,洋红色)确实被 PointLight 照亮并且它确实在地球上投下了阴影。
这里是渲染器设置代码:-
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0x000022 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
//... Enable Shadows
renderer.shadowMap.enabled = true;//.shadowMapEnabled = true;
//renderer.shadowMap.type = THREE.BasicShadowMap;//
//renderer.shadowMap.type = THREE.PCFShadowMap
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
我的问题 = 需要做什么来 (a) 照亮外层卫星和 (b) 确保外层卫星的阴影不会出现在(靠近太阳的内层)行星地球上。
简而言之,您将事情间隔得太远了。
从点光源计算阴影非常昂贵。事实上,THREE.js只是为它添加了功能a few months ago。我在文档中找不到任何可靠的东西,但似乎有一个硬编码限制从点光源计算阴影的距离。
解决方法很简单:减少对象之间的 space。当十几个就足够时,绝对没有理由让对象彼此相距数千个单位。我解决了你的两个问题 just by reducing all distances and scales by a factor of 10. 我还调整了 PointLight 的强度,因为 10 太刺眼了哈哈。
// color, intensity, falloff radius, falloff amount
// if falloff radius is 0 then there is no falloff
var light3 = new THREE.PointLight( 0xffffff, 1, 0, 0);