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

问题描述

参见示例：

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

In newer versions of THREE.js, if I call render before adding additional objects to the scene, they will never be visible, even with additional calls to render. Is this expected behavior?

查看完整代码：

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

推荐答案

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

Actually, the cube is rendered black on a black background.

您首先渲染场景时没有灯光，然后在添加灯光后再渲染。

You are rendering the scene first with no lights, and then again after adding a light.

As在Wiki文章中指出，属性不能在运行时轻松更改（一旦材质至少呈现一次）包括灯光的数量和类型。

As stated in the Wiki article How to Update Things with WebGLRenderer, properties that can't be easily changed in runtime (once a material is rendered at least once) include the number and types of lights.

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

Add the light to the scene before the first render, and everything will work as expected.

如果你必须在第一次渲染后添加灯光，那么你需要设置

If you must add the light after the first render, then you need to set

material.needsUpdate = true;

three.js r.68

three.js r.68

这篇关于渲染THREE.js后无法添加到场景中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！