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

Related articles