---
date: 2026-6-18
---

<!-- markdownlint-disable MD001 -->

# Different Shapes

![white line](https://threejs.org/examples/screenshots/webgl_mesh_batch.jpg)

Boxes and spheres are fine, but what if you want something more interesting — an arrow, a star, a bottle, or a triangle? Three.js gives you a few different tools for building custom shapes, and which one you use depends on what kind of shape you're making.

### making an arrow with lines

If you want a simple outline of a shape (like a wireframe arrow), use `BufferGeometry` with `setFromPoints`:

```javascript
const points = [];
points.push(new THREE.Vector3(-10, 0, 0));
points.push(new THREE.Vector3(0, 10, 0));
points.push(new THREE.Vector3(10, 0, 0));

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

scene.add(line);
```

This creates a V-shaped arrow using just three points connected by lines.

**Good for:** Wireframes, arrows, diagrams, measurements.

### making a star with Shape

If you want a solid, filled 2D shape — like a star that you can texture or extrude into 3D — use `THREE.Shape`. It works like drawing on a canvas with `moveTo` and `lineTo`:

```javascript
const shape = new THREE.Shape();
const outerRadius = 10;
const innerRadius = 4;
const spikes = 5;

for (let i = 0; i  spikes * 2; i++) {
    const radius = i % 2 === 0 ? outerRadius : innerRadius;
    const angle = (i / (spikes * 2)) * Math.PI * 2 - Math.PI / 2;
    const x = Math.cos(angle) * radius;
    const y = Math.sin(angle) * radius;
    if (i === 0) {
        shape.moveTo(x, y);
    } else {
        shape.lineTo(x, y);
    }
}
shape.closePath();

const geometry = new THREE.ShapeGeometry(shape);
const material = new THREE.MeshBasicMaterial({
    color: 0x0000ff,
    side: THREE.DoubleSide,
});
const star = new THREE.Mesh(geometry, material);

scene.add(star);
```

**Good for:** Stars, badges, icons, any 2D shape with straight or curved edges.

### making a bottle with LatheGeometry

For shapes that are round but not simple spheres — like a bottle, a vase, or a chess piece — use `LatheGeometry`. It works by taking a 2D profile (a set of points) and revolving it around an axis, like spinning clay on a pottery wheel.

```javascript
const points = [];
const height = 20;
const radius = 8;
const neckHeight = 6;
const neckRadius = 2;

// Profile of the bottle — trace one side
points.push(new THREE.Vector2(0, 0)); // center of base
points.push(new THREE.Vector2(radius * 0.8, 0)); // base edge
points.push(new THREE.Vector2(radius, 1)); // start of body

// Body
points.push(new THREE.Vector2(radius, height - neckHeight - 2));
points.push(new THREE.Vector2(radius * 0.9, height - neckHeight - 1));

// Neck
points.push(new THREE.Vector2(neckRadius + 1, height - neckHeight));
points.push(new THREE.Vector2(neckRadius, height - neckHeight + 1));

// Top
points.push(new THREE.Vector2(neckRadius, height));
points.push(new THREE.Vector2(0, height)); // center of top

const geometry = new THREE.LatheGeometry(points, 32);
const material = new THREE.MeshStandardMaterial({
    color: 0x4488aa,
    side: THREE.DoubleSide,
});
const bottle = new THREE.Mesh(geometry, material);

scene.add(bottle);
```

**Good for:** Bottles, vases, lamp shades, goblets, pillars — anything with rotational symmetry.

### making a triangle with Shape

Here's the simplest solid shape — a triangle:

```javascript
const shape = new THREE.Shape();
shape.moveTo(-10, -10);
shape.lineTo(10, -10);
shape.lineTo(0, 10);
shape.closePath();

const geometry = new THREE.ShapeGeometry(shape);
const material = new THREE.MeshBasicMaterial({
    color: 0x0000ff,
    side: THREE.DoubleSide,
});
const triangle = new THREE.Mesh(geometry, material);
scene.add(triangle);
```

### which approach should you use?

| You want to...                         | Use this                 |
| -------------------------------------- | ------------------------ |
| Draw lines or wireframes               | `Line` + `setFromPoints` |
| Make a solid 2D shape (star, triangle) | `ShapeGeometry`          |
| Make a rotated object (bottle, vase)   | `LatheGeometry`          |
| Build any shape from scratch (custom)  | `BufferGeometry`         |

Each is useful for different things. Start with `Shape` for flat shapes and `LatheGeometry` for anything round and symmetrical.
