案例展示

模型淡入效果

<template>
  <div style="position: relative">
    <div id="TO"></div>
    <el-button type="primary" @click="animateIn()" size="small" class="btn btnIn">淡入</el-button>
    <el-button type="primary" @click="animateOut()" size="small" class="btn btnOut">淡出</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/agv.gltf` //模型地址
      },
      modelType: "gltf", //模型类型
      scale: {//缩放
        x: 4,
        y: 4,
        z: 4,
      },
    }
  ).then((model) => {
    originModel = model.scene;
    //添加到场景中
    TO.scene.add(originModel);

    animateIn();
    //间隔 5s 
    setTimeout(() => {
      animateOut();
    }, 5000);
  });
});

function animateIn() {
  //淡入
  TO.animate.modelFadeIn(originModel, 2000);
}

function animateOut() {
  //淡出
  TO.animate.modelFadeOut(originModel, 2000);
}

</script>

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

.btn {
  position: absolute;
  top: 10px;
  right: 70px;
}

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

API 介绍

animate.modelFadeIn

方法签名	返回值	描述
modelFadeIn(model: Object3D, time: number)	void	模型淡入效果

animate.modelFadeOut

方法签名	返回值	描述
modelFadeOut(model: Object3D, time: number)	void	模型淡出效果

参数说明：

参数名	说明	类型	必填	默认值
model	模型	Object3D	是	-
time	完成时间（毫秒）	number	是	-