09.Geometries geometric figures

introduce

So far we've only used the BoxGeometry class to create our cubes. In this lesson, we'll discover a variety of other geometric shapes, but first, we need to understand what geometric shapes really are.

What is geometry?

In Three.js, geometry consists of vertices (point coordinates in 3D space) and faces (triangles that connect these vertices to create surfaces).
We used geometry to create meshes, but you can also use geometry to form particles for later lessons. Each vertex (single vertex) will correspond to a particle.
We can store much more data than vertex positions. A good example is talking about UV coordinates or normals. We'll look at these in more detail later.

different built-in geometries

Three.js has a lot of built-in geometry. While you don't need to know exactly how to instantiate each one, it's good to know they exist.
All the built-in geometries we'll look at inherit from the BufferGeometry class. This class has many built-in methods such as translate(...), rotateX(...), normalize()etc, but we won't be using them in this lesson.
Most geometry documentation pages have examples.

BoxGeometry creates a box.
PlaneGeometry creates a rectangular plane.
CircleGeometry creates a circle or part of a circle (like a pie chart).
ConeGeometry creates a cone or part of a cone. You can open or close the bottom of the cone.
CylinderGeometry creates a cylinder. You can open or close the ends of the cylinder, and you can change the radius at each end.
RingGeometry creates a flat ring or part of a flat circle.
TorusGeometry creates a ring with a thickness (like a donut) or a portion of the ring.
TorusKnotGeometry creates some kind of geometric knot.
DodecahedronGeometry creates a sphere with 12 faces. You can add detail to rounder spheres.
OctahedronGeometry creates a sphere with 8 faces. You can add detail to rounder spheres.
TetrahedronGeometry creates a 4 sided sphere (it wouldn't be a very big sphere without adding detail). You can add detail to rounder spheres.
IcosahedronGeometry creates a sphere of roughly equal-sized triangles.
SphereGeometry creates the most popular type of sphere, where the faces look like quadrilaterals (a quadrilateral is just a combination of two triangles).
ShapeGeometry creates shapes from paths.
TubeGeometry creates tubes following paths.
ExtrudeGeometry creates an extrusion from a path. You can add and control bevels.
LatheGeometry creates vases or parts of vases (more like a revolution).
TextGeometry creates 3D text. You have to provide font in font json format.

If you need specific special geometry that Three.js doesn't support, you can create your own geometry in JavaScript, or you can make it in 3D software, export it and import it into your project. We'll cover more in a later lesson.

box example

We've made a cube, but we haven't talked too much about the parameters. Most geometries have parameters and you should always check the documentation before using it.
BoxGeometry has 6 parameters :

widthx: dimension on axis
heighty: dimension on axis
depthz: dimension on axis
widthSegmentsx: how many subdivisions the axis has
heightSegmentsy: how many subdivisions the axis has
depthSegmentsz: how many subdivisions the axis has

Subdivision corresponds to the number of triangles that make up the face. By default it is 1, which means there are only 2triangles per face. If you set subdivision to 2, you end up with 8 triangles per face:

const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2)

The problem is that we can't see these triangles.
A good solution is to add wireframe: trueto our material. The wireframe will show the lines separating each triangle:

const material = new THREE.MeshBasicMaterial({
    
     color: 0xff0000, wireframe: true })

As you can see, the face has 8 triangles.
While this has nothing to do with flat cubes, SphereGeometryit gets more interesting when using :

const geometry = new THREE.SphereGeometry(1, 32, 32)

The more subdivisions we add, the closer the graph gets to perfection. But keep in mind that too many vertices and faces can affect performance.

Create your own buffer geometry

Sometimes, we need to create our own geometry. If the geometry is very complex or has a precise shape, it's best to create it in 3D software (we'll cover that in a later lesson), but if the geometry is not too complex, we can build it ourselves by using a BufferGeometry . To create your own buffer geometry, first instantiate an empty BufferGeometry . We will create a simple triangle by example:

// Create an empty BufferGeometry
const geometry = new THREE.BufferGeometry()

To add vertices to a BufferGeometry you have to start with a Float32Array .
Float32Array is a native JavaScript array type. You can only store floating point numbers internally, and the array has a fixed length.
To create a Float32Array , you specify its length before filling it:

const positionsArray = new Float32Array(9)

// First vertice
positionsArray[0] = 0
positionsArray[1] = 0
positionsArray[2] = 0

// Second vertice
positionsArray[3] = 0
positionsArray[4] = 1
positionsArray[5] = 0

// Third vertice
positionsArray[6] = 1
positionsArray[7] = 0
positionsArray[8] = 0

Or you can pass an array:

const positionsArray = new Float32Array([
    0, 0, 0, // First vertex
    0, 1, 0, // Second vertex
    1, 0, 0  // Third vertex
])

As you can see, the coordinates of the vertices are specified linearly. The array is a one-dimensional array where you specify the sum of the first vertex x, then the sum of the second , and so yon . You must convert this array to a BufferAttribute before sending it to a BufferGeometry . The first parameter corresponds to your type array, and the second parameter corresponds to the value of a vertex attribute. As we saw before, to read this array we have to 3 by 3, because the vertex position consists of 3 values ( , and ):zxyz

xyz

const positionsAttribute = new THREE.BufferAttribute(positionsArray, 3)

We can then add this attribute to our BufferGeometry using the method .setAttribute(…) . The first parameter is the name of the property, and the second parameter is the value:

geometry.setAttribute('position', positionsAttribute)

We chose 'position'this name because the Three.js internal shader will look for this value to position the vertex. We'll see more about this in the shaders lesson.
Faces will be created automatically in the order of the vertices.
everything at once:

// Create an empty BufferGeometry
const geometry = new THREE.BufferGeometry()

// Create a Float32Array containing the vertices position (3 by 3)
const positionsArray = new Float32Array([
    0, 0, 0, // First vertex
    0, 1, 0, // Second vertex
    1, 0, 0  // Third vertex
])

// Create the attribute and name it 'position'
const positionsAttribute = new THREE.BufferAttribute(positionsArray, 3)
geometry.setAttribute('position', positionsAttribute)

We can also create a bunch of random triangles:

// Create an empty BufferGeometry
const geometry = new THREE.BufferGeometry()

// Create 50 triangles (450 values)
const count = 50
const positionsArray = new Float32Array(count * 3 * 3)
for(let i = 0; i < count * 3 * 3; i++)
{
    
    
    positionsArray[i] = (Math.random() - 0.5) * 4
}

// Create the attribute and name it 'position'
const positionsAttribute = new THREE.BufferAttribute(positionsArray, 3)
geometry.setAttribute('position', positionsAttribute)

The only thing that might be difficult to understand is count * 3 * 3the parts, but the explanation is simple: we need 50triangles. Each triangle is composed of vertices, and each vertex is composed of values 3 ( x, yand z).

Index Index

One interesting thing about BufferGeometryindex is that you can use this property to reciprocate vertices to form a cube. Multiple faces can use some expected vertices, such as those in the eight corners of a cube. If you look closely, each vertex can be used by a different adjacent triangle. This will optimize for smaller attribute arrays and performance improvements. But we won't cover that part in that lesson.

【Three.js】Chapter 9 Geometries Geometry