在前一章我们创建完第一个场景后,为了可以通过鼠标交互来控制相机的旋转和缩放,这里就不得不提到轨道控制器了。
一、导入轨道控制器报错
在上一篇文章的基础上,我们在项目中导入轨道控制器,以下是我最开始的导入方式
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
const controls = new THREE.OrbitControls(camera, renderer.domElement)
// 渲染场景和动画
const animate = () => {
//进行更新
controls.update()
}
写入上述代码后发现控制台中报错:THREE.OrbitControls is not a constructor(THREE.OrbitControls不是构造函数)
二、解决方案
1.方案一
既然遇到了问题咱不得不去寻找解决问题的办法了,在网上查找了好多资料,最开始给出的方案是导入语法不正确,即由于 OrbitControls 是作为 ES6 模块提供的,应该使用默认导入的方式,而不是命名导入,差不多意思是去掉.js扩展名,下述方案:
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
但是该方案还是显示同样的问题,并没有正确解决
2.方案二
于是去检查three.js的版本号,刚开始我安装的版本号是0.174.0,随后进行卸载然后重新安装了0.159.0这个低版本的。可是我发现不是版本的原因,即使重新换了版本号该问题