写在前面
本文用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的全部代码及其说明