VUE项目中使用THREE.js加载obj模型

想要在vue项目中使用threejs加载如obj、vtk等格式的模型，与threejs官网略相似，却有部分不同。以下概括几个不同点：

1. js文件引入方式不同。vue中使用npm下载js文件，例如npm install three three-orbitcontrols three-obj-mtl-loader stats-js ,注意：obj加载器使用three-obj-mtl-loader而不是three-obj-loader，stats-js显示帧率，根据需要下载使用。
2. 构造函数使用方法不同。官网使用new THREE.OBJLoader()创建构造器，在vue中不需要THREE，即new OBJLoader()。控制器OrbitControls和帧率Stats也是一样。
3. 在vue中obj模型文件必须要放在静态资源(static)文件下，否则显示出错。

以下详细记录加载一个obj模型的步骤：

• 加载需要的js文件

import * as THREE from 'three'
import OrbitControls from 'three-orbitcontrols'
import {OBJLoader} from 'three-obj-mtl-loader'
import Stats from 'stats-js'

• 创建一个相机：var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
• 渲染场景：var renderer = new THREE.WebGLRenderer();
• 创建一个场景：
  var scene = new THREE.Scene(); scene.add(camera)
• 加载obj模型：

new OBJLoader().load('/static/obj/a.obj' , obj => {
  scene.add(obj)
})

• 加载控制器：var controls = new OrbitControls(camera)
• 最后一步渲染：

animate () {
  renderer.render(scene, camera)
 stats.update()
  controls.update()
  requestAnimationFrame(this.animate)//再次调用animate方法实现刷新
}

调用以下animate（）就能加载模型了。

这是个分割线===========

加载模型后默认鼠标左键x,y,z轴旋转，右键z,y轴平移；一个手指旋转，两个手指平移，想要实现左右滑沿Y轴旋转，上下滑沿Y轴平移，需要判断是左右还是上下，目前还不知道怎么通过OrbitControls进行判断，如果有大佬知道的话请留言。在此通过three-orbitcontrols的js文件进行修改，作为独立的插件使用。需要的伙伴再私聊吧。

这是个分割线===========

做项目遇到的问题：

1. THREE.WebGLRenderer: image is not power of two (1386x1386). Resized to 1024x1024
   
   解决方法：模型的材质贴图的图片大小一般使用2的n次方。

2. Uncaught Error: THREE.OBJLoader: Unexpected line: “”
   
   解决方法：obj文件放到根目录的static下，引入方式："/static/…"

其他的再补充。。。