尝试在three.js中渲染圆柱体，失败并出现错误“无法读取未定义的属性'类型'”

Question

我有一个很大的three.js代码，当我向它添加一个简单的圆柱体时，它会导致渲染器崩溃：

    const lineGeometry = new Three.CylinderBufferGeometry(1.0, // radiusTop
                                                          1.0, // radiusBottom
                                                          1.0, // height
                                                          7, 1) // radial/height segments
    this.line = new Three.Mesh(lineGeometry, material)
    this.add(this.line)

    // ... later ...
    viewer.render()

崩溃发生在渲染期间，在renderBufferDirect中的renderBufferDirect （实际上是renderer.setIndex ）中，并且似乎是由于该几何体具有index属性这一事实引起的。 Three.js WebGLRenderer.js 中崩溃的代码是这样的：

        if ( index !== null ) {
            attribute = attributes.get( index ); // this returns undefined
            renderer = indexedBufferRenderer;
            renderer.setIndex( attribute ); // attribute is undefined here, causes crash
        }

失败是由于attribute未定义。 几何本身只有属性position ， normal和uv ，但我不确定这就是它失败的原因。

我试图减少它，但当然在一个小例子中它工作正常。 :-(

看起来index是position数组中的一组有效索引：

index: Uint16BufferAttribute {name: "", array: Uint16Array(84), itemSize: 1, count: 84, normalized: false, …}
attributes:
position: Float32BufferAttribute {name: "", array: Float32Array(138), itemSize: 3, count: 46, normalized: false, …}
normal: Float32BufferAttribute {name: "", array: Float32Array(138), itemSize: 3, count: 46, normalized: false, …}
uv: Float32BufferAttribute {name: "", array: Float32Array(92), itemSize: 2, count: 46, normalized: false, …}

所以我不确定attributes.get(index)应该做什么，以及我需要提供什么才能让它工作。 任何帮助表示赞赏！

这是与three.js r111 btw。

Answer 1

嗯，我想通了，有点。 我的lineGeometry有一个重复的buffergeometry.id ，所以它在WebGLObjects.update()被跳过并且永远不会更新。 至于我是如何得到重复ID的，还有待弄清楚。