今天准备在@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);