“This is the 24th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

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

In the last video we drew a rectangle, what if we wanted to draw a triangle? Let’s take a look.

Why custom triangles

  • If you want to draw a triangle, look at the threejs source code
  • We found a triangle related definition
// File:src/math/Triangle.js

/ * * *@author bhouston / http://clara.io
 * @author mrdoob / http://mrdoob.com/
 */

THREE.Triangle = function ( a, b, c ) {

	this.a = ( a ! = =undefined)? a :new THREE.Vector3();
	this.b = ( b ! = =undefined)? b :new THREE.Vector3();
	this.c = ( c ! = =undefined)? c :new THREE.Vector3();

};
Copy the code
  • The triangle defined here is a data structure composed of three vectors, which is not a geometry and cannot represent geometry. Therefore, we have to realize the drawing of the triangle by ourselves

Draw colored triangles

  1. Let’s create the base one firstGeometryThe triangle that describes us
geometry = new THREE.Geometry(300.300.2.3)
Copy the code
  1. Creating the base Material
// The texture color takes the vertex color
let material = new THREE.MeshBasicMaterial({
    vertexColors: THREE.VertexColors,
    wireframe: false.// Render the geometry as a wireframe
})
Copy the code
  1. Define three colors
// Define three colors
var color1 = new THREE.Color(0xff0000)  / / red
var color2 = new THREE.Color(0x00ff00) / / green
var color3 = new THREE.Color(0x0000ff) / / blue
Copy the code
  1. Define three vertices on the same surface
// Define three vertices
var p1 = new THREE.Vector3(100.0.0)
var p2 = new THREE.Vector3(0.100.0)
var p3 = new THREE.Vector3(-100.0.0)
Copy the code
  1. Add vertices to the geometric vector array
geometry.vertices.push(p1)
geometry.vertices.push(p2)
geometry.vertices.push(p3)
Copy the code
  1. Create surfaces based on vertices

The vertices we added are drawn on the graph (not on the z-axis), in the order in which the vertices were added our index order should be (0,1,2).

// Create a face with vertex indexes 0, 1, 2
var face = new THREE.Face3(0.1.2)

Copy the code
  • THREE.Face3You can create triangles and use them in Geometry
  • Why use vertex indexing to create surfaces?
    • Because one integer is 4 bytes, one vertex is 12 bytes, three vertices are 36 bytes, and one face is 12 bytes
    • Using an index saves 24 bytes of space, and even more if multiple vertices are reused, improving space utilization
  1. Add color to each vertex in the face
face.vertexColors[0] = color1
face.vertexColors[1] = color2
face.vertexColors[2] = color3
Copy the code
  1. Add the noodles togeometry, and then create a grid model to add to the scene
// Add faces to Geometry
geometry.faces.push(face)
let object = new THREE.Mesh(geometry, material)
scene.add(object)
Copy the code

Final display effect:And now we have our colored triangle.

Codepen sample code

conclusion

In this section, we mainly talk about the following contents:

  1. Why custom triangles
  2. The process of drawing colored triangles
    1. Create Geometry
    2. Creating the base Material
    3. Define three colors
    4. Define three vertices
    5. Add vertices to the Geometry vector array
    6. Create surfaces based on vertices
    7. Add color to each vertex of the face
    8. Add faces to Geometry
    9. Create a grid
    10. Add to the scene