案例展示

播放模型内部动画

TIP

支持.gltf格式模型。

<template>
    <div style="position: relative">
        <div id="TO"></div>

        <el-button :disabled="!isActive" type="primary" size="small" id="explode" @click="playAnimation()"
            >播放</el-button
        >
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { ElButton, ElInput, ElCard } from 'element-plus'
const isActive = ref(false)
let TO
onMounted(() => {
    // 初始化场景
    TO = new ThingOrigin('fileModel', document.getElementById('TO'), {
        scene: {
            environment: {
                intensity: 0.6
            }
        },
        helper: {
            // 辅助工具
            axes: {
                active: false
            },
            grid: {
                active: false
            }
        },
        camera: {
            // 相机配置
            position: {
                // 相机位置
                x: 0,
                y: 50,
                z: 100
            }
        }
    })

    //导入模型
    TO.model
        .loadModel({
            modelType: 'gltf', //模型类型
            modelName: '数字机床-1', //模型名称
            base: {
                modelUrl: 'https://124.70.30.193:8443/model2/loadFileAsId/878966042' //模型地址
            },
            rotation: {
                x: 0,
                y: -1.5708,
                z: 0
            }
        })
        .then((model) => {
            //添加模型到场景中
            TO.scene.add(model)
            isActive.value = true
            playAnimation()
        })
})
//播放动画
function playAnimation() {
    const machine = TO.scene.getObjectByProperty('name', '数字机床-1')
    if (!machine.animations || machine.animations.length === 0) {
        console.warn(`机床没有动画`)
        return
    }

    TO.scene.playAnimation(machine, 0, true, 2)
}
</script>

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

#explode {
    position: absolute;
    top: 10px;
    right: 10px;
}
</style>

API 介绍

scene.playAnimation

方法签名	返回值	描述
playAnimation(model: Object3D, index: number[] | number, loop: boolean, timeScale: number = 1)		播放模型内置动画

参数说明：

参数名	说明	类型	必填	默认值
model	模型	Object3D	是	-
index	播放动画的下标	number[] | number	是	-
loop	是否循环播放	boolean	是	-
timeScale	时间缩放因子	number	否	1