vue中使用three.js导入外部3D模型

最新推荐文章于 2025-06-10 13:25:39 发布

kinjaze

最新推荐文章于 2025-06-10 13:25:39 发布

阅读量1.2w

点赞数 13

CC 4.0 BY-SA版权

分类专栏： Three学习文章标签： three.js vue 3D模型 .obj模型材质包

本文链接：https://blog.youkuaiyun.com/qq_41591368/article/details/110006661

本文介绍了在Vue项目中使用three.js、OBJLoader和MTLLoader加载外部3D.obj模型，以及解决加载过程中遇到的光照、材质包路径和模型大小定位问题。并对比了使用three.js与vue-3d-model组件的不同效果。

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

最近公司有一个需要用到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/examples/jsm/loaders/GLTFLoader”;
import {DDSLoader} from “three/examples/jsm/loaders/DDSLoader”;
import { CSS2DRenderer, CSS2DObject } from “three-css2drender”;
import { AmbientLight, LightShadow } from “three”;
const OrbitControls = require(“three-orbit-controls”)(THREE);

项目结构
在这里插入图片描述
依赖的版本

案例代码

这个地方有一个需要注意的位置就是在加载模型的时候的依赖 three-obj-mtl-loader 有所更新需要在node_modules文件夹下找到这个依赖修改index.js文件修改为这样

还有一个点需要注意，就是材质包的导入路径问题

还有一个就是模型需要放到项目的根目录下和public下

<template>
  <div id="container"></div>
</template>
<script>
import * as THREE from "three";
import {
   
    OBJLoader, MTLLoader } from "three-obj-mtl-loader";
import {
   
    GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import {
   
   DDSLoader} from "three/examples/jsm/loaders/DDSLoader";
import {
   
    CSS2DRenderer, CSS2DObject } from "three-css2drender";
import {
   
    AmbientLight, LightShadow } from "three";
const OrbitControls = require("three-orbit-controls")(THREE);
export default {
   
   
  name: "vue-three",
  data() {
   
   
    return