Vue.js 通过举一反三建立企业级组件库

---

写在前面

本文用vue+threejs写物体动画：物体缩放动画。

实现原理：让缩放值根据秒数的增加呈函数式变化，以达到动画展示的效果。

下面是演示gif：

代码说明

1.准备一个id容器，用于插入渲染器节点

<template><div class="item"><div id="THREE42"></div></div>
</template> 

2.引入threejs及需要的模块，并在mounted方法中调用initThreejs方法

• OrbitControls 轨道控制器，用于画面响应鼠标的操作
• DRACOLoader 用于加载.drc模型

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";

mounted() {this.initThreejs();
}, 

3.initThreejs的全部代码及其说明

• 定义一个跟踪时间的对象：let clock = new THREE.Clock();下面会用到它的.getElapsedTime()