THREE.JS gldrawerElements:尝试访问属性1中超出范围的顶点

添加自己的几何体属性时出现此错误。 我已经读过了，我知道问题出在哪里，但我不知道为什么

我正在构建一个缓冲区几何体，一棵树，从1000个对象开始。300个对象使用LeafGeometry，700个对象使用BoxGeometry

我想实现一个缓冲区，它包含一个值，告诉我们顶点是属于树干还是属于树叶。我现在做的是：

1） 首先，我计算缓冲区的维度（这里我认为我做得不对），调用：getTotNumVertices（LeafGeometry.new（options），BoxGeometry.new（options），10003000）

2） 一旦得到顶点的总数，我就创建缓冲区

function createBuffers(n_vert){
    // I'm returnin an array becuase in my real code I'm returning
    // more than one buffer
    return {
        isLeafBuffer: new Float32Array(n_vert)
    };
}

3） 然后我构建缓冲区几何体，将1000个对象合并在一起：

let hash_vertex_info = getTotNumVertices(leafGeom, geometries["box"], 1000, 300);
let buffers = createBuffers(hash_vertex_info.tot_vertices);
let geometry = new THREE.Geometry();
let objs = buildTheTree(1000, 300);
for (let i = 0; i < objs.length; i++){
    // here code that fullfills the buffers
    let mesh = objs[i];
    mesh.updateMatrix();
    geometry.merge(mesh.geometry, mesh.matrix);
}
let bufGeometry = new THREE.BufferGeometry().fromGeometry(geometry);
console.log(bufGeometry.attributes.position.count);
console.log(hash_vertex_info.tot_vertices);

TotVerticesMergeGeometry和bufGeometry.attributes.position.count的数量应该相同，但仍然不同

---

我计算顶点的方法错了吗？实际上，这里使用的是相同的，意思是（geometry.vertices.length）+（geometry.faces.length*3）。

我做错的是计算顶点数的方法。 缓冲区使用的顶点数是使用MyObjectGeometry.faces.Length*3*NumberOfObjects合并计算的

---

这里有一个更详细的答案

我有这个错误，因为我用值而不是值数组调用构造函数：

-    var colors = new Float32Array(
+    var colors = new Float32Array( [
       1.0, 0.0, 0.0,
       0.0, 1.0, 0.0,
       0.0, 0.0, 1.0,
       1.0, 0.0, 1.0,
       0.0, 1.0, 1.0,
       1.0, 1.0, 1.0,
-    );
+    ] );

---

也许是因为，我也有同样的想法。我已经将对象的数量从1000个减少到100个，但问题仍然存在。现在bufGeometry.attributes.position.count返回105216，但我创建的缓冲区大小为44340。这就是为什么我认为问题在于我计算几何体中顶点的方式。但我认为geometry.vertices.length*3是正确的方法。我认为我找到了正确的轨迹，稍后我会发布更新。我以错误的方式计算缓冲区的大小@gaitat，链接的答案来自你；）让我们看看它是否能解决我的问题problem@gaitat不，问题依然存在。在这个问题上，我更具体地解决了这个问题

let tot_objects = 100;
let material = new THREE.MeshStandardMaterial( {color: 0x00ff00} );
let geometry = new THREE.BoxGeometry(5, 5, 5, 4, 4, 4);
let objs = populateGroup(geometry, material, tot_objects);

//let's merge all the objects in one geometry
let mergedGeometry = new THREE.Geometry();
for (let i = 0; i < objs.length; i++){
    let mesh = objs[i];
    mesh.updateMatrix();
    mergedGeometry.merge(mesh.geometry, mesh.matrix);
}

let bufGeometry = new THREE.BufferGeometry().fromGeometry(mergedGeometry);

let totVerticesMergedGeometry = (mergedGeometry.vertices.length ) + (mergedGeometry.faces.length * 3);
console.log(bufGeometry.attributes.position.count); // 57600
console.log(totVerticesMergedGeometry); // 67400 !!!
scene.add(new THREE.Mesh(bufGeometry, material));

function populateGroup(selected_geometry, selected_material, tot_objects) {
    let objects = [];
    for (var i = 0; i< tot_objects; i++) {
        let coord = {x:i, y:i, z:i};
        let object = new THREE.Mesh(selected_geometry, selected_material);
        object.position.set(coord.x, coord.y, coord.z);
        object.rotateY( (90 + 40 + i * 100/tot_objects) * -Math.PI/180.0 );
        objects.push(object);
    }
    return objects;
}

-    var colors = new Float32Array(
+    var colors = new Float32Array( [
       1.0, 0.0, 0.0,
       0.0, 1.0, 0.0,
       0.0, 0.0, 1.0,
       1.0, 0.0, 1.0,
       0.0, 1.0, 1.0,
       1.0, 1.0, 1.0,
-    );
+    ] );