“This is the 27th 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…

We successfully loaded the model in the previous section, but we didn’t say much about the materials and loader methods used to load the model. So let’s see.

Lambert mesh material

  • Used when we load the modelMeshLambertMaterialThe material
var material = new THREE.MeshLambertMaterial({ color: 0xffffff.side: THREE.DoubleSide });
Copy the code

Side attribute parsing

  • Here we create a base material (rough plane) using the Side property, which has three values
THREE.FrontSide = 0;  // Draw the front
THREE.BackSide = 1; // Draw after
THREE.DoubleSide = 2; // Draw on both sides
Copy the code
  • When we show the model, we have the front side and the back side, if we only draw one side, when we rotate it, we might not see the other side, so we use two sides here.
  • Let’s say we have a triangle, and it has two sides, and if we only draw the heads, then all we’ll see is the heads, just the tails and the same thing.

  • On our model, we set the camera to a smaller position, so we can go into the belly of the rabbit
camera.position.z = 0.001;
Copy the code

  • Now we’re actually looking inside the rabbit
  • When we set side toTHREE.FrontSide“, we can’t see the inside, we can only see the outside of the rabbit by zooming

  • When we pull the camera away, set side toTHREE.BackSideYou can only see the inside of the rabbit
  camera.position.z = 0.2;
Copy the code

  • So if we want to see both inside and out, we’re going to set side toTHREE.DoubleSide, this is still quite magical, only their own operation to understand

Material issue

  • What we’re using now isMeshLambertMaterialMaterial, this material can reflect light evenly, so you need lights
  • If we useMeshBasicMaterialFor the material, no light is required, but only simple coloring can be done, and our model will look like this

  • So the choice of material is also very important

VTKLoader

  • We loaded the VTK model file and used itVTKLoader, currently in useurlandonLoadThe callback function, which actually takes two arguments
    • Url: indicates the resource path
    • OnLoad: loads the completion callback function and returnsgeometry
    • OnProgress: indicates the loading progress
    • OnError: indicates an error message

There may be slight differences between versions, but the current version is R73.

Geometry normals

loader.load(".. /.. /static/models/vtk/bunny.vtk".function (geometry) {
    geometry.computeVertexNormals();
    var mesh = new THREE.Mesh(geometry, material);
    mesh.position.setY(- 0.09);
    scene.add(mesh);
});
Copy the code
  • We got the model resourcegeometry, need to passgeometry.computeVertexNormals()To compute the normals of each vertex
  • becauseMeshLambertMaterialIt’s an illuminated material. When the light hits itgeometryYou need normals on it to reflect light. If you ignore the algorithm vector, you can’t see the object.

Model location problem

  • We load the model, create the grid, and set a location for the grid
  mesh.position.setY(- 0.09);
Copy the code
  • If this position is not set, our model will be displayed above the scene

  • And that’s because, when you model it, it’s not at (0,0,0), it’s up a little bit, so sometimes the model you get is not necessarily at the origin, it might be somewhere else or rotated and so on

conclusion

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

  • Lambert mesh material
    • Side attribute parsing
    • Material issue
  • This section describes the VTKLoader properties
  • Model location problem