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

npm install vue-3d-model --save

<template>
    <div class="threeDPreview">
        <!-- 3D立体文件预览 -->
        <div if="threeDComponents" class="threeD">
            <component
                :is="threeDComponents.componentName" 
                :backgroundAlpha="1" 
                :backgroundColor="'#000'"
                :rotation="ratation" 
                :src="`${encodeURIComponent(_fileURL)}`" 
                @load="onLoad" />
        </div>
    </div>
</template>
<script>
//引入3D预览插件 npm install vue-3d-model --save
import { ModelCollada, ModelFbx, ModelGltf, ModelThree, ModelObj, ModelPly, ModelStl, } from 'vue-3d-model';
export default {
    components: {
        ModelCollada, ModelFbx, ModelGltf, ModelThree, ModelObj, ModelPly, ModelStl,
    },
    data() {
        return {
            load: null,
            threeDfileTypes: [
                { label: 'dae', value: 1, iconURL: 'static/img/fileType/3D/dae.svg', componentName: 'ModelCollada' },
                { label: 'fbx', value: 2, iconURL: 'static/img/fileType/3D/fbx.svg', componentName: 'ModelFbx' },
                { label: 'gltf', value: 3, iconURL: 'static/img/fileType/3D/gltf.svg', componentName: 'ModelGltf' },
                { label: 'json', value: 4, iconURL: 'static/img/fileType/3D/json.svg', componentName: 'ModelThree' },
                { label: 'obj', value: 5, iconURL: 'static/img/fileType/3D/obj.svg', componentName: 'ModelObj' },
                { label: 'ply', value: 6, iconURL: 'static/img/fileType/3D/ply.svg', componentName: 'ModelPly' },
                { label: 'stl', value: 7, iconURL: 'static/img/fileType/3D/stl.svg', componentName: 'ModelStl' },
            ],
            ratation: {
                x: -Math.PI / 2,
                y: 0,
                z: 0,
            },
            _fileURL: '',
            _fileType: '',
        };
    },
    props: ["fileURL", "fileType"],
    watch: {
        fileURL: {
            handler(d) {
                this._fileURL = decodeURIComponent(d || this.$route.query.fileURL);
            }, deep: true, immediate: true,
        },
        fileType: {
            handler(d) {
                this._fileType = d || this._fileURL.split('.').slice(-1)[0];
                // 如果是3D文件个后缀名格式
                if (this.threeDfileTypes.find(v => v.label == this._fileType)) {
                    this.showLoad();
                }
            }, deep: true, immediate: true,
        },
    },
    computed: {
        threeDComponents() {
            return this.threeDfileTypes.find(v => v.label == this._fileType);
        },
    },
    methods: {
        showLoad() { this.load = this.$loading({ text: "加载中…" }); },
        hideLoad() { this.load && this.load.close(); },
        onLoad(d) {
            this.rotate();
            this.hideLoad();
        },
        rotate() {
            requestAnimationFrame(this.rotate);//实现自动旋转效果
            this.rotation.z += 0.01;
        },
    }
};
</script>
<style lang="scss" scoped>
.threeDPreview {
    position: relative;
    .threeD {
        width: 100%;
        height: calc(100vh - 60px);
    }
}
</style>