ThingOrigin.js

案例展示 ​

间补旋转动画(旋转角度)

<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';
let TO = null, originModel = null;
onMounted(() => {
  // 初始化场景
  TO = new ThingOrigin("fileModel", document.getElementById("TO"), {
    helper: {//辅助工具
      axes: {
        active: false,
      },
      grid: {
        active: false,
      },
    }
  })
  //导入模型
  TO.model.initFileModel(
    {
      modelName: "fileModel-" + new Date().getTime(), //模型名称
      base: {
        modelUrl: `${import.meta.env.BASE_URL}models/abb.gltf` //模型地址
      },
      modelType: "gltf", //模型类型
      scale: { //缩放
        x: 2,
        y: 2,
        z: 2,
      }
    }
  ).then((model) => {
    originModel = model.scene;
    //添加到场景中
    TO.scene.add(originModel);
    //开始动画
    startTween();
  });
});

//开始动画
function startTween() {
  //找到模型对象
  let rotateModel = TO.scene.getObjectByProperty("name", "WS30-1");
  //旋转
  TO.animate.rotateAngle(rotateModel, 'y', 0, 180, 2000);
}
</script>

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

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

API 介绍 ​

animate.rotateAngle ​

方法签名返回值描述
rotateAngle(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是-
mode运动模式：linear（匀速）、bounceOut（弹开）string-linear