新手刚接触three.js的一些报错问题及解决方法

已于 2022-09-04 14:34:08 修改
阅读量2.5k 收藏 3
点赞数
文章标签： 3d
于 2022-09-03 10:50:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QWY1285236058/article/details/126674838
版权
本文汇总了在Vue项目中使用THREE.js遇到的常见问题及解决方案，包括CORS政策错误、构造函数更新以及模块化开发中的引用问题。针对THREE.AxisHelper的报错，指出新版本的正确用法。同时提供了两种Vue+Three.js的集成方案，帮助开发者顺利在Vue应用中整合3D渲染库。
摘要由CSDN通过智能技术生成

问题一：three的editor怎么打开，用了npm命令打开也不行，原因和解决方法：from origin ‘null‘ has been blocked by CORS policy: Cross origin requests are only supported for ..._Dawnchen1的博客-CSDN博客

问题二：THREE.AxisHelper is not a constructor报错

three.js现版本144

因为three.js换了API，new THREE.AxisHelper()改成了new THREE.AxesHelper()

问题三：vue+three结合

方案1：Vue+Three.js，新手demo - 知乎

方案2：three依然写在js里，在vue里调用

问题四：导入其他js，会报错 Uncaught ReferenceError: THREE is not defined

问题原因及解决方法：Three.js结合Vue进行模块化开发下，引入轨道控制器出现的问题。 - 掘金 (juejin.cn)

