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

---

写在前面

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

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

下面是演示gif：

代码说明

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

 
1
2

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.initThre
1
2
3
4