【three.js】-引入外部模型报错问题-解决方案

最新推荐文章于 2025-02-20 00:14:59 发布
最新推荐文章于 2025-02-20 00:14:59 发布
阅读量840 收藏 9
点赞数 8
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64461654/article/details/136509659
版权
文章讲述了在Vue2项目中使用npm引入three库时，遇到gltf格式模型加载失败的问题，原因是gltf模型默认在public文件夹下查找，需确保模型文件和可能的.bin文件在同一位置，或者将模型移动到正确路径并检查兼容性。

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

问题重现 ：vue2中npm引入three后，引入gltf格式 外部模型报错 

解决方法：因为gltf格式模型文件默认是在根目录的 public文件下 进行读取的，如果放在src里面，找不到文件，就会报以上的错误。

如果文件移入到 根目录的 public文件下还是报错，检查一下 gltf模型是否没有适配的bin文件，有些.gltf文件是需要和.bin文件相辅相成的 。

田田925
关注
threejs electron vue3打包后glb和gltf文件路径异常问题
九段刀客的博客
08-16 1697
threejs+electron+vue3打包后glb和gltf文件路径异常问题。
Three.js模型导入报错THREE.WebGLProgram: shader error: 1281 35715 false gl.getProgramInfoLog No compile...
weixin_44489222的博客
12-29 5690
最近自己在c4d做3D模型，做完之后不管导出为obj还是fbx都会报错THREE.WebGLProgram: shader error: 1281 35715 false gl.getProgramInfoLog No compiled fragment shader when at least one graphics shader is attached. Three.js版本为r118 stackoverflow和github上面找都没有找到好的解决办法。 stackoverflow上最.
关于VUE中使用three.js的一些报错
Lph574的博客
05-27 2784
看了官方文档并没有说明关于gltf文件路径的问题，在网上也查询了很多，解决方法五花八门但是一个有用的都没有。有的说安装依赖包，有的说修改vue.config.js，有人说采用import引入等等之类的，但是均无作用。最终在和朋友的讨论后，得知gltf格式文件默认是在public文件下，随即去试了一下成功解决。今天在使用three.js进行渲染gltf格式三维模型时，控制台报错404。原来问题的解决是如此简单，所以发出来希望能避免大家重蹈覆辙 ，拒绝踩坑！
【ThreeJS基础教程-高级几何体篇】2.2 加载模型，加载模型时的常见错误
qq_42760477的博客
10-21 3148
Threejs基础教程-高级几何体篇：加载模型以及加载模型时的常见错误
threejs加载GLTFLoader模型时出现未能解析three模块标识符
小白菜的博客
02-09 3915
今天在学习three.js遇到了导入模块出错的问题 我使用原生html导入GLTFLoader时遇到了报错 import { GLTFLoader } from "./three.js/examples/jsm/loaders/GLTFLoader.js" 我重复检查引入的地址都没有问题，我也没有使用three的标识符，官方的案例也是一样的引入，但是案例在引入前多了以下的代码 <script type="importmap"> { "imports": { "three": ".
three.js加载gltf文件过程以及遇到的问题
yinge0508的博客
09-22 4529
原来是 .gltf 文件中 引入了 .bin 格式的文件了，虽然 .gltf 和 .bin 两个文件在同一个路径下，在 .gltf 文件中就是找不到 .bin 格式的文件；刚开始，我是从网上下载的gltf文件，将.gltf 文件放在了src/assets/xxx.gltf , 对gltf格式的文件并不了解，使用如下方式加载gltf文件时，附件放在了中国移动云盘上 了，坚决抵制垃圾的恶心的最2比百度云盘，限速，就是让你开通会员，开通会员后下载文件，下的也不一定完整；
Blender Three.js 智慧3D机房开发 模型创建与导入中的常见问题与解决方案
qq_59060196的博客
03-17 5778
如果你遇到了在本文中没有出现的问题，欢迎评论或者私信我。
three.js(4):加载外部3维模型
spider_man
08-26 2402
参考：http://www.yanhuangxueyuan.com/Three.js_course/stl.html 直接使用three.js编程建模比较麻烦，实际开发的时候往往会借助一些可视化的3D建模工具，比如SolidWorks、Blender、C4D、3Dmax。不同领域的三维软件支持导出的文件有所差异，比如工业设计、机械设计类的三维软件往往支持导入静态的3D模型，游戏开发常常使用的Blender等三维软件，除了静态的三维模型，还可以导出含有动画信息的三维模型。three.js针对不同的文件格式，
本地预览html不加载js,Three.js跨域问题(无法预览)
weixin_42138376的博客
06-09 1462
Three.js跨域问题通过Three.js加载obj、FBX等格式外部模型文件的时候是ajax异步加载数据的过程，需要建立本地服务器来解决，如果不这样直接使用浏览器打开加载三维模型的.html文件，会出现报错无法模型文件无法加载，浏览器控制报错跨域问题的情况。浏览器控制台报错：three.js:30833 Access to XMLHttpRequest at 'file://....' fro...
【threejs学习随记（三）】3D模型导入问题
热门推荐
u012088576的博客
09-07 4万+
threejs来实现常见简单的几何体（立方体，圆，球，棱锥等）十分容易，但在实际开发中，我们可能需要展示的模型非常复杂，很难用简单的几何体来实现。基本上都需要依赖像 "blender"， "cinema 4d"，"Maya"，"3ds Max"这样的3D建模软件来构建所需模型，然后再将其以指定格式（"collada"，"json","obj"等）导出。Threejs允许用户导入某些指定格式的三维模型，并添加到场景中。因此本文主要讲如何基于threejs导入所需3D模型。
Vue使用Three.js加载glTF模型的方法详解
12-30
Vue使用Three.js加载glTF模型的方法详解
cesium（vue）一些面试问题（包含Three.js）
最新发布
this__valve的博客
02-20 2227
3D Tiles 是 Cesium 提出的一种用于流式传输和渲染大规模三维地理空间数据集的开放规范。在处理大规模三维地理数据（如城市建筑、地形、点云等）时，传统的三维数据格式在数据加载、渲染效率等方面存在诸多挑战，而 3D Tiles 规范通过将数据组织成层次化结构，实现了数据的按需加载和高效渲染，能显著提升大规模三维场景的展示性能。用途。
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.
threejs：vue导入gltf模型报unexpected token ＜ in json at position 0错误
1111111111
05-20 7077
1、在vue文件导入GLTFLoader.js 2、初始化loader 需要注意的点： 文件必须放在public下面，否则会报unexpected token < in json at position 0错误。 路径是'/static/gltf/Duck/glTF/Duck.gltf'，前面不用再加public了。 不要用function而要用=>，否则this指向会乱。 用一个全局变量把导入的模型保存起来，以便其他地方调用。 mounted里先导入模型，然.
THREE.JS 关于导入外部模型的可能问题
qq_44426236的博客
11-28 570
js/draco/gltf/ 用于解码使用KHR_draco_mesh_compression扩展压缩过的文件的地址。模型最好放在 static 中，并且加载的模型地址需要写全，不能省略前面的 static。模型最好放在 public 中，加载地址可以省略前面的 public。/static/model/obj.glb 为模型的文件地址。
使用three.js加载模型在本地有，放到线上就出不来
weixin_45960031的博客
01-03 804
使用three.js加载第三方模型，模型在本地有，放到线上就出不来
threejs Mars3D模型加载外部资源的跨域问题
前端程序员、项目经理、人工智能博主
04-28 1275
Access-Control-Allow-Origin 是 HTML5 中定义的一种服务器端返回 Response header，用来解决资源（比如字体）的跨域权限问题。它定义了该资源允许被哪个域引用，或者被所有域引用（google 字体使用*表示字体资源允许被所有域引用）。F12 中提示 CORS 相关错误。这是浏览器安全机制,是谷歌94+后，新增的功能，公网资源(访问者) 访问 私网资源(被访问者)会提示此错误。访问影像瓦片底图时，如果瓦片不存在，也会在404错误后提示CORS错误。
【Three】threejs 导入报错：Uncaught TypeError: Failed to resolve module specifier “three“....
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
04-11 971
【代码】threejs 导入报错：Uncaught TypeError: Failed to resolve module specifier "three"....
three.js 3D模型导入问题及解决方式
Pegasus的软件博客
12-18 7451
three.js 3D模型导入问题及解决方式 在研究three.js的3D模型导入的时候，遇到一些问题，虽然试用了官方介绍（https://threejs.org/docs/index.html#manual/en/introduction/Loading-3D-models）及网上搜到的一些参考，仍然不能正确实现3D模型的导入和使用。经过报错信息的追踪和调整验证，找到原因和解决方式，本篇会以GLTFLoader模型为例介绍正确导入方式，也是各种模型导入遇到问题的分析解决参考。 关键原因及解决方式 要
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值