Skip to main content

Geometry

Geometries define the shape and structure of 3D objects in Three.js.

Built-in Geometries​

Basic Shapes​

// Box
const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
const boxGeometry = new THREE.BoxGeometry(
  width,
  height,
  depth,
  widthSegments,
  heightSegments,
  depthSegments
);

// Sphere
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
const sphereGeometry = new THREE.SphereGeometry(
  radius,
  widthSegments,
  heightSegments,
  phiStart,
  phiLength,
  thetaStart,
  thetaLength
);

// Plane
const planeGeometry = new THREE.PlaneGeometry(1, 1);
const planeGeometry = new THREE.PlaneGeometry(
  width,
  height,
  widthSegments,
  heightSegments
);

// Circle
const circleGeometry = new THREE.CircleGeometry(1, 32);
const circleGeometry = new THREE.CircleGeometry(
  radius,
  segments,
  thetaStart,
  thetaLength
);

// Cylinder
const cylinderGeometry = new THREE.CylinderGeometry(1, 1, 1, 32);
const cylinderGeometry = new THREE.CylinderGeometry(
  radiusTop,
  radiusBottom,
  height,
  radialSegments,
  heightSegments
);

// Cone
const coneGeometry = new THREE.ConeGeometry(1, 1, 32);
const coneGeometry = new THREE.ConeGeometry(
  radius,
  height,
  radialSegments,
  heightSegments
);

Complex Shapes​

// Torus
const torusGeometry = new THREE.TorusGeometry(1, 0.3, 16, 100);
const torusGeometry = new THREE.TorusGeometry(
  radius,
  tube,
  radialSegments,
  tubularSegments,
  arc
);

// Torus Knot
const torusKnotGeometry = new THREE.TorusKnotGeometry(1, 0.3, 100, 16);
const torusKnotGeometry = new THREE.TorusKnotGeometry(
  radius,
  tube,
  tubularSegments,
  radialSegments,
  p,
  q
);

// Dodecahedron
const dodecahedronGeometry = new THREE.DodecahedronGeometry(1, 0);

// Icosahedron
const icosahedronGeometry = new THREE.IcosahedronGeometry(1, 0);

// Octahedron
const octahedronGeometry = new THREE.OctahedronGeometry(1, 0);

// Tetrahedron
const tetrahedronGeometry = new THREE.TetrahedronGeometry(1, 0);

Custom Geometry​

Buffer Geometry​

const geometry = new THREE.BufferGeometry();

// Vertices (positions)
const vertices = new Float32Array([
  -1,
  -1,
  1, // vertex 0
  1,
  -1,
  1, // vertex 1
  1,
  1,
  1, // vertex 2
  -1,
  1,
  1, // vertex 3
]);

geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

// Faces (indices)
const indices = [
  0,
  1,
  2, // first triangle
  2,
  3,
  0, // second triangle
];

geometry.setIndex(indices);

// Normals
const normals = new Float32Array([
  0,
  0,
  1, // normal for vertex 0
  0,
  0,
  1, // normal for vertex 1
  0,
  0,
  1, // normal for vertex 2
  0,
  0,
  1, // normal for vertex 3
]);

geometry.setAttribute('normal', new THREE.BufferAttribute(normals, 3));

// UV coordinates
const uvs = new Float32Array([
  0,
  0, // UV for vertex 0
  1,
  0, // UV for vertex 1
  1,
  1, // UV for vertex 2
  0,
  1, // UV for vertex 3
]);

geometry.setAttribute('uv', new THREE.BufferAttribute(uvs, 2));

Procedural Geometry​

function createCustomGeometry() {
  const geometry = new THREE.BufferGeometry();
  const vertices = [];
  const normals = [];
  const uvs = [];

  // Generate vertices
  for (let i = 0; i < 100; i++) {
    const x = (Math.random() - 0.5) * 10;
    const y = (Math.random() - 0.5) * 10;
    const z = (Math.random() - 0.5) * 10;

    vertices.push(x, y, z);
    normals.push(0, 1, 0);
    uvs.push(0, 0);
  }

  geometry.setAttribute(
    'position',
    new THREE.Float32BufferAttribute(vertices, 3)
  );
  geometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));
  geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));

  return geometry;
}

