Three.js Geometries
Three.js provides a variety of built-in geometries to create different shapes and structures in 3D space. Below is a comprehensive list of geometries, with their constructors, default parameters, and usage in both Three.js and React-Three-Fiber.
1. BoxGeometry
Creates a rectangular box (cuboid) shape.
BoxGeometry(width?: 1, height?: 1, depth?: 1, widthSegments?: 1, heightSegments?: 1, depthSegments?: 1)Three.js Example
const geometry = new THREE.BoxGeometry(4, 2, 3)React-Three-Fiber Example
<boxGeometry args={[4, 2, 3]} />box
2. SphereGeometry
Creates a sphere.
SphereGeometry(radius?: 1, widthSegments?: 3 (min - 32), heightSegments?: 16 (min - 2), phiStart?: 0, phiLength?: Math.PI * 2, thetaStart?: 0, thetaLength?: Math.PI)| Property | Description |
|---|---|
| phiStart | specify horizontal starting angle |
| phiLength | specify horizontal sweep angle size |
| thetaStart | specify vertical starting angle |
| thetaLength | specify vertical sweep angle size |
Three.js Example
const geometry = new THREE.SphereGeometry(2, 32, 32)React-Three-Fiber Example
<sphereGeometry args={[2, 32, 32]} />sphere
3. PlaneGeometry
Creates a flat 2D plane.
PlaneGeometry(width?: 1, height?: 1, widthSegments?: 1, heightSegments?: 1)Three.js Example
const geometry = new THREE.PlaneGeometry(5, 5)React-Three-Fiber Example
<planeGeometry args={[5, 5]} />plane
4. CircleGeometry
Creates a circle.
CircleGeometry(radius?: 1, segments?: 32 (min - 3), thetaStart?: 0, thetaLength?: Math.PI * 2)Three.js Example
const geometry = new THREE.CircleGeometry(1.5, 32)React-Three-Fiber Example
<circleGeometry args={[1.5, 32]} />circle
5. ConeGeometry
Creates a cone or pyramid shape.
ConeGeometry(radius?: 1, height?: 1, radialSegments?: 32, heightSegments?: 1, openEnded?: false, thetaStart?: 0, thetaLength?: Math.PI * 2)openEnded — A Boolean indicating whether the base of the cone is open or capped
Three.js Example
const geometry = new THREE.ConeGeometry(1, 2, 32)React-Three-Fiber Example
<coneGeometry args={[1, 2, 32]} />cone
6. CylinderGeometry
Creates a cylinder.
CylinderGeometry(radiusTop?: 1, radiusBottom?: 1, height?: 1, radialSegments?: 32, heightSegments?: 1, openEnded?: false, thetaStart?: 0, thetaLength?: Math.PI * 2)Three.js Example
const geometry = new THREE.CylinderGeometry(1, 1, 2, 32)React-Three-Fiber Example
<cylinderGeometry args={[1, 1, 2, 32]} />cylinder
7. TorusGeometry
Creates a torus (ring or donut shape).
TorusGeometry(radius?: 1, tube?: 0.4, radialSegments?: 12, tubularSegments?: 48, arc?: Math.PI * 2)| Property | Description |
|---|---|
| radius | Radius of the torus, from the center of the torus to the center of the tube |
| tube | Radius of the tube. Must be smaller than radius |
| arc | Central angle |
Three.js Example
const geometry = new THREE.TorusGeometry(1, 0.4, 16, 100)React-Three-Fiber Example
<torusGeometry args={[1, 0.4, 16, 100]} />torus
8. TorusKnotGeometry
Creates a torus knot.
TorusKnotGeometry(radius?: 1, tube?: 0.4, tubularSegments?: 64, radialSegments?: 8, p?: 2, q?: 3)| Property | Description |
|---|---|
| p | This value determines, how many times the geometry winds around its axis of rotational symmetry |
| q | This value determines, how many times the geometry winds around a circle in the interior of the torus |
Three.js Example
const geometry = new THREE.TorusKnotGeometry(1, 0.3, 100, 16)React-Three-Fiber Example
<torusKnotGeometry args={[1, 0.3, 100, 16]} />torusKnot
9. DodecahedronGeometry
Creates a dodecahedron (12-faced polyhedron).
DodecahedronGeometry(radius?: 1, detail?: 0)| Property | Description |
|---|---|
| detail | Setting this to a value greater than 0 adds vertices making it no longer a dodecahedron |
Three.js Example
const geometry = new THREE.DodecahedronGeometry(1)React-Three-Fiber Example
<dodecahedronGeometry args={[1]} />dodecahedron
10. IcosahedronGeometry
Creates an icosahedron (20-faced polyhedron).
IcosahedronGeometry(radius?: 1, detail?: 0)| Property | Description |
|---|---|
| detail | Setting this to a value greater than 0 adds more vertices making it no longer an icosahedron. When detail is greater than 1, it's effectively a sphere |
Three.js Example
const geometry = new THREE.IcosahedronGeometry(1)React-Three-Fiber Example
<icosahedronGeometry args={[1]} />icosahedron