Building a World - Game Development with Three.js - page 13

2D primitives
Three.js also has default geometry for 2D shapes as shown in the following table:

Type Constructor Explanation

Plane

THREE.PlaneGeometry(width,
height, widthSegments = 1,
heightSegments = 1)

It is a rectangle with the
specified dimensions. The
segments parameters subdivide
the plane into smaller rectangles.

Circle

THREE.CircleGeometry(radius,
numberOfSides = 8)

It is a regular polygon.

Ring

THREE.RingGeometry(innerRadius,
outerRadius, radialSegments = 8,
ringSegments = 8)

It is a circle with a hole in the
middle.

These shapes are created along the x and y axes by default.

Additionally, Three.js can create lines. Almost all objects you would normally place
in a scene will be meshes, but lines are exceptions. Consider code like the following,
which creates a mesh:

geometry = new THREE.IcosahedronGeometry(200, 2);
material = new THREE.MeshBasicMaterial({color: 0x000000});
mesh = new THREE.Mesh(geometry, material);

Instead of using the preceding code, you could use the code as shown in the
following snippet to create a line:

geometry = new THREE.IcosahedronGeometry(200, 2);
material = new THREE.LineBasicMaterial({color: 0x000000});
mesh = new THREE.Line(geometry, material);

This can create some strange results for standard geometry such as
IcosahedronGeometry because lines will be drawn connecting points in an
unexpected order. Instead, you will usually want to create a custom geometry
so that you can add vertices in your desired order.

Use LineDashedMaterial instead of
LineBasicMaterial to make a dotted line.