Creating Various Geometries (Shapes) in Three.js[r145]
Have you ever wondered which geometry to use when creating 3D objects in Three.js?
In this article, we explain the basic types of geometries and how to use them, with clear code examples.
Geometries in Three.js are data structures that define the shape and structure of 3D objects.
A geometry contains vertices, faces, edges, and normals, and by combining these elements you can create solid 3D shapes.
The basic geometries available in Three.js include:
PlaneGeometry (THREE.PlaneGeometry), BoxGeometry (THREE.BoxGeometry), SphereGeometry (THREE.SphereGeometry),
CapsuleGeometry (THREE.CapsuleGeometry), CircleGeometry (THREE.CircleGeometry),
RingGeometry (THREE.RingGeometry), ConeGeometry (THREE.ConeGeometry),
CylinderGeometry (THREE.CylinderGeometry), TorusGeometry (THREE.TorusGeometry),
TubeGeometry (extruded along a 3D curve, THREE.TubeGeometry),
LatheGeometry (rotational geometry, THREE.LatheGeometry), ExtrudeGeometry (swept/extruded geometry, THREE.ExtrudeGeometry), and more.
Left mouse drag rotates, right mouse drag moves, and the wheel zooms in/out.
Source Code (from left to right)
Plane Geometry (THREE.PlaneGeometry)
// ■ Create PlaneGeometry (width, height, width segments, height segments) // PlaneGeometry has no thickness and only one side (front surface). // Note: shadows are only cast on the back side. let planeGeometry=new THREE.PlaneGeometry(10,10,1,1); // Create a mesh from geometry and material let planeMesh=new THREE.Mesh(planeGeometry,material); // Rotate the mesh -90 degrees around the x-axis to make it horizontal planeMesh.rotation.x=-Math.PI/2; // Set mesh position planeMesh.position.set(-80,0,0); planeMesh.receiveShadow=true; // allow this mesh to receive shadows planeMesh.castShadow=false; // do not cast shadows (must be false for double-sided materials) // Add mesh to the scene scene.add(planeMesh);
Box Geometry (THREE.BoxGeometry)
// ■ Create BoxGeometry (width, height, depth) let boxGeometry=new THREE.BoxGeometry(8,16,8); // Create a mesh from geometry and material let boxMesh=new THREE.Mesh(boxGeometry,material); // Set mesh position boxMesh.position.set(-70,0,0); boxMesh.receiveShadow=true; // allow this mesh to receive shadows boxMesh.castShadow=true; // allow this mesh to cast shadows // Add mesh to the scene scene.add(boxMesh);
Sphere Geometry (THREE.SphereGeometry)
// ■ Create SphereGeometry (radius[1], width segments[32], height segments[16], phiStart[0], phiLength[Math.PI*2]) let sphereGeometry=new THREE.SphereGeometry(4,32,16,0,Math.PI*2); // Create a mesh from geometry and material let sphereMesh=new THREE.Mesh(sphereGeometry,material); // Set mesh position sphereMesh.position.set(-60,0,0); sphereMesh.receiveShadow=true; // allow this mesh to receive shadows sphereMesh.castShadow=true; // allow this mesh to cast shadows // Add mesh to the scene scene.add(sphereMesh);
Capsule Geometry (THREE.CapsuleGeometry)
// ■ Create CapsuleGeometry (radius of caps, length of central section, cap segments[4], radial segments[8]) let capsuleGeometry = new THREE.CapsuleGeometry( 4, 4, 4, 8 ); // Create a mesh from geometry and material let capsuleMesh=new THREE.Mesh(capsuleGeometry,material); // Set mesh position capsuleMesh.position.set(-50,0,0); capsuleMesh.receiveShadow=true; // allow this mesh to receive shadows capsuleMesh.castShadow=true; // allow this mesh to cast shadows // Add mesh to the scene scene.add(capsuleMesh);
Circle Geometry (THREE.CircleGeometry)
// ■ Create CircleGeometry (radius, segments[8], thetaStart[0], thetaLength[Math.PI*2]) let circleGeometry = new THREE.CircleGeometry( 4, 8, 0, Math.PI*2 ); // Create a mesh from geometry and material let circleMesh=new THREE.Mesh(circleGeometry,material); // Set mesh position circleMesh.position.set(-35,0,0); circleMesh.receiveShadow=true; // allow this mesh to receive shadows circleMesh.castShadow=true; // allow this mesh to cast shadows (note: back side casts shadows so they may not appear) // Add mesh to the scene scene.add(circleMesh);
Ring Geometry (THREE.RingGeometry)
// ■ Create RingGeometry (inner radius[0.5], outer radius[1], thetaSegments[8], phiSegments[1], thetaStart[0], thetaLength[Math.PI*2]) let ringGeometry = new THREE.RingGeometry(3, 5, 32, 1, 0, Math.PI*2); // Create a mesh from geometry and material let ringMesh=new THREE.Mesh(ringGeometry,material); // Set mesh position ringMesh.position.set(-20,0,0); ringMesh.receiveShadow=true; // allow this mesh to receive shadows ringMesh.castShadow=true; // allow this mesh to cast shadows (note: back side casts shadows so they may not appear) // Add mesh to the scene scene.add(ringMesh);
Cone Geometry (THREE.ConeGeometry)
// ■ Create ConeGeometry (radius, height, radial segments[8], height segments[1], openEnded[false], thetaStart[0], thetaLength[Math.PI*2]) let coneGeometry = new THREE.ConeGeometry( 4, 10, 8, 1, false, 0, Math.PI*2 ); // Create a mesh from geometry and material let coneMesh=new THREE.Mesh(coneGeometry,material); // Set mesh position coneMesh.position.set(-5,0,0); coneMesh.receiveShadow=true; // allow this mesh to receive shadows coneMesh.castShadow=true; // allow this mesh to cast shadows // Add mesh to the scene scene.add(coneMesh);
Cylinder Geometry (THREE.CylinderGeometry)
// ■ Create CylinderGeometry (top radius, bottom radius, height, radial segments[8], height segments[1], openEnded[false], thetaStart[0], thetaLength[Math.PI*2]) let cylinderGeometry = new THREE.CylinderGeometry( 4, 6, 10, 8, 1, false, 0, Math.PI*2 ); // Create a mesh from geometry and material let cylinderMesh=new THREE.Mesh(cylinderGeometry,material); // Set mesh position cylinderMesh.position.set(10,0,0); cylinderMesh.receiveShadow=true; // allow this mesh to receive shadows cylinderMesh.castShadow=true; // allow this mesh to cast shadows // Add mesh to the scene scene.add(cylinderMesh);
Torus Geometry (THREE.TorusGeometry)
// ■ Create TorusGeometry (radius from center to tube center, tube radius, radial segments[8], tubular segments[6], arc[Math.PI*2]) let torusGeometry = new THREE.TorusGeometry(5, 2, 32, 32, Math.PI*2 ); // Create a mesh from geometry and material let torusMesh=new THREE.Mesh(torusGeometry,material); // Set mesh position torusMesh.position.set(25,0,0); torusMesh.receiveShadow=true; // allow this mesh to receive shadows torusMesh.castShadow=true; // allow this mesh to cast shadows // Add mesh to the scene scene.add(torusMesh);
Tube Geometry (extruded along a 3D curve, THREE.TubeGeometry)
// ■ TubeGeometry (extruded along a 3D curve)
// Define a class derived from THREE.Curve
class CustomSinCurve extends THREE.Curve {
constructor( scale = 1 ) {
super();
this.scale=scale;
}
// t receives values from 0 to 1
getPoint(t, optionalTarget=new THREE.Vector3()) {
const tx = t*2-1; // -1 to 1
const ty = Math.sin(2*Math.PI * t); // -1 to 1
const tz = Math.cos(2*Math.PI * t); // -1 to 1
return optionalTarget.set(tx,ty,tz).multiplyScalar(this.scale);
}
}
let path=new CustomSinCurve(5);
// Create TubeGeometry
let tubeGeometry = new THREE.TubeGeometry(path, 64, 1, 8, false);
// Create a mesh from geometry and material
let tubeMesh=new THREE.Mesh(tubeGeometry,material);
// Set mesh position
tubeMesh.position.set(40,0,0);
tubeMesh.receiveShadow=true; // allow this mesh to receive shadows
tubeMesh.castShadow=true; // allow this mesh to cast shadows
// Add mesh to the scene
scene.add(tubeMesh);
Lathe Geometry (rotational geometry, THREE.LatheGeometry)
// ■ LatheGeometry (rotational geometry) // Create an array of points in the XY plane let points=[ new THREE.Vector2(0,0),new THREE.Vector2(4,0),new THREE.Vector2(4,8), new THREE.Vector2(3.9,8),new THREE.Vector2(3.9,0.1),new THREE.Vector2(0,0.1), ]; // Rotate around the Y axis to create LatheGeometry (points array, segments, phiStart[0], phiLength[Math.PI*2]) let latheGeometry = new THREE.LatheGeometry(points, 12, 0, Math.PI*2); // Create a mesh from geometry and material let latheMesh=new THREE.Mesh(latheGeometry,material); // Set mesh position latheMesh.position.set(60,0,0); latheMesh.receiveShadow=true; // allow this mesh to receive shadows latheMesh.castShadow=true; // allow this mesh to cast shadows // Add mesh to the scene scene.add(latheMesh);
Extrude Geometry (swept/extruded geometry, THREE.ExtrudeGeometry)
// ■ ExtrudeGeometry (swept/extruded geometry)
// Create a shape in the XY plane
let shape=new THREE.Shape();
shape.moveTo(0,0);
shape.lineTo(6,6);
shape.lineTo(6,-6);
shape.lineTo(-6,-6);
shape.lineTo(-6,6);
shape.lineTo(0,0);
// Extrude along the Z (depth) direction to create geometry
let extrudeGeometry = new THREE.ExtrudeGeometry(
shape,
{
steps:1, // number of extrusion steps
depth:10, // extrusion depth
bevelEnabled:true, // enable bevel
bevelThickness: 2, // bevel thickness
bevelSize: 2, // distance from shape outline
bevelOffset: 0, // offset from shape outline
bevelSegments: 12 // number of bevel segments
}
);
// Create a mesh from geometry and material
let extrudeMesh=new THREE.Mesh(extrudeGeometry,material);
// Set mesh position
extrudeMesh.position.set(80,0,0);
extrudeMesh.receiveShadow=true; // allow this mesh to receive shadows
extrudeMesh.castShadow=true; // allow this mesh to cast shadows
// Add mesh to the scene
scene.add(extrudeMesh);