Geometry provided by the Three.js

1. Simple geometry

The slightly simpler geometry provided by Three.js includes: planegeometry (planar), circlegeometry (round), shapegeometry (plastic), cubegeometry (Cube), Cylindergeometry (cylinder), torusgeometry (ring), torusknotgeometry (Kink), Polyhedrongeometry (Multipatch), Icosahedrongeometry (20-face), octahedrongeometry (eight-faceted), tetrahedrongeometry (tetrahedron).

The slightly more complex geometry includes: convexgeometry (convex body), lathegeometry (swept body), extrudegeometry (stretched geometry), Tubegeometry (Tubular) parametergeometry (parametric geometry), textgeometry (text geometry).

2. Two d geometry planegoemetry

The planegeoemtry is a planar geometry of the moment shape, and the initialization is simple and requires 4 parameters:

New Three. Planegeometry (10, 14, 4, 4)

4 parameters are width, height, widthsegment, heightsegment, respectively. Where widthsegment specifies that the width of the rectangle should be divided into segments, which are divided into 4 segments in the width and height directions. As shown below:

3. Display the face and mesh structure of the geometry at the same time

You can add multiple materials to the geometry by THREE.SceneUtils.createMultiMaterialObject, which also shows the mesh structure by the color of the display face. The implementation code can refer to the following:

var New three. Meshnormalmaterial ();                 = three. doubleside;                 var New three. Meshbasicmaterial ();                 true ;                 var plane = three. Sceneutils.createmultimaterialobject (new three. Planegeometry (Ten, 4, 4), [Meshmaterial, Wireframemat]);

The first parameter of the Createmultimaterialobject function is a geometry object, and the second parameter is an array of materials that can be passed more than one. In fact, the result is multiple objects, but all overlap.

4.CircleGeometry

It is easy to understand that Circlegeoemtry is used to draw plane elements. Properties include:

attribute/is required/description
radius/is/defines the radius of the circle
Segments (segment)/no/define the number of polygons to create a circle, with a minimum of three. If you do not specify a default of 8
Thetastart (start angle)/no/define where to start to draw the circle. Value from 0 to 2*pi
Thetalength (angle)/no/define how large the circle will take. If not specified, the default is 2*pi full circle. One-fourth circles if specified as 0.5PI

5.ShapeGeometry

Planegeometry and Circlegeometry have only limited methods to customize their appearance. If you want to create a custom two-dimensional graphic, you can use Shapegeometry. Shapegeometry no more than the option to customize the graphics. A shape shape is typically created first. Draw with shape graphics. The function drawing functions provided by the Shape object include:
MoveTo (x, y)/move the plot point to the X, Y coordinates
LineTo (x, y)/Draw a line from the current position to the specified x, y coordinates
Quadricurveto (ACPX, acpy, X, Z) (two-time surface)/define surface, you can use the Quadraticcurveto function or the Beziercurveto function to draw the surface.
Beziercurveto (aCPx1, ACPy1, aCPx2, ACPy2, x, y)/Draw a curve. The curve is drawn based on the coordinates of the two defined curves and the focal coordinates (x, y). The starting point is the current position.
Splinethru (pts)/This function draws an Guanghua curve along the provided set of coordinates. This parameter should be an array of Three.vector2 objects
Arc (ay, Ay, Aradius, Astartangle, Aendangle, aclockwise)/Draw a circle or an arc. The arc starts at the current position. Ax and ay are used to specify the offset between the center and the current position. Aradius sets the circle size, and Astartagnle and Aendangle define how long the arc should be drawn. Boolean acockwise Determines whether this arc is clockwise or counterclockwise
Absarc (Ay, ay, Aradius, Astartangle, Aendangle, aclockwise)/reference arc, whose position is absolute, not relative to the current position
Ellipse (AX, AY, Xradius, Astartangle, Aendangle, aclockwise))/reference arc. As a supplement, the x-axis radius and the y-axis radius can be set separately through the Ellipse function
Absellipse (AX, AY, Xradius, Yradius, Astartangle, Aendangle, aclockwise)/refer to Ellipse description. Position is absolute, not relative to the current position

Shape object properties Holes, you can make several holes in the graph by adding Thee.shape objects to this property in China. The Shape object itself also has several auxiliary functions that can create geometry in Yongan. As shown below:

makegeometry/the function returns a Shapegeometry object from the Shape object
Createpointsgeometry (divisions)/Change the function to convert the graph into a point set. Attribute Divisions segment number defines the number of return points
Createspacedpointsgeoemtry (divisions)/This function converts a graph to a point set, but this time, the number of segments is applied once to the entire path
If you create a point set with the Createpointsgeometry or Createspacedpointsgeometry function, you can create segments with these points
New three. Line (Shape.createpointsgeometry), new three. Linebasicmateial ({color:0xff3333, linewidth:2})

6.SphereGeometry

This geometry is very flexible and can be used to create all the geometry related to the sphere. The properties in the following table can be used to adjust the appearance of the result grid:

