uni-app 3d模型预览组件

寰宇软件

于 2024-08-28 09:52:40 发布

阅读量277

点赞数 9

分类专栏：前端文章标签： uni-app

本文链接：https://blog.csdn.net/u012229791/article/details/141629152

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.前段时间需要uni开发3d模型预览

老规矩先放视频：

uni-app模型展示

插件地址：c-3d-model - DCloud 插件市场

需要安装three，这个插件比较大，小程序引入需要单独分包

在uni插件市场上找到的3d模型预览组件有很多，这个兼容的移动端比较好，所以选择了这个插件，插件作者代码跟着文档做就行，需要注意的是3d模型gltf格式的插件不支持，联系了作者说下一个版本支持。感谢作者这么用心做的插件。

<template>
    <view>
        <c-3d-model ref="modelRef" :height="height" :src='src'
            :environmentSrc='environmentSrc' 
            :decoderPath='decoderPath' :autoRotate='autoRotate'
            :modelScale="modelScale" :ambientLight='0' @loaded='onLoaded'></c-3d-model>
         <view class="content">
            <view>区域渲染</view>
            <view class="btnBox">
                <button @click="height='800rpx'" size="mini">高度800rpx</button>
                <button @click="height='1000rpx'" size="mini">高度1000rpx</button>
            </view>
            <view>动画控制</view>
            <view class="btnBox">
                <button @click="$refs.modelRef.playAnimation(0)" size="mini">播放</button>
                <button @click="$refs.modelRef.stopAnimation(0)" size="mini">停止</button>
            </view>
            <view>场景控制</view>
            <view class="btnBox">
                <button @click="autoRotate=true" size="mini">自动旋转</button>
                <button @click="autoRotate=false" size="mini">停止旋转</button>
            </view>
            <view>模型</view>
            <view class="btnBox">
                <button @click="modelScale=[0.6,0.6,0.6],src='https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/8db3e88d-879f-4f1d-bf34-616f36ecad80.glb'" size="mini">盘子</button>
                <!-- #ifdef MP -->
                <!-- 小程序端暂不支持DRACO压缩模型-->
                <button @click="modelScale=[0.2,0.2,0.2],src='https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/5d175218-1f6a-41ff-9e6b-7247304dfb05.glb'" size="mini">头盔</button>
                <!-- #endif -->
                <!-- #ifndef MP -->
                <button @click="modelScale=[0.2,0.2,0.2],src='https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/1ec4ee9c-4108-49b6-8560-fdf27989db69.gltf'" size="mini">头盔</button>
                <!-- #endif -->
            </view>
            <view>环境</view>
            <view class="btnBox">
                <button @click="environmentSrc='https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/b45a40ff-e04f-43d7-afea-399e398ee35a.hdr'" size="mini">环境一</button>
                <button @click="environmentSrc='https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/09941b83-5dad-4cae-855e-5de245973954.hdr'" size="mini">环境二</button>
                <button @click="environmentSrc='https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/4339b8c6-481b-48f9-bc62-3b12cb7194d4.hdr'" size="mini">环境三</button>
                <button @click="environmentSrc='https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/2edfd004-f4d2-45f1-8dac-3be1096bd0ce.hdr'" size="mini">环境四</button>
            </view>
         </view>
    </view>
</template>

<script>

    export default {
        data() {
            return {
                height: '1000rpx',
                autoRotate:false,
                decoderPath:'https://cloud.vuedata.wang/draco/',
                modelScale:[0.6,0.6,0.6],
                src:'https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/8db3e88d-879f-4f1d-bf34-616f36ecad80.glb',
                environmentSrc:'https://mp-eeab6da6-80cd-4e80-844a-66b2a7203834.cdn.bspapp.com/cloudstorage/b45a40ff-e04f-43d7-afea-399e398ee35a.hdr'
            }
        },
        methods: {
            onLoaded() {
                console.log('模型加载完成');
            }
        },
        onUnload() {
            this.$refs.modelRef.call('dispose')
        }
    }
</script>

<style lang="scss">
    .page{
        width: 100vw;
        overflow-x: hidden;
    }
    .content{
        padding: 20rpx;
        font-size: 28rpx;
    }
    .btnBox{
        width: 100%;
        display: flex;align-items: center;
        margin-top: 20rpx;
        margin-bottom: 30rpx;
    }
</style>

最后补充：模型glb的在不失真的情况可以做到 100多kb，这对于网络请求还是很有帮助。