【3D】VUE中使用three.js>通过OrbitControls控制模型>通过GLTFLoader导入外部模型

·  阅读 1008

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第11天,点击查看活动详情

最新前言

新版本的three.js对其变量的引入和暴露进行了优化,可以很方便的从jsm文件夹下引入相关包了。

无需进行一些七七八八的配置,详见另一篇文章:(juejin.cn/post/711260…)

问题

网上大多数都是导入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会重新装回来。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改