解决three.js引用时，有些构造函数引用报错的问题

最新推荐文章于 2025-01-13 11:39:43 发布
最新推荐文章于 2025-01-13 11:39:43 发布
阅读量4k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_40425415/article/details/106103348
版权
本文解决了一个常见的Vue+Three.js项目中遇到的问题，即TypeError:__WEBPACK_IMPORTED_MODULE_0_three__.OrbitControlsisnotaconstructor的错误。通过正确引入OrbitControls模块并确保在使用前已导入THREE库，可以有效避免此错误。

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

报错：

[Vue warn]: Error in mounted hook: "TypeError: __WEBPACK_IMPORTED_MODULE_0_three__.OrbitControls is not a constructor"

解决办法：

在需要引入的组件中写下：

       import "three/examples/js/controls/OrbitControls"

在three/examples/js/controls/OrbitControls.js文件中加入一行  

       import * as THREE from 'three';

 

油纸
关注
ThreeJS入门（108）：THREE.SplineCurve 知识详解，示例代码
大剑师兰特的GIS世界
10-12 1639
`THREE.SplineCurve` 是 Three.js 中用于创建二维空间中的样条曲线的一个类。样条曲线通过一系列点来定义，并且可以生成平滑的过渡，适用于创建平滑路径或者作为其他几何体的基础。
ThreeJS入门（068）：THREE.Cylindrical 知识详解，示例代码
大剑师兰特的GIS世界
09-30 917
`THREE.Cylindrical` 是 Three.js 中用于表示三维空间中的圆柱坐标的一个类。圆柱坐标系是一种三维坐标系统，它在极坐标的基础上增加了一个垂直坐标（通常称为 z 坐标），用于描述一个点在三维空间中的位置。圆柱坐标系统在某些情况下比笛卡尔坐标系统更加直观和方便，尤其是在处理具有圆柱对称性的场景时。
【three.js】example相关报错：three__WEBPACK_IMPORTED_MODULE_1__.OrbitControls is not a constructor“
weixin_43951592的博客
03-25 5139
需要新增第二行引入 import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; // 控制器 var controls = new OrbitControls(camera,renderer.domElement) controls.addEventListener('change',()=>{ renderer.
使用npm安装three.js无法使用的问题
lyx灬的博客
11-24 1698
之前在网上看见过这种方式，然后在本机上是无效的，之前在这里也是无效，但是把node卸了重新装且在管理员模式下，成功了，可能和步骤有关系，下面列出操作步骤。开始在公司的电脑（没有管理员权限），然后使用失败，后面回家用自己的电脑，有管理员权限还是会报这个问题，之后对于three进行了降版本安装，然后就解决了。的这个引用是无效的，问朋友说什么打包工具啥的关系，叫我用框架说不定就解决了，还没有去尝试，如果前面这两种都碰到问题的朋友可以尝试去试下这种方法。虽然解决了，但感觉还是没有从根本上解决为什么。
【问题】THREE.xxxxx is not a constructor 或者找不到
qq_43805885的博客
01-20 7228
先说结论： 把引用连接调换一下就可以解决 如果引用链接出现CSS2DObject在threejs之前就会出现疯狂报错 emmm还需要学习啊。。。 本来还以为是老版本的问题（使用的9x的版本，求助说可能你的版本太低），然后就想着把做得程序换为新版，这一换好家伙了不得，发现语法方式都要变（从es5转为es6）,硬着头皮写了半天搞出来了些，但是！发现建模同事发的fbx导入后模型混乱了（老版本没事）。。然后只好再硬着头皮按原先的做，结果发现问题竟是这么低级的链接顺序问题哈哈哈。 ..
_utils_three__WEBPACK_IMPORTED_MODULE_0__.default.PerspectiveCamera is not a constructor
roongyan92的博客
03-06 7687
Vue项目中引入three.js 下载three.js文件，在文件尾部加上导出THREE，如图 文件在src目录下，在需要的组件中引入，如图 启动项目报错_utils_three__WEBPACK_IMPORTED_MODULE_0__.default.PerspectiveCamera is not a constructor 原因：webpack会编译src目录下的文件，导...
error: return value type does not match the function type
qq_35643209的博客
01-11 5054
代码如下： 报错：error: return value type does not match the function type 解决：main没有返回值，但是CHECK_CUDA有返回值，删除其中的return语句。
three.js：three__WEBPACK_IMPORTED_MODULE_1__.OrbitControls is not a constructor“
weixin_45884508的博客
04-23 1268
已经引入了 ,还是报错。
Three.js引入轨道控制器报错：THREE.OrbitControls is not a constructor
最新发布
qq_53541336的博客
01-13 924
在前一章我们创建完第一个场景后，为了可以通过鼠标交互来控制相机的旋转和缩放，这里就不得不提到轨道控制器了。
three.js报错集锦
Beam
07-23 6878
1、KeyframeTrack 帧动画 报错： THREE.Matrix3: .getInverse() can’t invert matrix, determinant is 0 代码： // 此处是一个缩放动画 let times = [0, 1] let scales = [0, 0, 0, 1, 1, 1] let scaleKeyframeTrack = new THREE.Keyfra...
关于Three.js控制器，飞行控制器（FlyControls），轨道控制器（OrbitControls）, 第一人称控制器（FirstPersonControls）
weixin_68397463的博客
12-25 1186
# Three.js中实现人称视角切换需要了解以下控制器，FlyControls，OrbitControls和FirstPersonControls，具体这三个控制器的应用场景及优缺点会在下方内容介绍。
Three.js利用orbit controls插件（轨道控制）控制模型交互动作详解
10-19
主要给大家介绍了关于Three.js利用orbit controls插件，也就是轨道控制来控制模型交互动作的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
three.js学习：react + OrbitControls is not a constructor 问题处理
weixin_40532650的博客
07-23 9550
1.在当前页引入OrbitControls import "three/example/js/controls/OrbitControls" 2.进入three/example/js/controls/OrbitControls中，添加以下代码 import * as THREE from "three" 3.重启项目
【报错】TypeError: THREE.OrbitControls is not a constructor
老衲的少女心i~
01-07 231
参考解决地址：https://jsfiddle.net/hyok6tvj/
TypeError: err_code__WEBPACK_IMPORTED_MODULE_0__ is not a function
skysys的研究小屋
06-29 1364
TypeError: err_code__WEBPACK_IMPORTED_MODULE_0__ is not a functionpolygon-ethereum-nextjs-marketplace 项目运行时产生：TypeError: err_code__WEBPACK_IMPORTED_MODULE_0__ is not a function 项目中next版本是11.0.1参考 issue update next to ^12.1.6...
vue中 Error in mounted hook: "TypeError: __WEBPACK_IMPORTED_MODULE_0__assets_swiper_js__.default is n...
weixin_30655219的博客
12-16 8447
个人小站点：https://sundjly.github.io/ 在vue的项目中出现了以下错误： Error in mounted hook: "TypeError: __WEBPACK_IMPORTED_MODULE_0__assets_swiper_js__.default is not a constructor"TypeError: __WEBPACK_IMPORTED_MODU...
Angular4 与Three.js OrbitControls 结合所遇到的问题
大学问的博客
12-12 3180
Angular4 与Three.js OrbitControls 结合所遇到的问题 RROR TypeError: three__WEBPACK_IMPORTED_MODULE_2__.OrbitControls is not a constructor 解决办法： 引入地方        import "three/examples/js/controls/OrbitControls...
解决 mars3d__WEBPACK_IMPORTED_MODULE_5__.graphic.Satellite is not a constructor 报错
weixin_45185103的博客
01-13 1111
mars3d的Satellite绘制卫星轨道报错：mars3d__WEBPACK_IMPORTED_MODULE_5__.graphic.Satellite is not a constructor 报错
报错[Vue warn]: Error in mounted hook: "TypeError: three__WEBPACK_IMPORTED_MODULE_0__.OBJLoader is not a constructor"
07-16
这个错误的原因是你在使用OBJLoader时出现了问题。可能是因为你没有正确引入OBJLoader或者版本不兼容的原因。 请确保你已经正确引入了OBJLoader，并且版本与你的Three.js版本兼容。在最新版本的Three.js中，OBJLoader已经不再作为构造函数。你需要使用OBJLoader的`load`方法来加载模型。 以下是一种正确的加载OBJ模型的方法： ```javascript import * as THREE from 'three'; import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'; // 创建场景、相机和渲染器 var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建OBJ加载器 var objLoader = new OBJLoader(); // 使用OBJ加载器加载OBJ文件，并将其添加到场景中 objLoader.load('path/to/model.obj', function (object) { scene.add(object); }); // 设置相机位置，并创建渲染循环以更新场景 camera.position.z = 5; function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); ``` 确保你已经正确引入了OBJLoader，并且路径指向了正确的OBJ模型文件。如果仍然出现错误，请检查你的Three.js和OBJLoader版本是否兼容，并尝试更新或降级相应的库版本。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值