attribute/is required/description

radius/No/This property sets the radius of the sphere

widthsegments/No/Specifies the number of segments in the vertical direction. Default is 8, minimum is 2

hieghtsegments/No/Specifies the number of segments in the horizontal direction. Default is 6, minimum is 2

phistart/no/Specifies where to start drawing from the x-axis. Values range from 0 to 2*pi. Default is 0

philength/no/Specifies how much to draw starting from Phistart. 2*pi is the whole ball, 0.5*pi is One-fourth.

thetastart/no/Specifies where to start drawing from the y-axis. Values range from 0 to pi. Default is 0

thetalength/specifies how much to draw starting from Theata. Pi is solicit, 0.5PI will only draw the upper hemisphere

7.CylinderGeometry

When creating cylindergeometry, there are no parameters that must be supplied. Call new three directly. Cylindergeometry () creates a cylinder. The list of attributes is as follows:

radiustop/cylinder top Dimension, default is 20

radiusbottom/set the size of the bottom of the cylinder, which is 20 by default

The Height/property sets the height of the cylinder, which defaults to 100

Segmentsx/This property sets how many segments are divided along the x-axis, and the default is 8. The larger the number, the smoother the cylinder

segmentsy/This property sets how many segments to divide along the y-axis

openended/Specifies whether the top and bottom of the grid are closed. Default is False

8.TorusGeometry

The torus ring is a simple figure that looks like a doughnut. Create Torusgeometry There are no parameters that must be supplied. The parameter list is:

radius/set the size of the complete ring by default to 100

The tube/setting is the radius of the pipe. Default is 40

radialsegments/This parameter sets the number of segments to be divided along the length of the ring. Default is 8

tabularsegments/This parameter sets the number of segments that are split along the width of the ring. Default is 6

arc/through this property value, can Confucius draw a complete circle. Default is 2*pi

9.ConvexGeometry

The convexgeometry can be used to create a convex outside a set of points. The so-called convex is the smallest figure that surrounds this set of points. As in the following code, a random set of points is created, using the new three. Convexgeometry (points) initializes the package face graph.

functiongeneratepoints () {varPoints = [];  for(vari = 0; I < 20; i++){                    varRANDOMX = 15 + 30 *Math.random (); varrandomy = 15 + 30 *Math.random (); varRANDOMZ = 15 + 30 *Math.random (); Points.push (Newthree.                Vector3 (RANDOMX, randomy, Randomz)); } SPGroup=Newthree.                Object3d (); varMaterial =NewThree. Meshbasicmaterial ({color:0xff0000, wireframe:true}); Points.foreach (function(point) {varSpheregeometry =NewThree. Spheregeometry (0.2); varMesh =Newthree.                    Mesh (spheregeometry, material);                    Mesh.position.copy (point);                Spgroup.add (mesh);                });                Scene.add (SPGroup); varHullgeometry =Newthree.                Convexgeometry (points); Hullmesh=Createmesh (hullgeometry);            Scene.add (Hullmesh); }

10.TubeGeometry

Tubegeometry stretches a pipe along a three-dimensional spline curve. You can define the path by specifying a vertex, and then tubegeometry can create the pipe. As in the following code:

functiongeneratepoints (points, segments, radius, radiussegments, closed) {SPGroup=Newthree.                Object3d (); varMaterial =NewThree. Meshbasicmaterial ({color:0xff0000, transparent:false}); Points.foreach (function(point) {varSpgeom =NewThree. Spheregeometry (0.2); varSpmesh =Newthree.                    Mesh (spgeom, material);                    SpMesh.position.copy (point);                Spgroup.add (Spmesh);                });                Scene.add (SPGroup); varTubegeometry =NewThree. Tubegeometry (Newthree.                SplineCurve3 (points), segments, radius, radiussegments, closed); Tubemesh=Createmesh (tubegeometry);            Scene.add (Tubemesh); }

Points is a set of Vector3 collections, but tubegeometry cannot be used directly and must be converted to Three.splinecurve3 to create splines. And this parameter is more than a pass. Other properties are listed below:

attribute/whether must/description

path/Yes/This property specifies the path that the pipeline should follow with a Three.splinecurve3 object

segments/no/pipe all segments. Default 64. The longer the path, the more the number of segments you specify should be

radius/no/pipe radius, default is 1

radiussegments/the number of segments of the pipe circumference. The default is 8. The more segments, the smoother the pipe looks.

Closed/No/If true, the head and tail of the pipe will be connected together. Default is False

11.textGeometry

The creation code for the text geometry can be referenced as follows:

 This. Asgeom =function() {scene.remove (Text1);                Scene.remove (TEXT2); varoption ={size:controls.size, height:controls.height, Weight:cont                    Rols.weight, Font:controls.font, BevelThickness:controls.bevelThickness, BevelSize:controls.bevelSize, BevelSegments:controls.bevelSegments, Beve LEnabled:controls.bevelEnabled, CurveSegments:controls.curveSegments, steps:contr Ols.steps} Text1= Createmesh (NewThree. Textgeometry ("Learning", option)); Text1.position.z=-100; TEXT1.POSITION.Y= 100;                Scene.add (Text1); Text2= Createmesh (NewThree. Textgeometry ("Three.js", option));            Scene.add (TEXT2); }

