“This is the seventh day of my participation in the First Challenge 2022.

The sample code USES three. Js – r73 version: cdnjs.cloudflare.com/ajax/libs/t…

1. The composition of the three-dimensional world

  • In the computer world, the 3D world is made up of points. Two points can form a straight line, three points that are not on a straight line can form a triangular face, and countless triangular faces can form objects of various shapes

  • This Mesh model is called a Mesh model.
  • When you attach a texture to an object, it gives it color.
  • The result is an infinite number of objects that make up our 3D world.

2. Define a point in three.js

A point in three dimensions can be represented by a coordinate point. A coordinate point consists of x,y, and z components.

THREE.Vector3 = function ( x, y, z ) {
  this.x = x || 0;
  this.y = y || 0;
  this.z = z || 0;
};
var a = new THREE.Vecotr3(1.0.0);
Copy the code
  • In three.js, points can be represented in the right-handed coordinate system:

  • THREE.Vector3Represents a three-dimensional vector containing indices x, y, and z

3. Geometry

  • Geometry uses Vector3 or Color to store Geometry attributes (vertex positions, face information, Color, etc.)
  • A geometry is a data structure that contains the necessary three-dimensional data
    • Points:this.vertices= []
    • Color:this.colors= []
    • Surface:this.faces= []
var geometry = new THREE.Geometry();
geometry.vertices.push(
	new THREE.Vector3( -10.10.0 ),
  new THREE.Vector3( -10, -10.0 ),
  new THREE.Vector3( 10, -10.0));Copy the code

4. THREE.LineBasicMaterial

  • Texture is simply what texture an object looks like. Material can be regarded as the combination of material and texture.
  • In the program, it is the combination of surface visual properties (visual effects), these visual properties are the surface color, texture, smoothness, transparency, reflectivity, refractive index, luminescence, etc.
THREE.LineBasicMaterial = function(parameters)
Copy the code
  • Parameters are a tuple (in JS, an object, consisting of key-values)
  • Color: The color of a line, expressed in hexadecimal notation. The default color is white.
  • Linewidth: The width of a line. The default is 1 unit width. (WebGlRenderer does not support line width)
  • Linecap: The appearance of the ends of a line. The default is the rounded ends. The effect is only visible when the line is thick, but if the line is thin, it is almost invisible.
  • Linejoin: The appearance at the point where two lines join. Default is “round”, indicating rounded corners.
  • LertexColors: Defines whether a line material uses vertex colors. This is a Boolean value. This means that the color of each part of the line is interpolated according to the color of the item points.
  • vertexColors
    • Set to true and use vertex colors. The color of two ends fading into a line
    • Set color to false and do not use color (white by default)

The interpolation

  • Setting different colors on the two ends of a line produces a gradient line. How does the color in the middle of the line come about? There is a concept of interpolation involved.
  • In order to understand interpolation, we also need to understand what color interpolation is, right
  • We define two points (x0, y0) as A and (x1, y1) as B
  • Linear interpolation isy=p1(x)
  • Curve interpolation isy=f(x)

Color interpolation

Below is a color palette, suppose we want to take two points on it, draw a line between the two points, then the color that the line passes through is the color of the line, this is color interpolation.

5. Webgl line drawing method

  • We have a couple of pointsGL_POINTS: v0,v1,v2,v3,v4,v5
  • Draw a line every two pointsGL_LINES:v0-v1,v2-v3,v4-v5
  • Adjacent points are connected and drawn asGL_LINE_STRIP: v0-v1-v2-v3-v4-v5
    • An adjacent point means that the previous point is the starting point of the current segment, also known as a ribbon segment
  • Threejs draws the line usingGL_LINES``GL_LINE_STRIPThese two, the others are not introduced at present

6. Draw a triangle

  • Modify the line drawing code in the previous section by adding a vertex to connect the lines at three points.
  • Make a sketch:

// Create geometry
var geometry = new THREE.Geometry();
// Create a material for the line
// Instead of using vertex colors, use color colors
var material = new THREE.LineBasicMaterial({
    vertexColors: true});// Define the color
var color1 = new THREE.Color(0x444444),
    color2 = new THREE.Color(0xff0000),
    color3 = new THREE.Color(0x00ff00)

// The material of the line can be determined by the color of the 2 dots
var p1 = new THREE.Vector3(-100.0.100);
var p2 = new THREE.Vector3(100.0, -100);
var p3 = new THREE.Vector3(100.0.100);
geometry.vertices.push(p1);
geometry.vertices.push(p2);
geometry.vertices.push(p3);
geometry.colors.push(color1, color2, color3);
/ / create a line
var line = new THREE.Line(geometry, material, THREE.LineStrip);
scene.add(line);
Copy the code

  • Now we only have two lines in our finished graph. Why is that
    • The order in which we draw the lines now isp1-p2Draw a line,p2-p3Draw a line
    • So we also need top3-p1Draw a line
geometry.vertices.push(p1);
geometry.vertices.push(p2);
geometry.vertices.push(p3);
geometry.vertices.push(p1);

geometry.colors.push(color1, color2, color3, color1);
Copy the code
  • The effect at this time

  • Our triangle is drawn!
  • Codepen Example code :04- Composition of a THREE-DIMENSIONAL world (points, lines) (codepen.io)