渲染THRE.js后无法添加到场景中
Cannot add to scene after rendering THREE.js
参见示例:
http://jsfiddle.net/pehrlich/nm1tzLLm/2/
在THRE.js的较新版本中,如果在向场景添加其他对象之前调用render,则它们将永远不可见,即使有其他的渲染调用也是如此。这是预期的行为吗?
查看完整代码:
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);
实际上,立方体在黑色背景上呈现为黑色。
首先在没有灯光的情况下渲染场景,然后在添加灯光后再次渲染。
正如Wiki文章《如何使用WebGLRenderer更新事物》中所述,在运行时(一旦材质至少渲染一次)无法轻松更改的属性包括灯光的数量和类型。
在第一次渲染之前将灯光添加到场景中,一切都将按预期进行。
如果必须在第一次渲染后添加灯光,则需要设置
material.needsUpdate = true;
three.js r.68
相关文章:
- 正在添加'X'按钮,在文本字段旁边使用javascript
- 如何在映射数组中添加换行符
- 正在将数据主题添加到所有项目
- ZeroClipboard-在复制之前添加到值
- 我可以在json对象中添加一个函数吗
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- 正在SharePoint 2013母版页中添加JQuery移动文件
- 如何添加浮动和非浮动,其他
- 添加文字和评论功能更新Div
- 如果使用 lodash 将属性存在于另一个对象中,则向对象添加属性
- 动态地改变“”的URL;添加新项目”;链接使用javascript/jquery
- 在函数中添加数组元素的数值
- 如何将歌曲添加到jPlayer
- 在html Select中添加搜索
- Java脚本时间添加
- FabricJs-限制主对象内添加对象的移动区域
- JQuery添加元素需要在我的js之前再次添加JQuery脚本
- 如何在Google柱状图中动态添加行/列
- 第一步's与THRE.js:试图将搅拌机模型添加到场景中的问题
- 渲染THRE.js后无法添加到场景中