Offer to come, dig friends take it! I am participating in the 2022 Spring Recruit Punch card activity. Click here for details.

The sample code uses version three.js-R73: github.com/mrdoob/thre…

In the last section we wrote the basic framework, now let’s load our model in.

Loading JSON model

  • Our map model is in JSON format and we need to use the JSONLoader to load the model, which is already implemented in Threejs for us
  • Instantiate the loader
jsonLoader = new THREE.JSONLoader()
Copy the code
  • JSONLoader, like any other loader, has a load method to load the model after instantiation
  • Loading JSON model
// Load the terrain model
jsonLoader.load(".. /.. /static/models/json/terrain.js".function (geometry) {
  var material = new THREE.MeshBasicMaterial({color: 0xFF0000});
  var mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)
});
Copy the code

  • Our terrain model doesn’t look very clear, we can add wireframes to his materials
var material = new THREE.MeshBasicMaterial({
  color: 0xff0000.wireframe: true.// Open the wireframe
});
Copy the code

  • So it looks a lot clearer

Loading binary model

  • Our car model, our man model, our woman model, they’re all binary models that need to be usedBinaryLoaderTo load the
  • BinaryLoaderThe third-party loader needs to be imported
  • Threejs – models. Vercel. App/js/r73 / load…
  • Instantiate the loader
binaryLoader = new THREE.BinaryLoader();
Copy the code
  • JSONLoader, like any other loader, has a load method to load the model after instantiation
  • Load the binary car model
// Load the car model
binaryLoader.load(
  ".. /.. /static/models/binary/veyron/VeyronNoUv_bin.js".function (geometry) {
    var material = new THREE.MeshBasicMaterial({
      color: 0xffff00.wireframe: true});var mesh = newTHREE.Mesh(geometry, material); scene.add(mesh); });Copy the code

  • Load the binary male model
// Load the male model
binaryLoader.load(
  ".. /.. /static/models/obj/male02/Male02_bin.js".function (geometry) {
    var material = new THREE.MeshBasicMaterial({
      color: 0xff0000.wireframe: true});var mesh = newTHREE.Mesh(geometry, material); scene.add(mesh); });Copy the code

  • Load the binary female model
// Load the female model
binaryLoader.load(
  ".. /.. /static/models/obj/female02/Female02_bin.js".function (geometry) {
    var material = new THREE.MeshBasicMaterial({
      color: 0xff00ff.wireframe: true});var mesh = newTHREE.Mesh(geometry, material); scene.add(mesh); });Copy the code

We give cars, men and women different colors, and it’s easy to see that they are all based on the origin position.

Refactoring load code

Here we can see that when loading the car, man and woman models, except for the different model resources and material colors, all the other codes are the same, resulting in code redundancy. This is a bad habit for a mature programmer to have. So we can refactor our code, optimize our code.

/** * added to the scene via binary model *@param {*} MeshName model name *@param {*} Url model URL *@param {*} MaterialColor materialColor *@param {*} Wireframe Whether to enable wireframe */
function createMeshByBinary({meshName, url, materialColor, wireframe }) {
  binaryLoader.load(url, function (geometry) {
    var material = new THREE.MeshBasicMaterial({
      color: materialColor || 0xff0000,
      wireframe,
    });
    var mesh = new THREE.Mesh(geometry, material);
    mesh.name = meshName;
    scene.add(mesh);
  });
}
Copy the code
  • call
createMeshByBinary({
  meshName: 'Model Man'.url: ".. /.. /static/models/obj/male02/Male02_bin.js".materialColor: 0xff0000.wireframe: true});Copy the code

Codepen sample code