vue-3d-model属性

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

这篇文章就不介绍具体怎么引入了，可以到官网查阅一下，这里主要是记录一下这个组件的属性，方便我自己和大家查阅使用，具体支持哪些文件，我放在文章最后：

配置属性：

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

下面是vue-3d-model支持解析的文件类型：

1.  
   <!-- obj -->
2.  
   <template>
3.  
   <model-obj src="3d-model/obj/LeePerrySmith.obj"/>
4.  
   </template>
5.  
    
6.  
   <!-- obj mtl -->
7.  
   <template>
8.  
   <model-obj
9.  
   src="3d-model/obj mtl/male/male.obj"
10.  
    mtl="3d-model/obj mtl/male/male.mtl"
11.  
    />
12.  
    </template>
13.  
     
14.  
    <!-- json -->
15.  
    <template>
16.  
    <model-three src="3d-model/json/scene.json"/>
17.  
    </template>
18.  
     
19.  
    <!-- fbx -->
20.  
    <template>
21.  
    <model-fbx src="3d-model/fbx/dancing.fbx" />
22.  
    </template>
23.  
     
24.  
    <!-- stl -->
25.  
    <template>
26.  
    <model-stl src="3d-model/stl/colored.stl" />
27.  
    </template>
28.  
     
29.  
    <!-- dae -->
30.  
    <template>
31.  
    <model-collada src="3d-model/dae/elf/elf.dae" />
32.  
    </template>
33.  
     
34.  
    <!-- dae -->
35.  
    <template>
36.  
    <model-ply src="3d-model/ply/exaple.ply" />
37.  
    </template>
38.  
     
39.  
    <!-- gltf -->
40.  
    <template>
41.  
    <model-gltf src="3d-model/gltf/exaple.gltf" />
42.  
    </template>

这篇好文章是转载于：学新通技术网