Mesh Creation​

// Create mesh with geometry and material
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const mesh = new THREE.Mesh(geometry, material);

// Add to scene
scene.add(mesh);

// Multiple meshes with same geometry
const meshes = [];
for (let i = 0; i < 100; i++) {
  const mesh = new THREE.Mesh(geometry, material);
  mesh.position.set(
    Math.random() * 10 - 5,
    Math.random() * 10 - 5,
    Math.random() * 10 - 5
  );
  meshes.push(mesh);
  scene.add(mesh);
}

Instanced Geometry​

For rendering many objects efficiently:

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// Create instanced mesh
const instancedMesh = new THREE.InstancedMesh(geometry, material, 1000);

// Set matrix for each instance
const matrix = new THREE.Matrix4();
for (let i = 0; i < 1000; i++) {
  matrix.setPosition(
    Math.random() * 10 - 5,
    Math.random() * 10 - 5,
    Math.random() * 10 - 5
  );
  instancedMesh.setMatrixAt(i, matrix);
}

scene.add(instancedMesh);

Geometry Utilities​

Compute Normals​

// Compute face normals
geometry.computeFaceNormals();

// Compute vertex normals
geometry.computeVertexNormals();

// Compute bounding box
geometry.computeBoundingBox();
console.log(geometry.boundingBox);

// Compute bounding sphere
geometry.computeBoundingSphere();
console.log(geometry.boundingSphere);

Geometry Transformation​

// Scale geometry
geometry.scale(2, 2, 2);

// Translate geometry
geometry.translate(1, 0, 0);

// Rotate geometry
geometry.rotateX(Math.PI / 2);
geometry.rotateY(Math.PI / 4);
geometry.rotateZ(Math.PI / 6);

// Apply matrix transformation
const matrix = new THREE.Matrix4();
matrix.makeRotationX(Math.PI / 2);
geometry.applyMatrix4(matrix);

Geometry Merging​

// Merge multiple geometries
const geometry1 = new THREE.BoxGeometry(1, 1, 1);
const geometry2 = new THREE.SphereGeometry(1, 32, 32);
const geometry3 = new THREE.CylinderGeometry(1, 1, 1, 32);

// Translate before merging
geometry2.translate(2, 0, 0);
geometry3.translate(-2, 0, 0);

// Merge
const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries([
  geometry1,
  geometry2,
  geometry3,
]);

Points and Lines​

Points​

const geometry = new THREE.BufferGeometry();
const vertices = [];

for (let i = 0; i < 1000; i++) {
  vertices.push(
    Math.random() * 10 - 5,
    Math.random() * 10 - 5,
    Math.random() * 10 - 5
  );
}

geometry.setAttribute(
  'position',
  new THREE.Float32BufferAttribute(vertices, 3)
);

const material = new THREE.PointsMaterial({ color: 0xff0000, size: 0.1 });
const points = new THREE.Points(geometry, material);
scene.add(points);

Lines​

const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([
  -1,
  0,
  0, // start point
  1,
  0,
  0, // end point
]);

geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

const material = new THREE.LineBasicMaterial({ color: 0x0000ff });
const line = new THREE.Line(geometry, material);
scene.add(line);

// Line segments
const lineSegments = new THREE.LineSegments(geometry, material);
scene.add(lineSegments);

Wireframe​

// Wireframe material
const wireframeMaterial = new THREE.MeshBasicMaterial({
  color: 0x00ff00,
  wireframe: true,
});

// Wireframe geometry
const wireframeGeometry = new THREE.WireframeGeometry(geometry);
const wireframe = new THREE.LineSegments(wireframeGeometry, material);
scene.add(wireframe);

Geometry Disposal​

// Dispose geometry to free memory
geometry.dispose();

// Dispose material
material.dispose();

// Remove from scene
scene.remove(mesh);