javascript - 渲染 THREE.js 后无法添加到场景

Question

看例子:

http://jsfiddle.net/pehrlich/nm1tzLLm/2/

在较新版本的 THREE.js 中，如果我在将其他对象添加到场景之前调用渲染，它们将永远不可见，即使有额外的渲染调用也是如此。这是预期的行为吗？

查看完整代码:

var cube, cube2, geometry, light, material, renderer;

window.scene = new THREE.Scene();

window.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);

renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

geometry = new THREE.CubeGeometry(75, 75, 16);
material = new THREE.MeshPhongMaterial({
  color: 0x0000ff
});
cube = new THREE.Mesh(geometry, material);
cube.position.set(80, 0, -400);
scene.add(cube);

camera.position.fromArray([0, 160, 400]);
camera.lookAt(new THREE.Vector3(0, 0, 0));

light = new THREE.PointLight(0xffffff, 8, 1000);

// comment out this line ot bring back second cube:
renderer.render(scene, camera);

scene.add(light);

geometry = new THREE.CubeGeometry(75, 75, 16);
material = new THREE.MeshPhongMaterial({
  color: 0x0000ff
});
cube2 = new THREE.Mesh(geometry, material);
cube2.position.set(-80, 0, -400);
cube2.castShadow = true;

scene.add(cube2);

renderer.render(scene, camera);

Answer 1

实际上，立方体在黑色背景上呈现为黑色。

您首先在没有灯光的情况下渲染场景，然后在添加灯光后再次渲染。

如 Wiki 文章 How to Update Things with WebGLRenderer 中所述，无法在运行时轻易更改的属性(一旦 Material 至少渲染一次)包括灯光的数量和类型。

在第一次渲染之前将灯光添加到场景中，一切都会按预期进行。

如果一定要在第一次渲染后加光，那么就需要设置

material.needsUpdate = true;

three.js r.68