“This is the 23rd 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…

Now that we’ve covered the basics of texture, let’s talk about geometry. Let’s start by drawing a rectangle.

Draws a wireframe rectangle

  • Our previous code deleted the lighting part of the code andinitObjectThe related logic can be
  • We will use the following:
    • PlaneGeometry: THREE
    • Base material: THREE.MeshBasicMaterial
    • Color: THREE Color

​

  1. Let’s start by defining a plane geometry
// Create a plane geometry
geometry = new THREE.PlaneGeometry(100.100)
Copy the code
  • The geometry has four parameters. The first two parameters define the width and height, and the second two parameters define the segments
  1. Then define a base material
// Define the material
let material = new THREE.MeshBasicMaterial({
    vertexColors: THREE.VertexColors, // The texture color takes the vertex color
    wireframe: true.// Render the geometry as a wireframe
    color: 0xff0000 // Define the color
})
Copy the code
  • wireframeWhen you open the wireframe, you can see which lines the geometry is made of
  • We used the color parameter, vertexColors is not in effect at this time, we first show the geometry and then remove it
  1. Define the grid and add it to the scene
let object = new THREE.Mesh(geometry, material)
scene.add(object)
Copy the code

Display effect:

  • Our rectangle is actually made up of two triangles, and the diagonal line in the middle is deeper than the other lines because the lines of the two triangles overlap.
  • Let’s see from the consolegeometryParameter composition in

  • We can see that our rectangle is made up of four vector vertices, two faces, and each of the vertices has an index value, like the following, and each of the three vertices makes up a face counterclockwise.

Draw a colored rectangle

With the foundation above, we give each face**vertexColors**Add the corresponding vertex color to draw a colored rectangle

  • Since we have three vertices forming a face, we can define three colors
// Define three colors
var color1 = new THREE.Color(0x00900f)
var color2 = new THREE.Color(0x0000f0)
var color3 = new THREE.Color(0x20f0ff)
Copy the code
  • Loop add adds vertex colors to faces
 for (var i = 0; i < geometry.faces.length; i++) {
      var f = geometry.faces[i] / / for surface
      // Add a color to each vertex in the face
      f.vertexColors[0] = color1
      f.vertexColors[1] = color2
      f.vertexColors[2] = color3
  }
Copy the code
  • Remove the color definition from the material
let material = new THREE.MeshBasicMaterial({
    vertexColors: THREE.VertexColors,
    wireframe: true.// Render the geometry as a wireframe
    // color: 0xff0000
})
Copy the code
  • See the effect

The rectangle that we’re drawing is still wireframewireframetofalseAnd look at the effectAnd we’re done with our colored rectangle.

panel

  • Previously definedgeometryThere are still two segmented parameters that have not been used, so let’s use them to see what happens
  • Modify thePlaneGeometryDefinition, changed to width and height 300, width divided into 2 parts, height divided into 3 parts
geometry = new THREE.PlaneGeometry(300.300.2.3)
Copy the code

The last two parameters are actually used to divide our rectangle, and it works fine.

Codepen sample code

conclusion

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

  • Draws a wireframe rectangle
  • Draw a colored rectangle
  • panel