I am facing an issue with my three.js code where adding a simple cylinder is causing the renderer to crash:
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()
The crash occurs during rendering, specifically in WebGLRenderer.js within the renderBufferDirect function (specifically renderer.setIndex), and seems to be related to the presence of an index property in the geometry. Here is the relevant section of code in WebGLRenderer.js:
if ( index !== null ) {
attribute = attributes.get( index ); // this returns undefined
renderer = indexedBufferRenderer;
renderer.setIndex( attribute ); // attribute is undefined here, causes crash
}
The error stems from attribute being undefined. While the geometry only has attributes like position, normal, and uv, it's unclear why this issue is occurring.
Although I attempted to simplify the code, it works fine in a smaller example. It appears that the index contains valid indices for the position array:
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, …}
It is uncertain what attributes.get(index) should return or how to resolve the problem. Any insights would be greatly appreciated!
This issue occurred in three.js version r111.