vue加载3D模型报错的原因以及解决方案

天空中的星~

于 2021-11-10 13:34:41 发布

阅读量3.6k

点赞数 2

分类专栏：笔记 three.js 文章标签： vue.js 前端 javascript three.js

本文链接：https://blog.youkuaiyun.com/workhard0905/article/details/121246523

版权

three.js 同时被 2 个专栏收录

6 篇文章

订阅专栏

笔记

2 篇文章

订阅专栏

本文讲述了在Vue项目中遇到的3D模型加载错误，解决办法是将模型从assets移到public，并使用绝对路径引入。涉及了THREE.js库的使用和Vue.config.js中publicPath设置的影响。

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

今天在vue中加载3D模型一直报错
代码没有错误，只是模型的路径错误，导致加载模型报错，（本来将模型放到assets路径下，通过相对路径引入）一直报错查资料发现模型文件不能放在assets路径下，要放在public路径下，并且必须通过绝对路径引入public下的文件（这个取决于vue.config.js中publicPath的配置，默认的是/）

在vue中加载3D模型具体代码和步骤：

1.npm install three --save 安装three.js的包

2.引入three相关的包
import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
import {MTLLoader} from 'three/examples/jsm/loaders/MTLLoader';
import {OBJLoader} from 'three/examples/jsm/loaders/OBJLoader';
3.模型要放入public文件夹下，放在public目录下的资源会被直接复制，不会经过webpack的打包处理

4.加载模型