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

Beam007

于 2019-02-01 15:42:53 发布

阅读量1.4w

点赞数 11

分类专栏： threejs

本文链接：https://blog.youkuaiyun.com/Beam007/article/details/86741895

版权

本文介绍了在Vue项目中如何使用three.js，通过OrbitControls实现模型的旋转、缩放和拖动控制，以及如何使用GLTFLoader导入外部3D模型。在安装和配置过程中，详细讲解了遇到的问题和解决办法，包括webpack的配置、OrbitControls和GLTFLoader的导入。同时，还提到了dat.GUI库用于图形控制界面的实现和性能控制插件的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

网上大多数都是导入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贴全景图时，怎么都贴不上去图片，经过再三检查路径啥的都没错，