vue-3d-model：一个展示三维模型的 Vue 组件

最新推荐文章于 2025-03-27 15:24:13 发布
最新推荐文章于 2025-03-27 15:24:13 发布
阅读量8k 收藏 19
点赞数 3
分类专栏： vue 文章标签： vue-3d-model 三维模型
原文链接：https://github.com/hujiulong/vue-3d-model
版权

vue-3d-model

vue.js 3D model viewer component, based on threejs, inspired by model-tag

一个展示三维模型的Vue组件，支持模型操作和模型点击事件，能自动缩放模型到合适大小并校正偏移，支持多种格式的模型。

vue-3d-model：一个展示三维模型的 Vue 组件

Example

DEMO

Install

using npm

npm install vue-3d-model --save

Or using script tag for global use

<script src="https://unpkg.com/vue-3d-model/dist/vue-3d-model.min.js"></script>

Or Download vue-3d-model.min.js and include it in your html

Usage

<template>
    <model-obj src="example/models/obj/LeePerrySmith.obj"></model-obj>
</template>
<script>
    import { ModelObj } from 'vue-3d-model'

    export default {
        components: { ModelObj }
    }
</script>

Or

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="app">
        <model-obj src="example/models/obj/LeePerrySmith.obj"></model-obj>
    </div>
    <script src="vue.js"></script>
    <script src="vue-3d-model.min.js"></script>
    <script>
        new Vue({
            el: '#app'
        })
    </script>
</body>

Documents

props

proptypedefaultexample
srcstring-'./exapmle.obj'
widthnumber-300
heightnumber-300
positionobject{ x: 0, y: 0, z: 0 }{ x: 100, y: 20, z: -10 }
rotationobject{ x: 0, y: 0, z: 0 }{ x: Math.PI / 2, y: 0, z: - Math.PI / 4 }
scaleobject{ x: 1, y: 1, z: 1 }{ x: 2, y: 2, z: 3 }
lightsarray- 
backgroundColornumber/string0xffffff0xffffff/'#f00'/'rgb(255,255,255)'
backgroundAlphanumber10.5
controllablebooleantruetrue/false

events

event
on-mousedown
on-mousemove
on-mouseup
on-click
on-load
on-progress
on-error

Model Format Support

model formatcomponent tag
obj<model-obj>
json<model-three>
stl<model-stl>
dae<model-collada>
ply<model-ply>
gltf(2.0)<model-gltf>

Browser Support

Modern browsers and IE 11.

You can click on this for more information

TODO List

  • Support for more model formats
  • Animation
  • Post-processing

LICENSE

MIT

查看原文： vue-3d-model：一个展示三维模型的 Vue 组件

