This is the fourth day of my participation in the August Text Challenge.More challenges in August

Geometry is essentially threejs’s algorithm for generating vertices. If you’re interested, you can open the threejs geometry section of the source code to see how Threejs programmatically generates vertex positions, normal directions and other vertex data.

The basic classes of all Geometry are divided into two categories: Geometry and BufferGeometry, which can be directly transformed into each other. THREE.Geometry is very easy to understand and use. You can add new vertices and define new faces directly to geometry objects, or modify existing faces by modifying existing vertices. The new THREE.BufferGeometry does not have vertices and faces attributes, but only attributes and optional index attributes. For starters, the distinction between these two classes is unnecessary. Without further discussion, let’s take a look at geometry in three.js and how common geometry can be quickly understood and used.

Two dimensional geometry

Two-dimensional geometry looks flat; it has only two dimensions.

Rectangular planeTHREE.PlaneGeometry

The PlaneGeometry object can be used to create a very simple two-dimensional rectangle, and the way to create this geometry is very simple:

let geometry = new THREE.PlaneGeometry( 5, 20, 32 ); 
let material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
let plane = new THREE.Mesh( geometry, material ); 
scene.add( plane );
Copy the code

Constructor: PlaneGeometry(width: Float, height: Float, widthSegments: Integer, heightSegments: Integer)

Width – The width of the plane along the X-axis. The default value is 1. Height – The height of the plane along the Y-axis. The default value is 1. WidthSegments – (optional) the number of widthSegments on a plane. The default value is 1. HeightSegments – (optional) number of heightSegments on a plane. The default value is 1.

If you want to access the geometry’s properties after it has been created, you cannot use plane.width, but use the.parameters property, so to get the width property, you need to go through plane.parameters.width.

Circular planeTHREE.CircleGeometry

From this geometry, we can create a very simple two-dimensional circle or partial circle. Let’s see how it’s used:

let geometry = new THREE.CircleGeometry( 5, 32 ); 
let material = new THREE.MeshBasicMaterial( { color: 0xffff00 } ); 
let circle = new THREE.Mesh( geometry, material ); 
scene.add( circle );
Copy the code

Constructor: CircleGeometry(RADIUS: Float, segments: Integer, thetaStart: Float, thetaLength: Float)

Radius – Radius of a circle. The default value is 1 segments – Number of segments (triangle). The minimum value is 3 and the default value is 8. ThetaStart – The starting Angle of the first segment, which defaults to 0. (Three o’clock position). ThetaLength — The central Angle of the circular sector, often called “θ” (west tower). The default is 2*Pi, which makes it a full circle.

Similarly, if the geometry’s properties are accessed after it has been created, they need to be retrieved via Parameters.

summary

Through these two simple descriptions, we can quickly understand how to create a two-dimensional geometry in three.js and its simple usage. This will be of great help to us in further understanding of THREE ShapeGeometry and THREE RingGeometry.

Three dimensional geometry

The cubeTHREE.BoxGeometry

BoxGeometry is a very simple three-dimensional geometry that can create a cuboid or cube by specifying its width, height and depth.

let geometry = new THREE.BoxGeometry( 1, 1, 1 ); 
let material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); 
let cube = new THREE.Mesh( geometry, material ); 
scene.add( cube );
Copy the code

Constructor: BoxGeometry(width: Float, height: Float, depth: Float, widthSegments: Integer, heightSegments: Integer, depthSegments : Integer)

Width – The width above the X axis. The default value is 1. Height – The height above the Y axis. The default value is 1. Depth – Depth above the Z-axis. The default value is 1. WidthSegments – (optional) number of widthSegments. Default is 1. HeightSegments – (Optional) Number of width segments. Default is 1. DepthSegments – (Optional) Number of width segments. Default is 1.

A sphereTHREE.SphereGeometry

SphereGeometry creates a three-dimensional sphere, which is flexible enough to create any geometry associated with the sphere.

let geometry = new THREE.SphereGeometry( 5, 32, 32 ); 
let material = new THREE.MeshBasicMaterial( {color: 0xffff00} ); 
let sphere = new THREE.Mesh( geometry, material ); 
scene.add( sphere );
Copy the code

Constructor: SphereGeometry(radius: Float, widthSegments: Integer, heightSegments: Integer, phiStart: Float, phiLength: Float, thetaStart : Float, thetaLength : Float)

Radius – The radius of the sphere. The default is 1. WidthSegments – Number of horizontal segments (along the longitude) with a minimum of 3 and a default of 8. HeightSegments – The number of vertical segments (along the latitude), with a minimum value of 2 and a default value of 6. PhiStart – Specifies the starting Angle of the horizontal (warp). Default is 0. PhiLength – Specifies the size of the horizontal (warp) scan Angle. The default is math.pi * 2. ThetaStart – Specifies the vertical (latitude) start Angle. Default is 0. ThetaLength – Specifies the vertical (latitude) scan Angle. Default is math.pi.

The geometry is created by scanning and counting vertices around the Y-axis (horizontal scan) and X-axis (vertical scan). Therefore, incomplete spheres (similar to spherical slices) can be created by setting different values for phiStart, phiLength, thetaStart, and thetaLength to define where we start (or end) computing these vertices.

summary

Three dimensional geometry is used in three.js through two simple solid geometry. Learn how to use, we can further to learn some more complex geometry, for example, is a multilateral body geometry, THREE. TorusGeometry doughnuts and other more flexible solid geometry, of course, the use of flexible is that developers have understanding for it just know how to use, capacity requirements for developers is relatively high.

conclusion

Today we briefly studied a few standard geometries provided by three.js. In Three. js, a lot of geometry can be used out of the box. In the process of use, we can choose a simple material instead of directly using those complex materials, so that we can have a deep understanding of the real shape of geometry.