VUE中使用three.js、通过OrbitControls控制模型、通过GLTFLoader导入外部模型

前言

网上大多数都是导入three.js简单使用，下载并引入three.js使用THREE对象即可：
npm install three --save // 下载安装的命令
import THREE from ‘three’ // 导入THREE对象
this.scene = new THREE.Scene() // 调用对象中的方法创建场景
基本上都不涉及控制和模型导入，只能自己瞎捉摸了好久，苍天呐终于好了！！！

大坑

此处注意，坑啊爬了我很久的坑：
查看npm官网可知，‘three.js’ 包版本停留在0.77.1，提示已被弃用，建议使用’three’
但是我npm install three --save发现下载的包几乎是空的，而npm install three.js --save下载的包可用不过版本过低，导致后续使用GLTFLoader出现各种问题。
经同事建议用cnpm安装，参考如下步骤终于能导入外部模型进行简单控制！！
注意：
一开始我用npm装的three.js结果，使用CubeTextureLoader贴全景图时，怎么都贴不上去图片，经过再三检查路径啥的都没错，脑壳痛，无意中cnpm再次安装后就好了好了！！！

一、安装three包

cnpm install three --save // 很好装的最新版本，可正常引入使用

二、导入THREE对象

import * as THREE from ‘three’ // 必须用 * as 否则找不到对象

三、引用OrbitControls.js进行旋转缩放拖动控制

着急的直接看方法二

方法一：

安装three-orbitcontrols并引用
npm install three-orbitcontrols （注意小写）
import ‘three-orbitcontrols’
new THREE.OrbitControls(this.camera, this.renderer.domElement)
问题：
放大缩小、右键拖动的时候报错：
OrbitControls.js?c150:424 WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.
定位到OrbitControls.js中可以发现
scope.object为THREE.PerspectiveCamera对象，而正常情况下应该是PerspectiveCamera对象，导致scope.object.isPerspectiveCamera为false不再执行后续控制操作。
但是怎么引用都没法解决问题，于是开始百度OrbitControls.js的使用，见方法二。

方法二：

1、下载安装imports-loader and exports-loader
npm install imports-loader and exports-loader
用于向一个模块的作用域内注入变量、从模块中导出变量
2、配置webpack.base.conf.js文件
在其module中的rules[]中添加：
{
test: require.resolve(“three/examples/js/controls/OrbitControls”),
use: “imports-loader?THREE=three”
},
{
test: require.resolve(“three/examples/js/controls/OrbitControls”),
use: “exports-loader?THREE.OrbitControls”
}
3、需要使用的地方引入OrbitControls
import OrbitControls from ‘three/examples/js/controls/OrbitControls’
终于能正常使用three.js并对其进行控制了！！！
4、使用时不需要通过THREE.OrbitControls了，直接new即可
this.controls = new OrbitControls(this.camera, this.renderer.domElement)

四、通过GLTFLoader导入外部模型

GLTFLoader.js已经在three/examples/js/loaders/下，注意到最新版本比77版本明显的变成了大写，源码内的定义也是变为了大写开头，还有很多明显的改进。
所以同上OrbitControls.js引入即可：
1、配置webpack.base.conf.js文件
在其module中的rules[]中添加：
{
test: require.resolve(“three/examples/js/loaders/GLTFLoader”),
use: “imports-loader?THREE=three”
},
{
test: require.resolve(“three/examples/js/loaders/GLTFLoader”),
use: “exports-loader?THREE.GLTFLoader”
}
2、需要使用的地方引入GLTFLoader
import GLTFLoader from ‘three/examples/js/loaders/GLTFLoader’
3、使用时不需要通过THREE.GLTFLoader了，直接new即可
// 实例化加载器
let loader = new GLTFLoader()
4、导入模型
let self = this
loader.load(’/static/3d/1.glb’, function (obj) {
obj.scene.position.y = 1
self.scene.add(obj.scene)
}, function (xhr) {
console.log((xhr.loaded / xhr.total * 100) + ‘% loaded’)
}, function (error) {
console.error(error, ‘load error!’)
})

注意
1、一定要定义let self = this，不然直接用this.scene不行的！！！
2、如果使用webpack打包，glb模型一定要放到static文件夹下！！！

五、使用dat.GUI库实现图形控制界面

npm install dat.gui --save
import dat from ‘dat.gui’

六、使用性能控制插件

---

七、其他问题：

npm install 其他插件之后，很容易出现three.js相关的报错，查看node_modules文件夹下的确实three的文件夹会缺失，需要在根目录下运行cnpm install即可，three会重新装回来。