Threejs Geometry

Three.js Geometry is a community skill for creating and manipulating 3D geometry in Three.js, covering parametric shapes, custom geometry, buffer attributes, geometry merging, and constructive solid geometry for 3D object modeling.

What Is This?

Overview

Three.js Geometry provides guidance on creating and manipulating 3D shapes in Three.js scenes. It covers parametric shapes that generate geometry from mathematical functions and parameters, custom geometry that builds vertices and faces programmatically for unique shapes, buffer attributes that define position, normal, and UV data for efficient GPU rendering, geometry merging that combines multiple geometries into single draw calls for performance, and constructive solid geometry that creates complex shapes through boolean operations on primitives. The skill helps developers model 3D objects for web applications.

Who Should Use This

This skill serves web developers creating custom 3D shapes, creative coders building generative geometry, and engineers visualizing data through 3D models in the browser.

Why Use It?

Problems It Solves

Built-in primitives are too simple for many visualization needs. Creating custom geometry requires understanding vertex buffers and face indices. Scenes with many separate objects suffer draw call overhead that reduces frame rates. Complex shapes need boolean operations that are not available in basic geometry APIs.

Core Highlights

Shape generator creates parametric geometry from functions. Buffer builder defines custom vertex attributes for GPU rendering. Merge optimizer combines geometries to reduce draw calls. Boolean engine performs union, subtract, and intersect operations.

How to Use It?

Basic Usage

// Custom geometry
import * as THREE from
  'three';

function createTerrain(
  width, depth, segments
) {
  const geo =
    new THREE
    .PlaneGeometry(
      width, depth,
      segments, segments);
  const pos = geo
    .attributes
    .position;

  for (let i = 0;
    i < pos.count; i++
  ) {
    const x = pos.getX(i);
    const y = pos.getY(i);
    const height =
      Math.sin(x * 0.5)
      * Math.cos(y * 0.5)
      * 2;
    pos.setZ(i, height);
  }

  geo.computeVertexNormals();
  return geo;
}

function createRing(
  inner, outer, segs
) {
  const shape =
    new THREE.Shape();
  shape.absarc(
    0, 0, outer, 0,
    Math.PI * 2);
  const hole =
    new THREE.Path();
  hole.absarc(
    0, 0, inner, 0,
    Math.PI * 2);
  shape.holes.push(hole);
  return new THREE
    .ShapeGeometry(
      shape, segs);
}

const terrain =
  createTerrain(
    20, 20, 50);
const ring =
  createRing(1, 2, 32);
console.log(
  'Terrain verts:',
  terrain.attributes
    .position.count);

Real-World Examples

// Instanced geometry
import * as THREE from
  'three';

class InstancedScatter {
  constructor(
    geometry,
    material,
    count
  ) {
    this.mesh =
      new THREE
      .InstancedMesh(
        geometry,
        material,
        count);
    this.count = count;
    this.dummy =
      new THREE.Object3D();
  }

  scatter(
    range, heightFn
  ) {
    for (let i = 0;
      i < this.count; i++
    ) {
      const x = (
        Math.random() - 0.5
      ) * range;
      const z = (
        Math.random() - 0.5
      ) * range;
      const y =
        heightFn(x, z);
      this.dummy
        .position.set(
          x, y, z);
      const scale =
        0.5 + Math.random();
      this.dummy.scale
        .setScalar(scale);
      this.dummy
        .updateMatrix();
      this.mesh
        .setMatrixAt(
          i,
          this.dummy
            .matrix);
    }
    this.mesh
      .instanceMatrix
      .needsUpdate = true;
  }
}

const geo =
  new THREE
  .ConeGeometry(
    0.2, 1, 6);
const mat =
  new THREE
  .MeshStandardMaterial(
    { color: 0x228b22 });
const trees =
  new InstancedScatter(
    geo, mat, 1000);
trees.scatter(
  50, (x, z) =>
    Math.sin(x * 0.3)
    * 0.5);
console.log(
  'Trees placed:',
  trees.count);

Advanced Tips

Use InstancedMesh to render thousands of identical objects with a single draw call. Call computeVertexNormals after modifying vertex positions to maintain correct lighting. Use BufferGeometry with typed arrays for maximum GPU transfer efficiency.

When to Use It?

Use Cases

Generate procedural terrain by modifying plane geometry vertex heights. Render large particle systems using instanced geometry for performance. Build custom shapes by extruding SVG paths into 3D geometry.

Related Topics

Three.js, WebGL, 3D modeling, buffer geometry, instanced rendering, procedural generation, and geometry optimization.

Important Notes

Requirements

Three.js library for geometry creation and rendering. Understanding of vertex buffer structure including position, normal, and UV attributes. A WebGL-capable browser for hardware-accelerated rendering of the generated geometry.

Usage Recommendations

Do: merge static geometries to reduce draw call count for better frame rates. Use indexed geometry to share vertices between triangles and reduce memory usage. Dispose geometry objects when removing them from the scene to prevent GPU memory leaks.

Don't: modify buffer attributes every frame without flagging needsUpdate since changes will not reach the GPU. Create separate Mesh objects for identical shapes when InstancedMesh handles the case. Forget to call computeVertexNormals after modifying vertex positions since lighting will appear incorrect.

Limitations

Complex procedural geometry generation runs on the CPU and may cause frame drops during creation. Boolean operations on geometry are computationally expensive and best done at initialization. Custom geometry lacks the optimization that 3D modeling tools apply during mesh export.