Lesson 2 of 13
Geometries
Geometries
Geometry defines the shape of a 3D object — its vertices, edges, and faces. Three.js ships with many built-in geometries:
| Class | Description | Key Parameters |
|---|---|---|
BoxGeometry | Rectangular box | width, height, depth |
SphereGeometry | UV sphere | radius, widthSegments, heightSegments |
CylinderGeometry | Cylinder/cone | radiusTop, radiusBottom, height, segments |
TorusGeometry | Donut/ring | radius, tube, radialSegments, tubularSegments |
PlaneGeometry | Flat plane | width, height |
ConeGeometry | Cone | radius, height, segments |
const box = new THREE.BoxGeometry(2, 1, 1);
const sphere = new THREE.SphereGeometry(0.5, 32, 32);
const torus = new THREE.TorusGeometry(1, 0.4, 16, 100);
Accessing Parameters
Each geometry stores its constructor arguments in .parameters:
const sphere = new THREE.SphereGeometry(2, 16, 16);
console.log(sphere.parameters.radius); // 2
console.log(sphere.parameters.widthSegments); // 16
Segment count controls smoothness — more segments = smoother, but more triangles.
Your Task
Implement the two functions below:
createSphere(radius, segments)— returns aSphereGeometrycreateTorus(radius, tube)— returns aTorusGeometrywith 16 radialSegments and 100 tubularSegments
Three.js loading...
Loading...
Click "Run" to execute your code.