(click anywhere to close)

[Three.js] Shapes and Geometries

category: Games | course: Threejs | difficulty:

Although it's possible to create any shape/geometry/mesh you want in Three.js, there are a few basic ones ready for immediate use, that will prove sufficient most of the time. We've already seen the box briefly, but there's so much more to it!


A BoxGeometry can be used for any type of cuboid (3D square, rectangle, etc.).

var geometry = new THREE.BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments);


A sphere is the other obvious basic shape: a 3D circle/ball.

var geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)

What are those last 4 parameters about? you might ask. Well, these are useful if you want incomplete spheres. The phi start and length determine the amount of vertices sweeping around the Y-axis. The theta start and length determine those around the Z-axis.


The third basic 3D object that's always mentioned, is the plane. A plane simply is a ground or wall - a flat square. If you for example want to create a grid-based game, the plane's your man!

var geometry = PlaneGeometry(width, height, widthSegments, heightSegments)

Polyhedrons (multi-planes)

In this category, we have multiple tastes: tetrahedron, octahedron, icosahedron, polyhedron. The first three are simpler ways to create common polyhedrons, the last one can be used to create anything.

var geom = new THREE.TetrahedronGeometry(radius, detail)
           new THREE.OctahedronGeometry(radius, detail)
           new THREE.IcosadhedronGeometry(radius, detail)

           new THREE.PolyhedronGeometry(vertices, faces, radius, detail)

//The radius specifies the radius of the geometry
//Detail adds more vertices, setting this to more than 0 makes it technically not a polyhedron anymore

//And the polyhedron requires you to set the amount of vertices and faces it will build the geometry from

Cilinders and Tubes

You know them: those shapes with a circle at the bottom,  and at a certain height the same circle straight above it. And tubes have the same, but with a hole in it.

var geom = new THREE.CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded)

//You can set a different radius for top and bottom
//Specify a height
//Determine the amount of segments (setting it to a high value will make it appear to be a circle, lower values make for other shapes)
//openEnded: boolean determining if the end is open or capped, default is capped (=false)

The tube works a bit differently:

var geom = new THREE.TubeGeometry(path, segments, radius, radiusSegments, closed)

//Set a path and rotate it around radius with the amount of segments specified.
//And you can determine if you want it closed or open.
//(documentation on this one is practically non-existent, sorry)


And last but not least, the lathe. You can set a path, and it will rotate this path around an axis, creating a radially symmetrical object (read: good for apples, oranges, vases, donuts, pipes, etc.).

var geom = new THREE.LatheGeometry(points, segments, phiStart, phiLength)

//Points: An array of Vector3s. Since Lathe rotates around the Z-axis, Y-values can be set to 0.
//Amount of segments (again, determines how smooth it looks)
//Starting angle, and length (default is 0 and 2PI, a full circle)


A nice 3D beveled text every now and then looks really nice. And you can make them, very easily.

var geom = new THREE.TextGeometry(text, parameters)

text: The text that needs to be shown. 
parameters: Object that can contain the following parameters.
	size — Float. Size of the text.
	height — Float. Thickness to extrude text. Default is 50.
	curveSegments — Integer. Number of points on the curves.
	font — String. Font name.
	weight — String. Font weight (normal, bold).
	style — String. Font style (normal, italics).
	bevelEnabled — Boolean. Turn on bevel. Default is False.
	bevelThickness — Float. How deep into text bevel goes. Default is 10.
	bevelSize — Float. How far from text outline is bevel. Default is 8.


If all of that doesn't suit your needs, you can just go the traditional way, and model something in a 3D program (try Blender, it's free, and just as good as the others) and import it to Three.js

Do you like my tutorials?
To keep this site running, donate some motivational food!
Chocolate Milk