案例展示

播放模型内部动画

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';
const isActive = ref(false);
let TO;
onMounted(() => {
    // 初始化场景
    TO = new ThingOrigin("fileModel", document.getElementById("TO"), {
        helper: { // 辅助工具
            axes: {
                active: false,
            },
            grid: {
                active: false,
            },
        }
    })

    //导入模型
    TO.model.initFileModel(
        {
            "modelType": "gltf", //模型类型
            "modelName": "数字机床-1",//模型名称
            "base": {
                "modelUrl": "http://124.70.30.193:8084/model2/loadFileAsId/3014"  //模型地址
            },
            "rotation": {
                "x": 0,
                "y": -1.5708,
                "z": 0
            }
        }
    ).then((model) => {
        //添加模型到场景中
        TO.scene.add(model.scene);
        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