Custom buffered geometry with index won't show

Hello,
I’m new to three js, and sorry for my naive question).
I’m trying to render 2D shape with BufferGeometry like this https://jsfiddle.net/uocx0g53/4/
starting from line 28.

Ideally it should look similar to this image (https://raw.githubusercontent.com/mapbox/delaunator/master/delaunator.png)
however nothing appears.

Any ideas why nothing is visible.

Thanks.

Forgot to update fiddle.
New one https://jsfiddle.net/o53huxat/2/

Fixed (simplified) fiddle: https://jsfiddle.net/qhvojp08/2/

I know you have copied the code from a WebGL fundamentals but I personally don’t like the code style of the respective demos. Especially the resizing logic is unnecessarily complicated.

Anyway, if you want a color per face, it’s necessary to add a color attribute representing vertex colors. However, you have to ensure that no vertices are shared between faces if those faces have different colors. So you should remove the index from your geometry. Check out how the colors are generated in the following example and try to adapt this style to your code:

https://threejs.org/examples/webgl_geometry_colors

3 Likes

Great, thanks Michael.

1 Like