preface

After loading the model data into the scene via GLTFLoader in the previous chapter, let’s take this data a step further. Firstly, the model is classified. The whole model can be divided into three types: CITY_UNTRIANGULATED, ROADS and other. Different materials are added to different data.

Model wireframes added

The model material is divided into two parts, the first part is the wire frame material of the model, the second part is the surface material of the model, first of all, the wire frame material

  1. Wire frame material: YesThreetheEdgesGeometryYou can generate the wireframe data of the model, use LineBasicMaterial to generate the wireframe model material, and then useLineSegmentsCombine these two data to create a production line frame model object.
              // Get the Geometry of the model line box, where child-. Geometry is the node data of the model's subobjects
              const edges = new THREE.EdgesGeometry(child.geometry, 1);
              // Set the material of the model
              const lineMaterial = new THREE.LineBasicMaterial({
                // Line color
                color: "Rgba (38133254)"});// Combine the data
              const lineS = new THREE.LineSegments(edges, lineMaterial);
              // Set the location of the data
              lineS.position.set(
                child.position.x,
                child.position.y,
                child.position.z
              );
              // Add to the scene
              scene.add(lineS);
Copy the code

Effect:2. Model surface material: The model surface material is selected hereThreePhysical material ofMeshPhysicalMaterialClass, this class can simulate the texture of glass.

              // Model surface material
             const material = new THREE.MeshPhysicalMaterial({
                / / color
                color: "RGB (50170255)"./ / metal
                metalness: 0.5./ / roughness
                roughness: 0.1./ / transparency
                transmission: 0.9.// Whether the model is transparent
                transparent: true});// Generate model objects
              const mesh = new THREE.Mesh(child.geometry, material);
              // Add to the scene
              scene.add(mesh);
Copy the code

Effect:

Ground and road material Settings

The basic material class MeshBasicMaterial was chosen for the road and ground

             / / the way
              const material = new THREE.MeshBasicMaterial({
                color: "RGB (41,46,76)"});const mesh = new THREE.Mesh(child.geometry, material);
              scene.add(mesh);
              / / the ground
              const material = new THREE.MeshBasicMaterial({
                color: "# 040912"});const mesh = new THREE.Mesh(child.geometry, material);
              scene.add(mesh);

Copy the code

Effect:

The complete code

 addGLTF() {
      const loader = new GLTFLoader();
      loader.load("shanghai.gltf".(gltf) = > {
        gltf.scene.traverse((child) = > {
          // Set the wireframe material

          if (child.isMesh) {
            // This determines whether the model is a building or a different material
            if (["CITY_UNTRIANGULATED"].includes(child.name)) {
              // Get the Geometry of the model line frame
              const edges = new THREE.EdgesGeometry(child.geometry, 1);
              // Set the material of the model
              const lineMaterial = new THREE.LineBasicMaterial({
                // Line color
                color: "Rgba (38133254)"});// Combine the data
              const lineS = new THREE.LineSegments(edges, lineMaterial);
              // Set the location of the data
              lineS.position.set(
                child.position.x,
                child.position.y,
                child.position.z
              );
              // Add to the scene
              scene.add(lineS);
              lineS.rotateX(-Math.PI / 2);
              // Model surface material
              const material = new THREE.MeshPhysicalMaterial({
                / / color
                color: "RGB (50170255)"./ / metal
                metalness: 0.5./ / roughness
                roughness: 0.1./ / transparency
                transmission: 0.9.// Whether the model is transparent
                transparent: true});// Generate model objects
              const mesh = new THREE.Mesh(child.geometry, material);
              // Add to the scene
              scene.add(mesh);
              mesh.position.set(
                child.position.x,
                child.position.y,
                child.position.z
              );

              mesh.rotateX(-Math.PI / 2);
            } else if (["ROADS"].includes(child.name)) {
              / / the way
              const material = new THREE.MeshBasicMaterial({
                color: "RGB (41,46,76)"});const mesh = new THREE.Mesh(child.geometry, material);
              mesh.rotateX(-Math.PI / 2);
              mesh.position.set(
                child.position.x,
                child.position.y,
                child.position.z
              );
              scene.add(mesh);
            } else {
              / / the ground
              const material = new THREE.MeshBasicMaterial({
                color: "# 040912"});const mesh = new THREE.Mesh(child.geometry, material);
              scene.add(mesh);
              mesh.rotateX(-Math.PI / 2); mesh.position.set( child.position.x, child.position.y, child.position.z ); }}// Set the wireframe material
        });
      });
    },
Copy the code

Project address: github.com/lixiaochjaj…