4. Polyhedrons (multi-p...
5. Cilinders and Tubes
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)
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