1. Create a base scene including scene Scene, PerspectiveCamera, OrbitControls, PointLight, HemisphereLight, WebGLRenderer, And today’s main FBXLoader FBX loader

The background color is set to 0xf65144

scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x000000.600.3000); // Atomization scenario
scene.background = new THREE.Color(0xf65144);
Copy the code

Set the perspective camera position to face the x axis

camera = new THREE.PerspectiveCamera(
  45.window.innerWidth / window.innerHeight,
  1.10000
);
camera.position.set(0.0.200); // Set the camera position
Copy the code

Hemispherical light source and point light source are used for lighting

Hemispheres are used to render the color of the entire scene, and point lights are used to render model highlights

// Set lighting
/ / half light
const hemisphereLight = new THREE.HemisphereLight(
  0xffffff.0x444444.1
);
// hemisphereLight.position.set(0, 200, 0);
scene.add(hemisphereLight);
/ / the point light source
light = new THREE.PointLight(0xffff00.2.100);
light.position.set(0.0.0);
scene.add(light);

Copy the code

.

After all the basic elements are created, you can see a scene like this on the page

Download to use the FbxLoader

File reference

<script src=".. /.. /.. /three.js-master\examples\js\loaders\FBXLoader.js"></script>Copy the code

Because it is written in HTML code, so the path is the relative path of the current file, can be changed according to their own file location

The FBX loader is available on the official website. I won’t go into details here, but will focus on materials and textures

// Model address
const url = ".. / model/fang binxing/beats headphones/source/beats_highpoly. Fang binxing"
const loader = new THREE.FBXLoader()
loader.load(
  url,
  function (loadedModel) {
    console.log(loadedModel);
    mesh = loadedModel.children[0].clone(); scene.add(mesh); });Copy the code

There was a minor problem with loading, the inflate.min.js file that FBX relies on could not be found

Intflate.min.js needs to be introduced in js

      <script src=".. /.. /.. /three.js-master\examples\js\loaders\FBXLoader.js"></script>
      <script src=".. /.. /.. /three.js-master\examples\js\libs\inflate.min.js"></script>
Copy the code

After loading, you can see that there is no material modification or mapping of the model, and the material itself is black

So in the code above, let’s print out loadedModel is a group object, group object has no material, and it’s not the model object that we’re going to load, so if you look at the result in the children of the group object, we have a mesh object, and this is the object that we need to render, If I print it, I can see the Material object

The material of the model itself is a Phong mesh material

This texture will be selected later

The first thing to do is to load a map as a texture, using the TextureLoader

const textureLoader = new THREE.TextureLoader();
const textureUrl = ".. / model/fang binxing/beats headphones/textures/beats_red PNG"
const textureNormal = textureLoader.load(
  textureUrl
);
Copy the code

Original texture style

This picture is generated by some means when 3D engineers export the project. Interested children can follow the 3D engineers around to understand

As for each texture point, each position can be corresponding to the model, which is also calculated during 3D engineering generation, and can be used as the front end only

The next step is to re-render the model with materials

mesh = loadedModel.children[0].clone();
mesh.material = new THREE.MeshPhongMaterial({
  color: 0x00ffff,
})
console.log(mesh);
scene.add(mesh);
Copy the code

Give it a try

It is not hard to see by the color that has been changed, and you can make changes to the material of the model

The next step is to combine our loaded texture map with the model,

The 3D engineer will give you a 3D project with a lot of maps, such as glow map, bump map, color map, environment map, etc…

You can see from this that the default is null, which means that the material mapping was not done before. You can also check the function of the material mapping on the official website

This time we are going to re-render the map color map

So set the map to textureNormal as defined earlier

 // Model address
const url = ".. / model/fang binxing/beats headphones/source/beats_highpoly. Fang binxing";
const loader = new THREE.FBXLoader();
loader.load(url, function (loadedModel) {
  const textureLoader = new THREE.TextureLoader();
  const textureUrl =  ".. / model/fang binxing/beats headphones/textures/beats_red PNG"
  const textureNormal = textureLoader.load(
    textureUrl
  );
  mesh = loadedModel.children[0].clone();
  mesh.material.map = textureNormal
  console.log(loadedModel.children[0]);
  scene.add(mesh)
});
Copy the code

Then we can change the presentation of the model material with a few tweaks

The attribute Shininess in mesh. Material controls the degree of highlight display, which can be controlled to modify the specific degree of highlight display

The first thing to adjust is the light. We only set the light before, but did not adjust the lighting position

/ / set the light/light/hemisphere const hemisphereLight = new THREE. HemisphereLight (0 x7f0900 0 xffaea8, / / the sky color, / / a ground color 1 / / light intensity). hemisphereLight.position.set(0, 50, 60); scene.add(hemisphereLight); // spotLight const spotLight = new THREE.SpotLight(0xffFFFF); spotLight.position.set(100, 60, 100); scene.add(spotLight); const spotLightHelper = new THREE.SpotLightHelper(spotLight); scene.add(spotLightHelper);Copy the code

In the render animation, switch the point light source to one position so that you can adjust the highlights in different positions

function animate() { requestAnimationFrame(animate); Const time = date.now () * 0.0005; If (light) {light.position.x = math. sin(time * 0.7) * 50; // light.position.y = math. cos(time * 0.3) * 50; Light. Position. z = math. sin(time * 0.5) * 50; } renderer.render(scene, camera); }Copy the code

The final adjustment effect is as follows:

The code address

html

model

map