vue-3d-model属性介绍-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue-3d-model属性介绍。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue-3d-model是一个可以解析3d模型的组件，基于threeJS和webGL；

这篇文章就不介绍具体怎么引入了，可以到官网查阅一下，这里主要是记录一下这个组件的属性，方便我自己和大家查阅使用，具体支持哪些文件，我放在文章最后：文章来源地址https://www.toymoban.com/news/detail-532916.html

配置属性：

width                - 宽度，和高度一起才生效
height               - 高度，和宽度一起才生效
src                  - 3d文件路径，e.g. example/models/obj/LeePerrySmith.obj
background-color     - 背景颜色
background-alpha     - 背景颜色透明度
controls-options     - 是否可 旋转、放大、移动
rotation             - 控制模型角度，旋转中心
:controls-options="{
    enableRotate: true,  // 是否可旋转
    enableZoom: true,    // 是否可缩放
    enablePan: true      // 是否可移动（鼠标右键可以移动模型）
}"
on-click             - 鼠标点击事件
on-mousemove         - 鼠标悬浮事件
on-load              - 模型加载完毕的回调事件

下面是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>

到了这里，关于vue-3d-model属性介绍的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！