案例展示

模型呼吸效果

<template>
    <div id="TO"></div>
</template>

<script setup>
import { getResourceBase, resUrl } from '../../utils/resourceUrl'
import { onMounted } from 'vue'

onMounted(() => {
    //初始化场景
    let TO = new ThingOrigin('fileModel', document.getElementById('TO'), {
        params: {
            resource: {
                serverAddress: getResourceBase()
            }
        },
        scene: {
            ground: {
                //地面
                active: false
            },
            background: {
                type: 'color', //设置背景颜色
                color: {
                    alpha: 1, // 透明度 取值范围0~1
                    color: '#000000' // 背景颜色
                }
            }
        },
        camera: {
            // 相机配置
            position: {
                // 相机位置
                x: 50,
                y: 50,
                z: 200
            }
        },
        // 后处理参数
        effectComposer: {
            // 高亮
            outlinePass: {
                edgeStrength: 5, // 边缘强度
                edgeGlow: 1, // 发光
                edgeThickness: 6, // 光晕粗
                pulsePeriod: 1, // 闪烁
                usePatternTexture: false, // true
                visibleEdgeColor: 'yellow', // 边缘颜色
                hiddenEdgeColor: '#190a05',
                maxOutlineSlots: 8, // 并发描边槽位上限（同时最多多少个模型各自独立颜色呼吸）
                // 呼吸灯可调参数
                breathSpeed: 4.0, // 呼吸脉动速度
                emissiveMin: 0.0, // 自发光强度下限
                emissiveMax: 0.4, // 自发光强度上限（过大易洗白模型）
                edgeMinRatio: 0.5, // 描边强度相对 edgeStrength 的下限比例
                edgeMaxRatio: 0.78, // 描边强度相对 edgeStrength 的上限比例
                emissiveColorMix: 0.35 // 呼吸色混入原 emissive 的最大比例（0~1）
            },
            // 泛光
            bloomPass: {
                strength: 0.05, // 泛光的强度，提升亮部光晕
                radius: 0.4, // 泛光散发的半径
                threshold: 0.98 // 降低阈值，让更多区域产生泛光
            }
        }
    })
    let modelData = {
        modelName: 'fileModel-' + new Date().getTime(), //模型名称
        base: {
            modelUrl: resUrl('/editor/model2/loadFileAsId/589750924') //模型地址
        },
        modelType: 'gltf', //模型类型
        scale: {
            //缩放大小
            x: 2,
            y: 2,
            z: 2
        },
        position: {
            x: 40,
            y: 0,
            z: 10
        }
    }

    for (let i = 0; i < 3; i++) {
        TO.model.loadModel(modelData).then((model) => {
            model.position.set(model.position.x * i, 0, 0)
            //添加到场景中
            TO.scene.add(model)
            //初始化breath效果
            TO.effect.initBreath(model)
        })
    }
})
</script>

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

API 介绍

effect.initBreath

方法签名	返回值	描述
initBreath(model: Object3D)	void	给模型添加呼吸效果

参数说明：

参数名	说明	类型	必填	默认值
model	模型	Object3D	是	-