Three.js引入轨道控制器报错:THREE.OrbitControls is not a constructor

在前一章我们创建完第一个场景后,为了可以通过鼠标交互来控制相机的旋转和缩放,这里就不得不提到轨道控制器了。

一、导入轨道控制器报错

在上一篇文章的基础上,我们在项目中导入轨道控制器,以下是我最开始的导入方式

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这个低版本的。可是我发现不是版本的原因,即使重新换了版本号该问题

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值