Threejs 在加载模型和材质遇到的坑

今天在使用 Vue 和 Threejs 结合的项目里遇到了一些坑，记录下来。

模型加载

Threejs 在加载 obj 和对应的 mtl 文件及 mtl 中的贴图的时候需要注意几点：

1. obj 和 mtl 及其贴图所在的目录需要开启服务，可以使用 http-server 在 src 所在目录用

cd src
http-server --cors 

开启服务，默认在 8080 端口，vue 项目需要改到其他端口避免冲突。

src目录

2. mtlLoader 设置材质文件的路径和材质文件（我这里是贴图）开启跨域

   this.mtlLoader.setCrossOrigin("Anonymous")
  this.mtlLoader.setTexturePath(texturePath)
  this.mtlLoader.load(mtlPath, (materials) => {
    materials.preload()
      this.objLoader.setMaterials(materials)
        this.objLoader.load(objPath, (object) => {
          this.scene.add(object)
        })
   }, mtlLoaderOnProgress, mtlLoaderOnError)

以上代码里， texturePath 是设置跨域访问目录的材质路径，一把 mtl 文件里已经有 ’map/xxx.png'的前缀，所以我这里设置到 "http://localhost:8080/assets/models/opera_house/" 就可以了。

至于为什么， setTexturePath api 很容易在源码里找到对应的说明：

setTexturePath

setCrossOrigin("Anonymous") 我猜测是材质是通过 image 标签导入到 canvas 里使用，所以需要设置 "Anonymous" 来进一步让浏览器跨域访问。