案例展示

改变模型材质透明度实现淡入淡出效果

开始透明度：

0

结束透明度：

1

<template>
    <div style="position: relative">
        <div id="TO"></div>
        <el-form id="formFade" label-width="90px">
            <el-form-item label="开始透明度：">
                <div style="display: flex; align-items: center; width: 100%">
                    <el-slider
                        v-model="startOpacity"
                        :min="0"
                        :max="1"
                        :step="0.1"
                        style="flex: 1; margin-right: 5px" />
                    <span class="opacity-value">{{ startOpacity }}</span>
                </div>
            </el-form-item>
            <el-form-item label="结束透明度：">
                <div style="display: flex; align-items: center; width: 100%">
                    <el-slider
                        v-model="endOpacity"
                        :min="0"
                        :max="1"
                        :step="0.1"
                        style="flex: 1; margin-right: 5px" />
                    <span class="opacity-value">{{ endOpacity }}</span>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleOpacityChange()" size="small">执行</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElForm, ElFormItem, ElSlider, ElButton } from 'element-plus'

let TO = null,
    originModel = null

const startOpacity = ref(0)
const endOpacity = ref(1)

onMounted(() => {
    //初始化场景
    TO = new ThingOrigin('fileModel', document.getElementById('TO'), {
        scene: {
            background: {
                type: 'color', //天空盒
                color: {
                    alpha: 1,
                    color: '#666666'
                }
            },
            ground: {
                active: false
            }
        },
        helper: {
            //辅助工具
            axes: {
                active: false
            },
            grid: {
                active: false
            }
        },
        camera: {
            //相机参数
            position: {
                x: -20,
                y: 100,
                z: 200
            }
        }
    })

    //导入模型
    TO.model
        .loadModel({
            modelName: 'fileModel-' + new Date().getTime(), //模型名称
            base: {
                modelUrl: 'https://124.70.30.193:8443/model2/loadFileAsId/613112990' //模型地址
            },
            modelType: 'gltf', //模型类型
            scale: {
                //缩放
                x: 4,
                y: 4,
                z: 4
            },
            position: {
                x: -20,
                y: 0,
                z: 0
            }
        })
        .then((model) => {
            originModel = model
            //添加到场景中
            TO.scene.add(originModel)
        })
})

// 透明度改变处理
function handleOpacityChange() {
    if (!originModel) return
    TO.animate.modelOpacity(originModel, startOpacity.value, endOpacity.value, 1000)
    // // 淡入：从完全透明到完全不透明
    // TO.animate.modelOpacity(originModel, 0, 1, 1000);
    // // 淡出：从完全不透明到完全透明
    // TO.animate.modelOpacity(originModel, 1, 0, 1000);
    // // 从半透明到完全不透明
    // TO.animate.modelOpacity(originModel, 0.5, 1, 1000);
}
</script>

<style scoped>
#TO {
    width: 100%;
    height: 400px;
    position: relative;
}

#formFade {
    position: absolute;
    top: 10px;
    right: 10px;
    min-width: 260px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    z-index: 1000;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 12px;
}

.opacity-value {
    min-width: 40px;
    text-align: right;
    font-size: 12px;
    color: #fff;
}

#formFade :deep(.el-form-item__label) {
    color: #fff;
    font-size: 12px;
}
</style>

API 介绍

animate.modelOpacity

方法签名	返回值	描述
modelOpacity(model: Object3D,startOpacity: number, endOpacity: number, time: number, onComplete?: () => void)	void	模型透明度动画效果

参数说明：

参数名	说明	类型	必填	默认值
model	模型	Object3D	是	-
startOpacity	开始透明度（0-1）	number	是	-
endOpacity	结束透明度（0-1）	number	是	-
time	完成时间（毫秒）	number	是	-
onComplete	完成回调	Function		-