As with other geometry creation methods, just call new three when initializing. Textgeometry object, the first argument is the passed text. The second parameter is the property of the geometry. The list of attributes is as follows:

attribute/whether must/description

size/No/Specifies the size of the text. Default 100

height/No/Specifies the extent of the stretch. Default is 50

weight/no/Specifies the weight of the font. The optional value is normal, bold. Default Normal

font/No/Specifies the name of the font to use. Default is Helvetiker

style/no/font style. Optional values include normal, italic. Default is Normal

Bevelthickness (bevel thickness)/no/Specifies the depth of the bevel. A bevel is a chamfer between the front and back faces and the extruded faces. Default is 10

Number of segments bevelsegments (number of bevel segments)/bevel. Default is 3

bevelsize/No/Specifies the height of the bevel. Default is 8

bevelenabled/no/If set to true, there will be a bevel. Default is False

Curvesegments (number of curve segments)/no/define stretch body is divided into several segments. The default is 1.

Steps (number of extruded body segments)/no/Lahan divided into how many segments. Default is 1

extrudepath/no/Specifies what path the graphic stretches along. If not specified, the graphic is stretched along the z-axis

material/the index of the material used before the definition. Create a mesh with function THREE.SceneUtils.createMultiMaterialObject

Extrudemateria (extruded material)/no/Specifies the index of the material used for the bevel and extruded bodies. Create a mesh with function THREE.SceneUtils.createMultiMaterialObject

12 Adding a custom font

Three.js provides several fonts that you can use in your scene. These font technologies are fonts provided by Typeface.js (http://typeface.neocracy.org). Typeface.js is an ability to convert TrueType and OpenType fonts into JavaScript libraries. The converted JavaScript files can be included in your page and then used in Three.js.

To convert an existing OpenType or TrueType font, you can use the Web http://typeface.neocracy.org/fonts.html. You can upload a font to this website and it will convert the font to JavaScript. To include this font. Just refer to this JavaScript file at the top of the HTML page.

13. Using the two-yuan operation to combine the grid

We can combine the standard geometry to create a new geometry. To implement this feature, we can use the Three.js extension library threebsp. As: Https://github.com/skalnik/ThreeBSP. This extension library provides three functions:

Intersect (intersect)/can create new geometry at the intersection of two geometries. The new geometry is the place where two geometries overlap one another

Union (Union)/combine two geometries to create new geometry. You can compare this function to the Mergegeometry function

Subtract (subtract)/can subtract two overlapping parts of geometry in the first geometry, creating new geometry

The following code is code that uses threebsp, and it is simpler to use:

functionRedrawresult () {Showspinner (); //asynchronous execution to avoid locking threadsSetTimeout (function() {scene.remove (result); varSPHERE1BSP =Newthreebsp (Sphere1); varSPHERE2BSP =Newthreebsp (Sphere2); varCUBEBSP =Newthreebsp (Cube); varresultbsp; Switch(controls.actionsphere) { Case"Subtract": resultbsp=sphere1bsp.subtract (SPHERE2BSP);  Break;  Case"Intersect": resultbsp=Sphere1bsp.intersect (SPHERE2BSP);  Break;  Case"Union": resultbsp=sphere1bsp.union (SPHERE2BSP);  Break;  Case"None":                         Break; }                if(!resultbsp) resultbsp =sphere1bsp; Switch(controls.actioncube) { Case"Subtract": resultbsp=cubebsp.subtract (RESULTBSP);  Break;  Case"Intersect": resultbsp=Cubebsp.intersect (RESULTBSP);  Break;  Case"Union": resultbsp=cubebsp.union (RESULTBSP);  Break;  Case"None":                         Break; }                if(Controls.actioncube = = = "None" && controls.actionsphere = = = "None"){                }Else{result=Resultbsp.tomesh ();                    Result.geometry.computeFaceNormals ();                    Result.geometry.computeVertexNormals ();                Scene.add (result);            } hidespinner (Spinner); }, 200); }

To use an arithmetic function, you need to convert the geometry to a threebsp object. The final result of code resultbsp = Sphere1bsp.subtract (sphere2bsp) is the geometry that is left after the sphere1bsp geometry is subtracted and sphere2bsp overlapping portions.

Call result directly when the operation is complete. Bsp.tomesh () function to get the grid. However, you also need to call the Computefacenormals and computevertexnromals functions, because the normal vector of the Geometry Center store and polygon may change after you perform a two-dollar operation. Three.js uses the polygon and vertex normal vectors in the shader. The explicit recalculation of polygon and vertex normals ensures that the newly generated object is shaded smoothly.

Geometry provided by the Three.js