Custom buffered geometry with index won't show

I’m new to three js, and sorry for my naive question).
I’m trying to render 2D shape with BufferGeometry like this
starting from line 28.

Ideally it should look similar to this image (
however nothing appears.

Any ideas why nothing is visible.


Forgot to update fiddle.
New one

Fixed (simplified) fiddle:

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:


Great, thanks Michael.

1 Like