今天在使用 Vue 和 Threejs 结合的项目里遇到了一些坑，记录下来。
模型加载
Threejs 在加载 obj 和对应的 mtl 文件及 mtl 中的贴图的时候需要注意几点：
- obj 和 mtl 及其贴图所在的目录需要开启服务，可以使用 http-server 在 src 所在目录用
cd src
http-server --cors
开启服务，默认在 8080 端口，vue 项目需要改到其他端口避免冲突。
src目录
- 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" 来进一步让浏览器跨域访问。
