Three.js在Vue项目中引入外部模型，报404错误

最新推荐文章于 2023-09-22 13:34:24 发布
最新推荐文章于 2023-09-22 13:34:24 发布
阅读量1.3k 收藏 1
点赞数 4
分类专栏： Three.js Vue 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hello_light/article/details/125926270
版权

当时查了很多原因，最后发现是因为模型文件放错位置了

 当时就报了这样的错误！！！

解决方法：

创建文件，将模型文件放入，然后文件一定要放入public下面，然后使用时注意引入的路径！！！

 

 然后console.log（obj）查看模型以及被解析出来了

 

 

hello_light198
关注
专栏目录
关于three.js在vue项目中引入GLTF文件
Liiiiiiiie的博客
06-04 3942
点击前往，关于three的基础使用，这里只写关于GLTFLoader在vue的使用，其他类型的3D模型可使用其他loader，three.js中文文档 点击这里有免费的gltf文件下载 注意！！！！！！ 项目中如使用mock.js，引入gltf文件会失效，因为mock会拦截XhrHttpRequest并重写，导致加载不了 首先，引入GLTFLoader import * as THREE from "three"; import { GLTFLoader } from "three/exampl.
vue中使用three.js导入外部3D模型
热门推荐
qq_41591368的博客
11-23 1万+
最近公司有一个需要用到3D模型的项目，所以就学习了一下，在这里小小的记录一下 下载依赖 npm i three -D npm i three-obj-mtl-loader -D npm i three-orbit-controls 导入依赖 import * as THREE from “three”; import { OBJLoader, MTLLoader } from “three-obj-mtl-loader”; import { GLTFLoader } from “three/examp
threejs 中文json
06-22
threejs 中文json包，替换threejs官方的英文json就行了
THREE.JS 3D模型服务器报404问题（VUE fbx文件在本地能显示 服务器上不显示报404）
c_x_m的博客
09-22 1109
作为新手，新建立的threeJS模型，本地运行模型是可以显示的 ，但服务器模型却报404。
VUE使用threejs加载3D模型时报错404
weixin_44146288的博客
09-29 2453
在使用three.js加载3D模型时，路径是正确的，但是部署到服务器上时报错404，找不到obj文件。 这是因为服务器IIS的MIME没有添加.obj扩展类型。如果mtl文件也出不来的话，就再加一个.mtl类型。然后就好了。 ...
vue结合three.js加载3D模型报404错误
weixin_46058007的博客
08-07 882
使用vue结合three.js报404错误时，可以尝试把报错指向的静态资源放进public文件夹下。
网页载入后报错404找不到3d模型文件
qq_34136540的博客
03-18 1568
win server环境下，对于存在非基础格式文件的网站部署后，明明文件都存在，开发工具打开也正常，但外部访问服务器后，文件加载不出来。本文提供一种解决思路供参考。
vue使用three.js引入外部obj，mtl模型.zip
05-31
在Vue.js应用中集成Three.js库来加载外部的3D模型，如.obj和.mtl文件，是一种常见的增强网页3D视觉效果的方法。Three.js是一个强大的JavaScript库，它为WebGL提供了一个简单易用的接口，使得在浏览器中创建复杂的3D...
使用three.js+vue制作的3d看房示例源码.zip
最新发布
01-07
在本项目中，开发者利用了流行的JavaScript库Three.js与前端框架Vue.js，创建了一个3D看房的应用。Three.js是一个强大的WebGL库，它简化了在浏览器中进行3D图形编程的过程，而Vue.js则是一个轻量级的MVVM框架，用于...
vue3.0导入threejs三维模型，实现模型放大，缩小，拖动及其动画效果，鼠标点击规划空间路径。
04-12
在本项目中，我们主要探讨如何在Vue3.0框架中整合Three.js库，以便导入三维模型，并实现模型的缩放、平移、旋转以及添加交互式动画效果，特别是通过鼠标点击来规划空间路径。Three.js是JavaScript的一个强大库，用于...
vue+three.js导入obj模型不显示问题
sandy_star
03-19 7524
前言：最近用vue+threre.js实现3d页面的时候，发现导入obj模型时模型在页面中显示不出来的问题。也纠结了好几天，换了好几种方式去试，到底是模型有问题还是代码有问题？真是个令人头痛的问题啊！ 一、关于obj模型存放的目录 这里我用的vue是4.x版本的。 在vue中存放obj模型必须要放在静态资源（static）文件下，否则会出错。 由于4.x版本的vue没有static这个文件夹，但是他的静态资源文件夹是叫public，这样我在public下面创建一个文件夹叫static，再在static.
vue+three.js加载本地stl模型无法显示的解决办法
mmmlc的博客
04-09 3821
先放代码 <template> <div> <div id="container"></div> </div> </template> <script> import * as THREE from 'three' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' import { STLLoader }
vue集成three.js FontLoader load 文件404
长歌的博客
03-14 1221
vue3集成three.js 文件404问题
Vue3基于Three.js 写一个404页面
qq_28805447的博客
12-26 281
Vue3基于Three.js 写一个404页面
vue加载3D模型报错的原因以及解决方案
workhard0905的博客
11-10 3425
今天在vue中加载3D模型一直报错
vue使用threejs导入gltf模型时报错的问题解决
CHENC0518的博客
04-17 1291
1.首先需要注意的是，模型需要放到public文件夹下，并且引入gltf/glb文件时，路径前面不能加public。
webpack5+vue3+three.js打包vue插件遇到插件静态资源无法找到文件的问题（hdr,wasm,gltf,,,等静态文件）
mmiaoChong的博客
09-28 2447
问题描述： 在使用webpack5+three.js写vue3插件时候，在加载hdr环境贴图使用的绝对路径无法正确加载 main.js?be46:51335 THREE.RGBELoader Bad File Format: bad initial token // 加载hdr图片失败 main.js?be46:65347 SyntaxError: Unexpected token < in JSON at position 0 // 加载模型失败 at JSON.parse (<an
Failed to load resource: the server responded with a status of 404 (Not Found)新手入门three.js报错的一种的解决方法
m0_74069684的博客
02-14 1374
three.js初学者可能出现的一种报错的解决方法
Threejs加载外部glb文件模型不显示
kk7521的博客
01-28 9339
文章目录一、问题代码1、主页面代码2、js代码二.问题分析总结 一、问题代码 1、主页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>军营展示</title>zhuyem
用three.js在vue中引入3d模型
04-22
在Vue中，您可以在组件文件中引入three.js和模型文件。这里以GLTF格式的模型为例： ```javascript import * as THREE from 'three'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; ... ``...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值