Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。

示例代码采用three.js-r73版本: github.com/mrdoob/thre…

上一节我们写好了基础框架，下面我们来把我们的模型加载进来。

加载JSON模型

• 我们的地图模型是json格式的，需要使用JSONLoader来加载模型，这个loader在threejs内部已经帮我们实现了
• 实例化loader

jsonLoader = new THREE.JSONLoader()

• JSONLoader和其他loader一样，实例化以后有一个load方法用来加载模型
• 加载JSON模型

// 加载地形模型
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)
});

• 我们的地形模型看起来不是很清楚，我们可以给他的材质添加线框

var material = new THREE.MeshBasicMaterial({
  color: 0xff0000,
  wireframe: true, // 开启线框
});

• 这样看起来就清晰多了

加载二进制模型

• 我们的车模型、男人模型、女人模型，都是二进制模型，需要使用BinaryLoader来加载
• BinaryLoader是第三方loader，需要引入进来
• threejs-models.vercel.app/js/r73/load…
• 实例化loader

binaryLoader = new THREE.BinaryLoader();

• JSONLoader和其他loader一样，实例化以后有一个load方法用来加载模型
• 加载二进制的车模型

// 加载车模型
binaryLoader.load(
  "../../static/models/binary/veyron/VeyronNoUv_bin.js",
  function (geometry) {
    var material = new THREE.MeshBasicMaterial({
      color: 0xffff00,
      wireframe: true,
    });
    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
  }
);

• 加载二进制的男人模型

// 加载男人模型
binaryLoader.load(
  "../../static/models/obj/male02/Male02_bin.js",
  function (geometry) {
    var material = new THREE.MeshBasicMaterial({
      color: 0xff0000,
      wireframe: true,
    });
    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
  }
);

• 加载二进制的女人模型

// 加载女人模型
binaryLoader.load(
  "../../static/models/obj/female02/Female02_bin.js",
  function (geometry) {
    var material = new THREE.MeshBasicMaterial({
      color: 0xff00ff,
      wireframe: true,
    });
    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
  }
);

我们给车、男人、女人不同的颜色，很容易看出来，它们都建立在了原点位置上。

重构加载代码

这里我们可以看出来，在加载车、男人、女人模型时，除了模型资源和材质颜色不一样，其它代码都是一样的，造成了代码冗余。对于一个成熟的程序员来说，这是一个不好的习惯。所以我们可以对我们的代码进行重构，优化我们的代码。 ​

/**
 * 通过二进制模型添加到场景中
 * @param {*} meshName 模型名字
 * @param {*} url 模型url
 * @param {*} materialColor 材质颜色
 * @param {*} 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);
  });
}

• 调用

createMeshByBinary({
  meshName: '男人模型',
  url: "../../static/models/obj/male02/Male02_bin.js",
  materialColor: 0xff0000,
  wireframe: true,
});

codepen示例代码