@vue/cli使用threejs时遇到的问题

今天准备在@vue/cli中添加three,并进行测试，发现此过程中遇到不少问题。如：

网上有很多用vue2.0+版本，而开发版本是vue3.0+版本；

three有使用的是107之前的版本，而插件使用的是107+版本；

怎么使用three的内部插件如：OrbitControls。

        

（1）安装three。

执行命令：npm i three –S

然后，在.vue文件中添加引用：

import * as THREE from 'three';

然后测试一下：

this.scene = new THREE.Scene();

 

（2）安装three内部插件，如：OrbitControls。

这里要注意一下，开始的时候，查找资料发现大部分都是107之前的版本解决办法，当时import-three-examples是比较好的解决方法，可以在three没有完全支持模块化引入时很好地解决问题。

但是由于three逐渐完善了jsm目录的文件，直接使用three提供的模块化方案是更好的解决方案。

这个问题是在看到了下面这个解决方案最后一句话，才意识到，非常感谢该作者。

https://github.com/xiongtongzi/import-three-examples/blob/master/README.md

 

在.vue文件中添加引用，注意引用方式：

import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';

然后使用时，注意不能用THREE.OrbitControls()

 this.controls = new OrbitControls(this.camera, this.renderer.domElement);