vue-3d-model是一個可以解析3d模型的組件,基于threeJS和webGL;文章來源:http://www.zghlxwxcb.cn/news/detail-532916.html
這篇文章就不介紹具體怎么引入了,可以到官網(wǎng)查閱一下,這里主要是記錄一下這個組件的屬性,方便我自己和大家查閱使用,具體支持哪些文件,我放在文章最后:文章來源地址http://www.zghlxwxcb.cn/news/detail-532916.html
配置屬性:
width - 寬度,和高度一起才生效
height - 高度,和寬度一起才生效
src - 3d文件路徑,e.g. example/models/obj/LeePerrySmith.obj
background-color - 背景顏色
background-alpha - 背景顏色透明度
controls-options - 是否可 旋轉(zhuǎn)、放大、移動
rotation - 控制模型角度,旋轉(zhuǎn)中心
:controls-options="{
enableRotate: true, // 是否可旋轉(zhuǎn)
enableZoom: true, // 是否可縮放
enablePan: true // 是否可移動(鼠標右鍵可以移動模型)
}"
on-click - 鼠標點擊事件
on-mousemove - 鼠標懸浮事件
on-load - 模型加載完畢的回調(diào)事件
下面是vue-3d-model支持解析的文件類型:
<!-- obj -->
<template>
<model-obj src="3d-model/obj/LeePerrySmith.obj"/>
</template>
<!-- obj + mtl -->
<template>
<model-obj
src="3d-model/obj+mtl/male/male.obj"
mtl="3d-model/obj+mtl/male/male.mtl"
/>
</template>
<!-- json -->
<template>
<model-three src="3d-model/json/scene.json"/>
</template>
<!-- fbx -->
<template>
<model-fbx src="3d-model/fbx/dancing.fbx" />
</template>
<!-- stl -->
<template>
<model-stl src="3d-model/stl/colored.stl" />
</template>
<!-- dae -->
<template>
<model-collada src="3d-model/dae/elf/elf.dae" />
</template>
<!-- dae -->
<template>
<model-ply src="3d-model/ply/exaple.ply" />
</template>
<!-- gltf -->
<template>
<model-gltf src="3d-model/gltf/exaple.gltf" />
</template>
到了這里,關(guān)于vue-3d-model屬性介紹的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!