So far, small D is to do where the update to where, also thanks to the friends watching, your watching is the biggest motivation for me

The vertex data for creating geometry can be manually defined, a custom function can be created, or you can use the functions provided by three.js. In this lesson, we will focus on the constructors of 2D or 3D lines and their method properties.

Linear curve (straight line)

  • LineCurve
  • LineCurve3

Arc, ellipse arc

  • EllipseCurve

Spline curve

  • SplineCurve

Three dimensional spline curve

  • CatmullRomCurve3

Bessel curve

  • QuadraticBezierCurve
  • QuadraticBezierCurve3 (three-dimensional quadratic bezier curve)
  • CubicBezierCurve
  • CubicBezier curve (cubic Bezier curve)

Spline curve

  • Set 5 vertices in 3 d space and input 3 D spline curvesCatmullRomCurve3As a parameter, it then returns more vertices. From the returned vertex data, it builds a geometry. Line can be used to draw a smooth spline curve along five vertices.
var geometry = new THREE.Geometry(); // Declare the Geometry of a Geometry object
// 3d spline curve Catmull-Rom algorithm
var curve = new THREE.CatmullRomCurve3([ 
new THREE.Vector3(-50.20.90), 
new THREE.Vector3(-10.40.40), 
new THREE.Vector3(0.0.0), 
new THREE.Vector3(60, -60.0), 
new THREE.Vector3(70.0.80)]);//getPoints is a method of base Curve that returns an array of vector3 elements
var points = curve.getPoints(100); // Segment number 100, return 101 vertices
// The setFromPoints method extracts data from the points to change the geometry's vertices. // Material object
var material = new THREE.LineBasicMaterial({ color: 0x000000 }); Var line = new THREE.Line(Geometry, material); scene.add(line); // Add line objects to the scene
Copy the code

By calling the THREejs spline or Bezier curve API, you can enter a finite number of vertices and return more vertices, then draw a smooth contour curve.

Bessel curve

Bessel curve is different from spline curve in that it has a control point concept.

The parameters p1 and P3 of the quadratic Bezier curve are the starting points, and P2 is the control point, which is not on the Bezier curve.

var p1 = new THREE.Vector3(-80.0.0); 
var p2 = new THREE.Vector3(20.100.0); 
var p3 = new THREE.Vector3(80.0.0); // Three dimensional quadratic Bezier curve
var curve = new THREE.QuadraticBezierCurve3(p1, p2, p3); 
12345
Copy the code

The parameters p1 and P4 of the cubic Bezier curve are the starting points, while P2 and P3 are the control points, which are not on the Bezier curve.

var p1 = new THREE.Vector3(-80.0.0); 
var p2 = new THREE.Vector3(-40.100.0); 
var p3 = new THREE.Vector3(40.100.0); 
var p4 = new THREE.Vector3(80.0.0); Var curve = new THREE.CubicBezierCurve3(P1, P2, P3, p4);
Copy the code

It is easy to understand the curves of straight lines and arcs, and the knowledge of spline curves and Bezier curves can be read in books related to computer graphics, computational geometry and drawing methods. This course mainly explains how to use the API provided by three.js package, but mainly introduces the knowledge of mathematics and graph algorithm. The spline curve execution method getPoints in getPoints code will return a series of vertex data array, vertex color spline function curve distribution. The number of vertices returned is determined by the fine fraction of arguments to method getPoints. You can change the value of the fine score to see the rendering effect of the line. The higher the fine score, the better the rendering effect of the curve. For example, if you set it to 5, you will see 5 straight lines obviously. If you change the line rendering mode to point rendering mode, you will see 6 vertices. points = spline.getPoints(20); GetPoint point = spline.getpoint (0.5); //A position on the curve. Must be in the range [ 0, 1 ].

Function render() {renderer.render(scene, camera); RequestAnimationFrame (render); If (progress > 1.0) {return; } progress += 0.001;} progress += 0.001; console.log(progress); if(curve){ let point = curve.getPoint(progress); if(point&&point.x){ circleP.position.set(point.x,point.y,point.z); }}}Copy the code

Interested friends move your rich finger point attention is good ~