vue中展示3D模型 -- vue-3d-model
Rainy_X的博客
08-14 2万+
一、搜集到的网址 3D模型库 three.js WebGL babylonJS ThingJS EverAPI 3D数据可视化库 echarts — 基于Canvas Highcharts —基于SVG d3.js — 基于SVG/Canvas+SVG g2.js — 基于Canvas 二、需求 尝试使用three.js后发现上手不是特别快，后来发现了vue-3d-model组件，能够很简单的展示出3D模型 效果图如下 使用原因可看这篇文章 https://www.jianshu.com/p/
vue-3d-model 对三维模型(.fbx.gltff.obj等)的展示，三维模型展示透明贴图 以及双面贴图显示
qq_42648288的博客
03-25 3793
使用vue-3d-model对三维模型(.fbx.gltff.obj等)的展示，三维模型展示透明贴图 以及双面贴图显示
vue-3d-model
dragonzoebai的专栏
02-02 1425
vue项目加载三维模型
vue-3d-model.zip
06-28
在vue中使用threejs来展示3D模型，包括obj、fbx、gltf等格式，封装成独立组件的形式，支持多种自定义配置项
model-viewer：快速加载glTF模型的强大工具
最新发布
gitblog_00746的博客
03-27 283
model-viewer：快速加载glTF模型的强大工具 model-viewer 3D Model Viewer supporting glTF and 3D Gaussian Splats 项目地址: https://gitc...
vue-3d-model：:camera:vue.js 3D模型查看器组件
02-06
vue-3d模型 vue.js基于threejs的3D模型查看器组件，受启发 一个展示三维模型的Vue组件，支持模型操作和模型点击事件，能自动缩放模型到合适的大小并校正偏移，支持多种格式的模型。 例 安装 使用npm npm install vue-3d-model --save 或使用脚本标签供全球使用 < script src =" https://unpkg.com/vue-3d-model/dist/vue-3d-model.umd.js " > </ script > 或下载并将其包含在您的html中 用法 < template> < model-obj src = "
Vue展示3d模型
baby_cheerup的专栏
10-27 9845
背景需求：公司系统后台，需要在页面上显示设计师传入的3d模型，并修改3d模型的参数（主要是对应的mtl中的材质图片） 因目前项目是用vue-cli搭建的框架，对比了下网上的资料参考，最后选择了vue-3d-model。 最后调研选用obj,mtl搭配的形式，但这个有个弊端，在模型特别大的时候会显示不出来或加载特别慢，最近也是正在考虑如何嵌入3dmax 暂时还没有好的方案执行？？？？ 难点问题： 1.在引用3d模型，默认情况下，3d模型整体视觉效果暗淡无光，而且光度照不到的地方（底部和背面）是完全黑的
Vue 3D 模型（Vue 3D Model）是一个基于 Vue.js 框架的 3D 模型渲染库，它可以帮助开发者快速地将 3D 模型渲染到网页上。下面我们从技术角度来分析一下这个项目。
gitblog_00072的博客
03-23 1498
Vue 3D 模型（Vue 3D Model）是一个基于 Vue.js 框架的 3D 模型渲染库，它可以帮助开发者快速地将 3D 模型渲染到网页上。下面我们从技术角度来分析一下这个项目。 项目地址:https://gitcode.com/gh_mirrors/vu/vue-3d-model 技术分析 Vue 3D 模型基于 Vue.js 框架开发，使用了 Three.js 作为底层渲染引擎，同时支...
vue-3d-model-Vue组件中的3D模型查看器。-Vue.js开发
05-27
vue-3d-model vue.js 3D model viewer component, based on threejs, inspired by model-tag 一个展示三维模型的Vue组件，支持模型操作和模型点击事件，能自动缩放模型到合适大小并校正偏移，支持多种格式的模型。...
vue-3d:基于vue+threejs的3d展示
05-08
vue-3d 一个Vue.js项目构建设置# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for production and view ...
推荐：vue-3d-loader支持.dae/.fbx/.gltf/.glb/.obj/.ply/.stl/.json，并支持同一个场景导入多个不同3D模型，支持mtl材质以及jpg/png等图片纹理
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
07-01 2508
vue-3d-loader是vueJS + threeJS整合的一个3d展示组件。支持.dae/.fbx/.gltf/.glb/.obj/.ply/.stl/.json，并支持同一个场景导入多个不同3D模型，支持mtl材质以及jpg/png等图片纹理vue3请安装及以上版本，vue2请安装版本。
基于vue的三维模型加载插件
05-11
安装：npm install vue-model-view -S 组件安装：import ModelView from 'vue-model-view' Vue.use(ModelView)
3D-vue-model-view.zip
09-18
3D-vue-model-view.zip,管理者,3D建模使用专门的软件来创建物理对象的数字模型。它是3D计算机图形的一个方面，用于视频游戏，3D打印和VR，以及其他应用程序。
ModelViewer
03-29
模型浏览器
model_viewer
04-07
Flutter的3D模型查看器 这是一个小部件，用于以和格式渲染交互式3D模型。 该小部件将Google的网络组件嵌入到。 截屏 先决条件 2.8+和 1.17+ 兼容性 Android和iOS，以及最新的系统浏览器版本。 安装 pubspec.yaml dependencies : model_viewer : ^0.8.1 AndroidManifest.xml （仅适用于Android 9+） 要在Android 9+设备上使用此小部件，必须允许您的应用建立与http://localhost:XXXXX的HTTP连接。 Android 9（API级别28）将android:usesCleartextTraffic的默认值从true更改为false ，因此您需要按以下方式配置应用程序的android/app/src/main/AndroidManifest.xml
model-viewer:TamarinTech的3D打印模型查看器
05-06
模型查看者 目前，项目已暂停（2015年9月30日），同时已完成将AMF加载添加到three.js的工作。 如果您希望在工作中使用此项目，则当前发行版分支是稳定的。 这是一个基于Polymer的项目，旨在为想要显示旨在用于3D打印的模型的网站提供基本的模型查看器。 该模型使用three.js显示，并且加载程序当前支持STL，Three.js JSON和协议缓冲区编码的模型。 除了基本的查看器功能之外，您还可以直接从查看器缩放，旋转和导出对象到STL文件。 聚合物 three.js ProtoBuf.js 凉亭 第一步 该项目包括bower.json，它应该可以帮助您安装依赖项。 您可以使用以下方法直接从bower存储库安装： bower install model-viewer 另外，您可以通过将git添加到现有的bower.json来直接针对git安装： "mode
Vue使用vue-3d-model组件预览3D三维文件、立体文件，支持旋转、自动播放
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
07-01 5914
基于threeJS的vue 3D展示组件。
vue引入three.js3维地图_vue-chartjs使用 Chart.js 和 Vue.js 搭建简单和漂亮的图表
weixin_39909001的博客
11-20 685
简介vue-chartjs 让你在 Vue 中能更好的使用 Chart.js . 非常适合想要尽快启动和运行简单图表的人。它抽象了一些简单的逻辑, 但是也暴露了 Chart.js 对象, 提供了极大的灵活性。github start 3k+, MIT协议。DEMO 列表条形图折线图圆图饼图雷达图极地图气泡图线图快速上手安装你可以在 npm 下安装 vue-chartjs. 当然, 你也需要在项目中...
Vue 3D Model 3D模型解析展示
zxhjd的博客
03-09 2463
【代码】Vue 3D Model 3D模型解析展示。
vue3+vite结合使用vue-3d-model
02-11
### 如何在 Vue3 和 Vite 项目中使用 `vue-3d-model` #### 安装依赖 为了在 Vue3 和 Vite 项目中集成 `vue-3d-model`，首先需要安装必要的依赖包： ```bash npm install vue-3d-model three @types/three ``` 这一步骤确保了 `vue-3d-model` 及其所需的 Three.js 库被正确引入到项目环境中。 #### 创建组件并加载模型 接下来，在项目的组件内实现三维模型的展示功能。可以创建一个新的 Vue 单文件组件用于显示 3D 模型，如下所示： ```html <template> <div id="app"> <!-- 使用 vue-3d-model 的 ModelViewer 组件 --> <ModelViewer :model-url="'path/to/your/model.gltf'" /> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import { ModelViewer } from 'vue-3d-model'; // 假设这里定义了一些响应式的属性或者其他逻辑... const modelUrl = ref('path/to/your/model.gltf'); </script> <style scoped> /* 自定义样式 */ #app { width: 100%; height: 100vh; } </style> ``` 上述代码片段展示了如何通过 `<ModelViewer>` 标签来嵌入外部 GLTF 文件作为 3D 模型资源[^1]。 #### 配置 vite.config.ts 支持 gltf 加载 为了让 Vite 正确处理 `.gltf` 或其他类型的资产文件，可能还需要调整 `vite.config.ts` 中的相关配置项，以便更好地支持这些静态资源的解析与打包过程: ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [ vue(), // 如果有必要的话，还可以加入更多插件比如优化图片、字体等资源 ], assetsInclude: ['**/*.gltf'], // 明确指定要包含哪些扩展名的文件 }) ``` 这样做的目的是让构建工具知道应该怎样对待特定格式的数据文件，从而避免潜在的问题发生[^2]。 #### 添加额外的功能模块 (可选) 如果希望进一步增强应用体验，例如添加状态管理库 Pinia 或者设置路由，则可以根据实际需求参照官方文档进行相应操作[^3]。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值