最近很久没更新文章了，不是疏于学习了，花了很多时间去整理前端培训的事情去了！最近发现招聘岗位看到好几个需要THREE的经验，想着就把它捡起来重新在Vue项目中写写。在学习的过程中遇到一些坑，今天拿出来跟大家分享一些！

1.OrbitControls轨道控制器

正常在three的包里面就有了，three/examples/js/controls/目录下，但是直接导入的时候是会报错的 这是因为这个文件是没有模块化包装的，在node环境下是直接加载不到THREE构造函数的，所有需要在这个文件的最上面加上。

import * as THREE from 'three'

2.关于图片加载问题

这个里面坑不算多，正常情况下我们一般会把图片放到src目录assets里面， 在使用 var loader = new THREE.TextureLoader(); loader加载的时候第一个参数的url不能直接存放相对路径/绝对路径。如下：

    var loader = new THREE.TextureLoader();
    //在vue里面要使用require来加载并返回一个图片地址，不能直接跟url
    loader.load("../../assets/0011.jpg", function (obj) {
      var geospe = new THREE.SphereGeometry(10, 32, 32);
      var mate = new THREE.MeshBasicMaterial({
        map: obj,
        side: THREE.BackSide,
      });
      var smesh = new THREE.Mesh(geospe, mate);
      scene.add(smesh)
    });
    

你需要把../../assets/0011.jpg使用 require("../../assets/0011.jpg")来加载。原因是webpack在编译打包过程中，将会把src下的所有引用的资源当做模块进行处理。脚手架默认会将图片直接打包到输出项目目录下的/img文件夹中，为了防止命名冲突，还为每张图片重命名。最后将源代码中的src路径进行了篡改。所有直接使用字符串路径加载图片是不行的，还有一个办法就是放到public目录下，使用/开头的绝对路径访问,这个我们稍后会详细提到。

3.关于OBJ和MTL文件的加载问题

这个问题更坑，吸取了之前加载图片的问题，我直接把OBJ和MTL为文件放到public目录下，如下:

在代码中使用

    let objLoader = new OBJLoader();
    let mitLoader = new MTLLoader();
    mitLoader.load("/male02/male02.mtl", function (materials) {
      materials.preload();
      objLoader
        .setMaterials(materials)
        .load("/male02/male02.obj", function (mesh) {
          mesh.position.y = - 95;
          scene.add(mesh);
        });
    });

发现资源能加载，但是mtl文件的对应的贴图怎么都加载不进来，就是上面的目录的几个JPG文件，不应该啊！后面发现它在load直接使用了一个setPath函数去加载路径，后面才找到知道通过这个函数可以告诉mtl文件去哪里寻找对应的叠图资源换成下面代码就好了！如下：

    mitLoader.setPath("/male02/").load("male02.mtl", function (materials) {
      materials.preload();
      objLoader
        .setMaterials(materials)
        .setPath("/male02/")
        .load("male02.obj", function (mesh) {
          mesh.position.y = - 95;
          scene.add(mesh);
        });
    });
    

后续的关于这块分享，我会同步这个博文里面！一起加油学习！ THREE没那么难入门，小伙伴们坚持学下去，肯定是会收获慢慢的！

最后一句：吃苦不是天天大热天的在外面板砖，而是长时间坚持去做一件事情！