Vue使用vue-3d-model组件预览3D三维文件、立体文件，支持旋转、自动播放

实现效果

Tips:先泼个冷水，这个预览3D组件有个致命的缺陷——不能设置材质、皮肤文件的目录路径，必须要和3d文件放在同一个目录，如果项目是用hash模式(url后面会有/#/这种井号)，就会导致无法读取根目录的材质文件。所以推荐了解下 vue-3d-loader

 安装先

npm install vue-3d-model --save

属性

事件

插槽

1.  
   <template>
2.  
   <div class="threeDPreview">
3.  
    
4.  
   <!-- 3D立体文件预览 -->
5.  
   <div if="threeDComponents" class="threeD">
6.  
   <component
7.  
   :is="threeDComponents.componentName"
8.  
   :backgroundAlpha="1"
9.  
   :backgroundColor="'#000'"
10.  
    :rotation="ratation"
11.  
    :src="`${encodeURIComponent(_fileURL)}`"
12.  
    @load="onLoad" />
13.  
    </div>
14.  
     
15.  
    </div>
16.  
    </template>
17.  
     
18.  
    <script>
19.  
    //引入3D预览插件 npm install vue-3d-model --save
20.  
    import { ModelCollada, ModelFbx, ModelGltf, ModelThree, ModelObj, ModelPly, ModelStl, } from 'vue-3d-model';
21.  
     
22.  
    export default {
23.  
    components: {
24.  
    ModelCollada, ModelFbx, ModelGltf, ModelThree, ModelObj, ModelPly, ModelStl,
25.  
    },
26.  
    data() {
27.  
    return {
28.  
    load: null,
29.  
    threeDfileTypes: [
30.  
    { label: 'dae', value: 1, iconURL: 'static/img/fileType/3D/dae.svg', componentName: 'ModelCollada' },
31.  
    { label: 'fbx', value: 2, iconURL: 'static/img/fileType/3D/fbx.svg', componentName: 'ModelFbx' },
32.  
    { label: 'gltf', value: 3, iconURL: 'static/img/fileType/3D/gltf.svg', componentName: 'ModelGltf' },
33.  
    { label: 'json', value: 4, iconURL: 'static/img/fileType/3D/json.svg', componentName: 'ModelThree' },
34.  
    { label: 'obj', value: 5, iconURL: 'static/img/fileType/3D/obj.svg', componentName: 'ModelObj' },
35.  
    { label: 'ply', value: 6, iconURL: 'static/img/fileType/3D/ply.svg', componentName: 'ModelPly' },
36.  
    { label: 'stl', value: 7, iconURL: 'static/img/fileType/3D/stl.svg', componentName: 'ModelStl' },
37.  
    ],
38.  
    ratation: {
39.  
    x: -Math.PI / 2,
40.  
    y: 0,
41.  
    z: 0,
42.  
    },
43.  
    _fileURL: '',
44.  
    _fileType: '',
45.  
    };
46.  
    },
47.  
    props: ["fileURL", "fileType"],
48.  
    watch: {
49.  
    fileURL: {
50.  
    handler(d) {
51.  
    this._fileURL = decodeURIComponent(d || this.$route.query.fileURL);
52.  
    }, deep: true, immediate: true,
53.  
    },
54.  
    fileType: {
55.  
    handler(d) {
56.  
    this._fileType = d || this._fileURL.split('.').slice(-1)[0];
57.  
    // 如果是3D文件个后缀名格式
58.  
    if (this.threeDfileTypes.find(v => v.label == this._fileType)) {
59.  
    this.showLoad();
60.  
    }
61.  
    }, deep: true, immediate: true,
62.  
    },
63.  
    },
64.  
    computed: {
65.  
    threeDComponents() {
66.  
    return this.threeDfileTypes.find(v => v.label == this._fileType);
67.  
    },
68.  
    },
69.  
    methods: {
70.  
    showLoad() { this.load = this.$loading({ text: "加载中…" }); },
71.  
    hideLoad() { this.load && this.load.close(); },
72.  
    onLoad(d) {
73.  
    this.rotate();
74.  
    this.hideLoad();
75.  
    },
76.  
    rotate() {
77.  
    requestAnimationFrame(this.rotate);//实现自动旋转效果
78.  
    this.rotation.z = 0.01;
79.  
    },
80.  
    }
81.  
    };
82.  
    </script>
83.  
     
84.  
    <style lang="scss" scoped>
85.  
    .threeDPreview {
86.  
    position: relative;
87.  
    .threeD {
88.  
    width: 100%;
89.  
    height: calc(100vh - 60px);
90.  
    }
91.  
    }
92.  
    </style>

相关API文档来源：

安装 | Vue 3D ModelVue 3D Modelhttps://vue-3d-model.netlify.app/zh/guide/installation/

可能会遇到的报错

其他可以预览3D的组件，前列腺推荐！

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