Question

我有一个非常简单的例子：聚光灯指向一个平面。我期待看到一个光锥，其直径取决于聚光灯角度的设置。我看不到任何锥形，整个平面都被照亮，即使是非常狭窄的角度设置。

这是我的jfiddle：http://jsfiddle.net/blwoodley/WLtL4/1/

我很想知道West Langley从https://github.com/mrdoob/three.js/pull/3291生成这张图片的源代码。在这种情况下，它显然工作正常。

所以我必须做一些明显错误的事情，但我无法弄明白。

来自jfiddle的一些代码，它并没有比这简单得多：

function init() {

container = document.createElement('div');
document.body.appendChild(container);

camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 100000);
camera.position.x = 100;
camera.position.y = 100;
camera.position.z = 200;
camera.lookAt({x: 0,y: 0,z: 0});

scene = new THREE.Scene();

var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
var floorMaterial = new THREE.MeshLambertMaterial({ color: 0x222222, side:THREE.DoubleSide  });
floor = new THREE.Mesh(new THREE.PlaneGeometry(2000,2000,10,10), floorMaterial);
floor.rotation.x = Math.PI / 2;
floor.position.y = -40;
scene.add(floor);

var light;
light = new THREE.SpotLight(0x008888);
light.position.set(0, 40, 0);
light.lookAt(floor);
light.angle = Math.PI/4;
light.intensity = 30;
light.distance=0;
scene.add(light);

// RENDERER
webglRenderer = new THREE.WebGLRenderer();
webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
webglRenderer.domElement.style.position = "relative";

container.appendChild(webglRenderer.domElement);
window.addEventListener('resize', onWindowResize, false);

}

Answer 1

这很微妙。

您正在使用MeshLambertMaterial作为飞机。您需要将其更改为MeshPhongMaterial，以便正确渲染光照。

正如here所述，对于MeshLambertMaterial，仅在每个顶点执行照明计算。

对于MeshPhongMaterial，将在每个 texel 执行照明计算。

所以进行这些更改

floorGeometry = new THREE.PlaneGeometry( 1000, 1000 ); // no need to tessellate it now var floorMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff } ); // 0x222222 is too dark light.intensity = 1; // a reasonable value

更新了小提琴：http://jsfiddle.net/WLtL4/5/

three.js r.63

Answer 2

还尝试禁用目标进行测试。我从中获得了非常奇怪的行为。有时候它根本不会渲染光线，不知道为什么。我稍后会对问题进行演示。

在three.js中，聚光灯没有在平面上显示锥形

2 个答案: