three.js r70:合并THREE.PlaneBufferGeometries的问题 [英] three.js r70: issues merging THREE.PlaneBufferGeometries
问题描述
我正在尝试在使用THREE.PlaneBufferGeometry创建的缓冲区几何上使用新的(在r70中引入)THREE.BufferGeometry.merge功能,但是我在后续渲染调用期间遇到错误(合并本身工作没有错误)。
I'm trying to use the new (introduced in r70) THREE.BufferGeometry.merge functionality on buffer geometries created with THREE.PlaneBufferGeometry but I'm getting a error during the subsequent render call (the merging itself is working without errors).
- Chrome中的错误消息:
未捕获TypeError:无法读取未定义的属性'array'$ c Firefox中的$ c>
- 错误消息:
TypeError:this.attributes.position未定义
- 受影响的代码行:非缩小r70构建中的第8679行:
var positions = this.attributes.position.array;
在缓冲区几何中的computeBoundingSphere
- error message in Chrome:
Uncaught TypeError: Cannot read property 'array' of undefined
- error message in Firefox:
TypeError: this.attributes.position is undefined
- affected line of code: line 8679 in non minified r70 build:
var positions = this.attributes.position.array;
in buffer geometry's computeBoundingSphere
我能够将测试用例缩减为简单的立方体模型(尝试将立方体的所有面合并为单个BufferGeometry):
I was able to reduce the test case to a simple cube model (trying to merge all faces of the cube into a single 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:
Here is a jsfiddle of a:
- 使用PlaneBufferGeometry打破场景: http://jsfiddle.net/chrmoritz/gpt2xjmb/
- 使用普通PlaneGeometry的工作场景: http:// jsfiddle.net/chrmoritz/gpt2xjmb/1/
- broken scene using PlaneBufferGeometry: http://jsfiddle.net/chrmoritz/gpt2xjmb/
- working scene using normal PlaneGeometry: http://jsfiddle.net/chrmoritz/gpt2xjmb/1/
从我的理解THREE.PlaneBufferGeometry应该注意设置BufferGeometry的position属性具有顶点位置。
我做了一些完全错误的事情,或者这是一个在threejs r70中的错误?
From my understanding THREE.PlaneBufferGeometry should have taken care of setting the BufferGeometry's position attribute with the vertex positions. Did I do something completly wrong or is this a bug in threejs r70?
推荐答案
你可以使用:
var bg = new BufferGeometry().fromGeometry(geometry);
最后得到你的合并BufferGeometry。我在我的项目中遇到同样的问题,因为该消息需要那种丑陋的解决方法。有没有错误报告或修复?
at the end to get your merged BufferGeometry. I have the same problem in my projects and need that ugly workaround because of that message. Is there any bug report or fix yet?
这篇关于three.js r70:合并THREE.PlaneBufferGeometries的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!