Overview

BufferGeometry is an amazing feature of Three.js, however it can be rather daunting to tackle putting it together yourself for the first time. This article is intended to break it down into different components, and explain each piece with (hopefully) enough detail that you'll get a decent grasp of how to customize this for yourself.

Attributes

A BufferGeometry has attributes which define it's fivemain areas of concern:

Position
Normal
UV
Color
Index

Position

Position is an object which holds an array of positions and ....

bufferGeometryInstance.attributes.position = {
	array: mesh.positions,
	itemSize: 3
};

Normal

bufferGeometryInstance.attributes.normal = {
	array: mesh.normals,
	itemSize: 3
};

UV

bufferGeometryInstance.attributes.uv = {
	array: mesh.uvs,
	itemSize: 2
};

Index

The index is necessary if UV mapping is enabled.

Color

Step-by-step guide

Add the steps involved:

Insert your steps.
You can also copy and paste or drag and drop images into your instructions.

You may also want to use visual panels to communicate related information, tips or things users need to be aware of.