Three加载OBJ模型

更新记录

1.0（2025-09-02）下载此版本

平台兼容性

uni-app(4.07)

Vue2	Vue3	Chrome	Safari	app-vue	app-nvue	Android	iOS	鸿蒙
√	-	√	√	√	√	×	×	×

微信小程序	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	快应用-华为	快应用-联盟
-	-	-	-	-	-	-	-	-	-	-

uni-app x(4.07)

Chrome	Safari	Android	iOS	鸿蒙	微信小程序
-	-	-	-	-	-

其他

多语言	暗黑模式	宽屏模式
×	×	√

🚀 一个基于 Three.js + Vue3 的 3D 模型展示组件，支持 OBJ 加载、双模型切换、自动旋转、加载进度显示、缩放控制、视图锁定等功能。

适用于电商 3D 展示、工业设计预览、虚拟试衣、3D 扫描展示等场景。

✨ 功能特性支持多模型切换：一键切换默认模型与个人模型 OBJ 格式加载：内置 three/examples/jsm/loaders/OBJLoader 支持自动旋转：可开启/关闭模型自动旋转缩放控制：支持限制缩放范围，或完全禁用缩放旋转控制：可限制水平视图，避免用户看到模型底部加载进度显示：带渐变动画的进度条 / 文字提示响应式自适应：容器大小变化时自动更新视图材质优化：自动替换为 MeshStandardMaterial 增强光照效果 Vue 事件支持：加载进度、加载完成、加载失败事件方便外部业务处理

在页面中使用

import manModel from '@/assets/model/man.obj' import customModel from '@/assets/model/custom.obj' function onModelProgress(e) { console.log('加载进度', e.progress, '%') } function onModelLoaded(e) { console.log('模型加载完成', e) } function onModelError(e) { console.error('模型加载失败', e) }

⚙️ Props 属性类型默认值说明 defaultModelUrl String '' 默认模型的 OBJ 文件路径 personalModelUrl String '' 用户自定义模型路径（优先加载） scaleRatio Number 1 模型缩放比例，适配不同模型大小 zoomEnabled（可选） Boolean true 是否允许缩放（可改成内部控制） 📢 事件事件名参数说明 model-progress { progress, type, url } 模型加载进度（0-100） model-loaded { type, url } 模型加载完成 model-error { error, type, url } 模型加载失败 🎨 样式定制组件默认自带美观的 UI 样式（渐变切换按钮 + 半透明 Loading），你可以通过覆盖 .model-switch-container、.loading-overlay 等类名来自定义主题。

🛠️ 高级功能禁用缩放

js this.controls.enableZoom = false; 限制旋转角度

js this.controls.minPolarAngle = Math.PI / 2; this.controls.maxPolarAngle = Math.PI / 2; 模型切换按钮点击事件

前端可根据条件只显示特定的模型按钮