案例展示

补间平移动画

<template>
    <div style="position: relative">
        <div id="TO"></div>
        <el-button type="primary" @click="startTween()" size="small" class="btn">开始移动</el-button>
    </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { ElButton, ElInput, ElCard } from 'element-plus'
let TO = null,
    originModel = null
onMounted(() => {
    // 初始化场景
    TO = new ThingOrigin('fileModel', document.getElementById('TO'), {
        scene: {
            background: {
                type: 'color', //天空盒
                color: {
                    alpha: 1,
                    color: '#000000'
                }
            },
            ground: {
                active: false
            }
        },
        camera: {
            //相机参数
            position: {
                x: -20,
                y: 100,
                z: 200
            }
        },
        helper: {
            //辅助工具
            axes: {
                active: false
            },
            grid: {
                active: false
            }
        }
    })

    //导入模型
    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
            }
        })
        .then((model) => {
            originModel = model
            //添加模型到场景中
            TO.scene.add(originModel)
            //开始动画
            startTween()
        })
})

//开始动画
function startTween() {
    //移动
    TO.animate.move(originModel, 'z', -100, 100, 2000)
}
</script>

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

.btn {
    position: absolute;
    top: 10px;
    right: 10px;
}
</style>

API 介绍

animate.move

方法签名	返回值	描述
move(model: Object3D, axis: string, from: number, to: number, time: number)	Tween<any>	补间平移动画

参数说明：

参数名	说明	类型	必填	默认值
model	模型	Object3D	是	-
axis	方向，可传入字符串 'x' | 'y' | 'z'	string	是	-
from	起始位置	number	是	-
to	终止位置	number	是	-
time	完成时间（单位：毫秒）	number	是	-