wl-bim-viewer

一个用于在浏览器上展示bim模型的vue插件，可以预览转化后的BIM、CAD文件。
基于vue和autodesk forge viewer写成。
目前支持单模型加载及多模型顺序加载。
其他特性正在扩展中。

传送门：Github & autodesk forge viewer文档

在线访问

快速上手

npm i wl-bim-viewer -S

import wlBimViewer from "wl-bim-viewer";`
import "wl-bim-viewer/lib/wl-bim-viewer.css"
Vue.use(wlBimViewer);

<wl-bim-viewer multiple :docs="bims" class="wl-viewer">
</wl-bim-viewer>

重要更新

1.1.0 减少组件包体积，将js依赖cdn；请勿使用低于1.1.0版本

文档

Attributes

序号	参数	说明	类型	默认值
1	docs	模型数据数组，元素为对象且至少需要一个path字段（模型文件路径，可配置）	Array	-
2	props	配置项,详见下	Object	-
3	multiple	是否开启多模型顺序加载	Boolean	false

props

序号	参数	说明	默认字段	字段值类型
1	path	用于配置docs参数内的模型文件路径字段，必填	path	String
2	options	用于loadModel时的自定义模型配置项，可配置模型角度、位置等。此字段应是一个对象	options	Object
3	name	用于docs参数内模型的名称字段，选填	name	String

Events

序号	事件名称	说明	回调参数
1	init	viewer初始化事件，此时模型还未加载，可进行配置或注册事件操作	function(viewer) 依次为当前viewer对象
2	partSelect	构件点击事件	function(selections, event, info) 以此为当前选择构件、当前点击对象、构件信息
3	cameraMove	摄像头移动事件	function(rvt) 依次为当前rvt对象
4	successAll	多模型时，全部加载完毕事件	function(result) 依次为全部模型对象数组
5	errorAll	多模型时，全部加载失败事件	function(result) 依次为失败信息
6	success	模型加载成功回调	function(result) 依次为当前模型信息
7	loaded	模型渲染完毕回调	function(evt) 依次为当前模型信息
8	error	模型加载失败回调	function(name, code) 依次为当前模型docs参数name字段、错误码

Form Methods

序号	方法名	说明	参数
1	clearColor	清空模型构件上色	-
2	viewerFiting	聚焦摄像头	function(ids, focal) 依次为需要聚焦至的构件id、焦距
3	unloadModel	卸载model模型	function(model) 依次为需要卸载的模型model，无则默认为当前model
4	uploadViewer	卸载viewer	-
5	getModelInfo	获取模型信息	function(viewer, models) 依次为viewer对象、已加载的model对象

Slot

序号	name	说明
1	-	位于模型dom下的自定义dom区

版本记录

1.1.0 减少组件包体积，将js依赖cdn

1.0.0 因国外cdn时间波动太大，将js依赖本地化，并优化初始化事件防止init错误

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

一个用于在浏览器上展示bim模型的vue插件相关推荐

bim展示 java_一个用于在浏览器上展示bim模型的vue插件
# wl-bim-viewer 一个用于在浏览器上展示bim模型的vue插件,可以预览转化后的CAD文件. 基于vue和autodesk forge viewer写成. 目前支持单模型加载及多模型顺序 ...
model-viewer(模型观察者)，可用于查看 Web 上的 3D 模型并与之交互
我做的Demo链接(pc或手机都可以看): 模型观察者model-viewer 码云demo地址: javascriptWeb3D: 模型观察者-model-viewer Demo 手机+PC效果图: ...
输入一个url到浏览器页面展示都经历了哪些过程
在日常的浏览器访问过程中,我们肯定会访问n多页面,但是我们输入一个网址后是如何变成一个页面展示在我们面前,从一个url到页面的展示这个过程中,我们的浏览器都经历了一些什么? 步骤 → 1- 输入网址 ...
回调函数自定义传参_koroFileHeader：一个用于生成文件头部注释和函数注释的插件...
小金子读完需要 2分钟速读仅需 1 分钟大家好,我是你们的小金子. 今天给大家分享的这个工具呢?对于使用 VS Code 的同学来讲,是一个好东西. koroFileHeader,一个在 vsc ...
vscode 注释快捷键_koroFileHeader：一个用于生成文件头部注释和函数注释的插件
大家好,我是你们的小金子. 今天给大家分享的这个工具呢?对于使用 VS Code 的同学来讲,是一个好东西. koroFileHeader,一个在 vscode 中用于生成文件头部注释和函数注释的插件 ...
unity在UI界面上展示旋转模型
1.创建一个Raw Image用来在UI界面进行显示模型 2.将图片在界面调整到合适位置,根据自己的需要进行调整 3.在Assets文件夹下创建"渲染器纹理" 后面如果觉得显示不够 ...
three.js加载3D模型,在网页上展示3D模型（.glb.gltf.fbx格式）
Three.js是一款开源的主流3D绘图JS引擎,简单点,可以将它理解为three+js就可以了,three表示3D,js表示JavaScript的意思. 结构 .glb.gltf文件最好放在服务器上 ...
使用vue-3D-model(一个展示3D模型的 Vue 组件)
1.安装 npm install vue-3d-model 2.引入在vue的HTML中引入 (在那个地方用在那引入就可以了) 3.支持的格式.功能.写法提供一个给刚接触的同学熟悉的demo 话不 ...
UGUI上展示3d模型
如何在UGUI的panel前面展示3D物体. 1.首先创建UI背景,再将要展示的3d物体拖到UI背景前在scene下的效果,这就是我们想要展示在Game视图中的效果可是在game视图中却没有显示我 ...

一个用于在浏览器上展示bim模型的vue插件

wl-bim-viewer

在线访问

快速上手

重要更新

文档

Attributes

props

Events

Form Methods

Slot

版本记录

Project setup

Compiles and hot-reloads for development

Compiles and minifies for production

一个用于在浏览器上展示bim模型的vue插件相关推荐

最新文章

热门文章