Vue(V 3.2.37)使用Three.js(V 0.145.0)加载3D模型的详细步骤
Vue(V 3.2.37)使用Three.js(V 0.145.0)加载3D模型的详细步骤
1、安装three
命令:
pnpm install three
引入 three 和加载器
import * as THREE from 'three'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
其他的场景,相机,灯光等一系列步骤这里就省略了
2、模型文件放置路径
文件有两种放置方式,这两个方式亲测可行(使用其中一种即可)
1、在根目录新建文件夹 models(文件名随意),将模型放入其中
2、在 public 文件夹下新建文件夹 models(文件名随意),将模型放入其中
3、加载模型
创建GLTF加载器
const loader = new GLTFLoader();
加载模型
点击查看代码
loader.load('/models/shark.glb', glb => { // 调用OBJ的loader函数,加载成功会有个回调函数,参数obj就是模型加载成功后的网格Mesh实例对象
// 设置模型缩放
glb.scene.scale.set(100, 100, 100);
// 设置模型位置
glb.scene.position.set(0, 0, 0);
// 将模型添加到场景中
scene.add(glb.scene);
});
注意:scene.add(glb.scene)
创建OBJ加载器
const loader = new OBJLoader();
加载模型
点击查看代码
loader.load("model/treasury.obj", obj => {
scene.add(obj);
})
注意:scene.add(obj)
这里只讲了两种模型加载方式,其他方式请自行查阅资料
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~