QWY1285236058
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Three.js-webgl物联网粮仓3D可视化
03-12
本项目名为"Three.js-webgl物联网粮仓3D可视化"，是基于WebGL技术的3D可视化管理系统，利用了Three.js库以及Vue.js框架，旨在实现对粮仓的高效管理和监控。通过JavaScript语言进行编程，结合物联网技术，该系统能够...
three.js 可视化大屏 3D场馆模型Demo
02-26
在本项目中，"three.js 可视化大屏 3D场馆模型Demo"是一个基于最新前端技术栈的实现，旨在帮助新手学习如何利用three.js创建3D场馆模型，并将其应用于大屏幕展示。这个项目结合了Vue3、Vite和TypeScript等现代Web...
使用npm安装three.js无法使用的问题
lyx灬的博客
11-24 719
之前在网上看见过这种方式，然后在本机上是无效的，之前在这里也是无效，但是把node卸了重新装且在管理员模式下，成功了，可能和步骤有关系，下面列出操作步骤。开始在公司的电脑（没有管理员权限），然后使用失败，后面回家用自己的电脑，有管理员权限还是会报这个问题，之后对于three进行了降版本安装，然后就解决了。的这个引用是无效的，问朋友说什么打包工具啥的关系，叫我用框架说不定就解决了，还没有去尝试，如果前面这两种都碰到问题的朋友可以尝试去试下这种方法。虽然解决了，但感觉还是没有从根本上解决为什么。
编译问题 ： javascript Uncaught ReferenceError: THREE is not defined
weitaming1的博客
11-29 9309
问题： Uncaught ReferenceError: THREE is not defined 原因： 服务器访问范围有限。 webStrom 在运行html的时候虽然会打开其自带的服务器功能，并且以此来运行。 但是html文件的访问权限只能限制在以服务器：localhost:63342为根目录的文件。对于localhost:63342所在目录的上层目录的文件是更...
浏览器打开 three.js-r160/editor/index.html 后，为何显示白屏
最新发布
belldeep的专栏
06-09 415
使用本地服务器（如 Apache, Nginx, 或 HTTP 服务器）来托管页面，而不是直接从文件系统打开。
百度地图引用three.js时出现THREE is not defined错误
qq_39030777的博客
08-27 1874
var threeLayer = new mapvgl.ThreeLayer(); view.addLayer(threeLayer); var projection = mapvgl.MercatorProjection; var point = projection.convertLL2MC(new BMapGL.Point(this.CenterPoint[0],this.CenterPoint[1])); var THREE = mapvgl.THR
ThreeJs 环境配置及遇到问题的解决方法
繁华落尽的博客
04-28 1202
本文使用的是vscode + ThreeJs + NodeJs + vue
THREE.AxesHelper is not a constructor
业余前端的职业经历
05-17 2498
这个是因为最新版本的 three.js 已经更新这个api的名字 不再叫这个了 改成了。new THREE.AxisHelper() 但是文档上还没有更新 我看最近的一次代码更新是七天前 但是文档国内外的哦度没有更新 学习three.js 算是踩的的一个坑吧 ...
OrbitControls.js:16 Uncaught ReferenceError: THREE is not defined at OrbitControls.js:
qq_37658401的博客
08-11 2663
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>第一个three.js文件_WebGL三维场景</title> <style> body{ margin:0; overflow:hidden; /*隐藏body窗口区域滚动条*/ } ...
three.js模块引入报错解决
SEKIRO_DJ的博客
04-09 1万+
Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../". <script type="module"> import * as THREE from './build/three.module.js' import { PointerLockControls } from './jsm/controls/Pointe.
three.js加载gltf模型
09-17
在本文中，我们将深入探讨如何使用three.js库加载GLTF（GL Transmission Format）模型，并结合Vue.js框架构建一个完整的Web应用程序。GLTF是一种开放标准的3D资产交换格式，广泛用于WebGL和WebVR场景，因为它能高效...
three.js加载obj模型
08-29
简单的加载obj模型，可以直接下载直接使用，很是方便，只需将你的obj，mtl导入即可，对于three.js的学习者很有用
three.js和高德地图结合引入obj格式模型.zip
06-27
three.js和高德地图结合引入obj格式模型---------------------three.js和高德地图结合引入obj格式模型---------------------three.js和高德地图结合引入obj格式模型---------------------three.js和高德地图结合引入...
基于vue3，three.js,3D智慧园区
11-09
**Three.js**: Three.js是一个强大的JavaScript库，用于在Web浏览器中创建和展示3D对象。它简化了WebGL的使用，提供了一个面向对象的接口，用于创建场景、几何体、材质、光源等。在“3D智慧园区”项目中，Three.js被...
新手刚接触three.js的一些报错问题及解决方法（二）
QWY1285236058的博客
10-28 644
导入图片404
【three.js】-引入外部模型报错问题-解决方案
weixin_64461654的博客
03-06 519
因为gltf格式模型文件默认是在根目录的 public文件下 进行读取的，如果放在src里面，找不到文件，就会报以上的错误。如果文件移入到 根目录的 public文件下还是报错，检查一下 gltf模型是否没有。：vue2中npm引入three后，引入gltf格式 外部模型报错。
【官网】cesium-threejs-experiment案例跑不通且报错问题
Turn_to_empty的博客
07-27 452
cesium-threejs-experiment案例报错核心原因是：案例是18年5月份的，把Cesium及Three版本更新至想用的版本就可以了。
vue3 + vite 中使用 three.js
ZengYue_D的博客
07-29 2655
cnpm install three --save 需要的页面 import * as THREE from “three” 引入即可开发，也可以按需引入 问题 引入 OrbitControls (相机轨道控制器) ： import OrbitControls from ‘three/examples/js/controls/OrbitControls’ 抛出异常 ReferenceError: THREE is not defined ，遂面向谷歌寻找方案 ，辗转腾挪最后在 这里 找到了问题 .
JS Uncaught TypeError: xxx is not a constructor 问题解析
热门推荐
肖明伟 的博客
07-28 4万+
无意中出现的报错，错误原因是申请了重复的变量作为同一个方法名。 例如： function xxx(){ xxxxxx } var xxx = new xxx(); 此时如果通过一些特定方式重复加载页面，比如我们用到的ajax请求页面后直接加载到已有dom中的方式，这时第一次加载没有任何问题，但是第二次加载就会出现如题报错。此时： 修改var xxx = new xxx(); 为 var xxxx = new xxx(); 即可解决此问题。 本人没有更深入的研究，应该是后面定义的xxx覆盖..
object not an instance of THREE.Object3D 报错原因
06-01
当您在Three.js中使用一个不是THREE.Object3D实例的对象时，就会出现"object not an instance of THREE.Object3D"的错误。这个错误通常发生在以下两种情况下： 1. 您试图将一个不是THREE.Object3D实例的对象添加到THREE.Scene或THREE.Object3D中。在这种情况下，您需要确保您要添加的对象是THREE.Object3D的实例。例如，如果您有一个自定义的Mesh对象，您需要确保它继承自THREE.Object3D。 2. 您试图访问一个不是THREE.Object3D实例的对象的属性或方法。在这种情况下，您需要确保您在访问对象的属性或方法之前检查了它是否是THREE.Object3D的实例。 解决这个问题的方法是确保您正在使用THREE.Object3D的实例，或者在访问对象的属性或方法之前检查它是否是THREE.Object3D的实例。例如，您可以使用以下代码来检查对象是否是THREE.Object3D的实例： ```javascript if (object instanceof THREE.Object3D) { // 对象是THREE.Object3D的实例 } else { // 对象不是THREE.Object3D的实例 } ``` 如果您仍然遇到问题，可以检查您的代码并查看是否有其他可能导致对象不是THREE.Object3D实例的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值