(click anywhere to close)
OPEN MENU

[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 onesready 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!

Box

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);

Sphere

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. Thephi start and length determine the amount of vertices sweeping around the Y-axis. Thetheta start and length determine those around the Z-axis.

Plane

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)

LatheGeometry

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)

TextGeometry

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.
*/

However..

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

CONTINUE WITH THIS COURSE
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)