three.js r70：合并 THREE.PlaneBufferGeometries 的问题答案

【问题标题】：three.js r70: issues merging THREE.PlaneBufferGeometriesthree.js r70：合并 THREE.PlaneBufferGeometries 的问题
【发布时间】：2015-05-06 09:18:37
【问题描述】：

我正在尝试在使用 THREE.PlaneBufferGeometry 创建的缓冲区几何图形上使用新的（在 r70 中引入）THREE.BufferGeometry.merge 功能，但在随后的渲染调用期间出现错误（合并本身正在正常工作，没有错误)。

Chrome 中的错误消息：Uncaught TypeError: Cannot read property 'array' of undefined
Firefox 中的错误消息：TypeError: this.attributes.position is undefined
受影响的代码行：非缩小 r70 构建中的第 8679 行：缓冲区几何的 computeBoundingSphere 中的var positions = this.attributes.position.array;

我能够将测试用例简化为一个简单的立方体模型（尝试将立方体的所有面合并到一个 BufferGeometry 中）：

var camera, geometry, matrix, mesh, nx, ny, nz, px, py, pz, renderer, scene;

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

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 70;
camera.position.x = 70;
camera.position.y = 70;
camera.lookAt(new THREE.Vector3(0,0,0));

matrix = new THREE.Matrix4();

px = new THREE.PlaneBufferGeometry(50, 50);
px.applyMatrix(matrix.makeRotationY(Math.PI / 2));
px.applyMatrix(matrix.makeTranslation(25, 0, 0));

nx = new THREE.PlaneBufferGeometry(50, 50);
nx.applyMatrix(matrix.makeRotationY(-Math.PI / 2));
nx.applyMatrix(matrix.makeTranslation(-25, 0, 0));

py = new THREE.PlaneBufferGeometry(50, 50);
py.applyMatrix(matrix.makeRotationX(-Math.PI / 2));
py.applyMatrix(matrix.makeTranslation(0, 25, 0));

ny = new THREE.PlaneBufferGeometry(50, 50);
ny.applyMatrix(matrix.makeRotationX(Math.PI / 2));
ny.applyMatrix(matrix.makeTranslation(0, -25, 0));

pz = new THREE.PlaneBufferGeometry(50, 50);
pz.applyMatrix(matrix.makeTranslation(0, 0, 25));

nz = new THREE.PlaneBufferGeometry(50, 50);
nz.applyMatrix(matrix.makeRotationY(Math.PI));
nz.applyMatrix(matrix.makeTranslation(0, 0, -25));

geometry = new THREE.BufferGeometry();
geometry.merge(px);
geometry.merge(nx);
geometry.merge(py);
geometry.merge(ny);
geometry.merge(pz);
geometry.merge(nz);

mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({color: 0xff0000}));
scene.add(mesh);

renderer.render(scene, camera);

这是一个 jsfiddle：

使用 PlaneBufferGeometry 破坏场景：http://jsfiddle.net/chrmoritz/gpt2xjmb/
使用普通PlaneGeometry的工作场景：http://jsfiddle.net/chrmoritz/gpt2xjmb/1/

据我了解，THREE.PlaneBufferGeometry 应该负责设置 BufferGeometry 的位置属性和顶点位置。我做错了什么还是这是threejs r70中的一个错误？

【问题讨论】：

1.这似乎是BufferGeometry.merge() 中的一个错误。使用调试器逐步确认。如果您同意，您可以在three.js 网站上提交bug report。 2.jsfiddle.net/gpt2xjmb/2

标签： javascript three.js

【解决方案1】：

你可以使用：

var bg = new BufferGeometry().fromGeometry(geometry);

最后得到合并的 BufferGeometry。我在我的项目中遇到了同样的问题，并且由于该消息而需要这种丑陋的解决方法。是否有任何错误报告或修复？

【讨论】：

好的，我尝试了另一种方法：对你来说 px.merge(nx); 应该可以，但是当添加另一个 BufferedGeometry 时，它对我不起作用：/
BufferGeometry.merge() 的问题导致我的问题是： 1. BufferGeometry.merge() 不会为您调整缓冲区大小。而不是只使用geometry = new THREE.BufferGeometry();，您必须注意所有缓冲区属性都具有正确的预期结果长度。 2. BufferGeometry.merge() 还不支持索引几何（这仅记录在提交消息中）。但是添加索引几何应该很容易。
或许可以使用DynamicBufferGeometry：github.com/makc/three.js.fork/blob/…

【解决方案2】：

这个 github 问题末尾的代码应该可以工作。

https://github.com/mrdoob/three.js/issues/6188

为什么它没有被拉出来我不知道。

更新：我刚刚注意到你是作者

【讨论】：