Three.js中引入dat.gui库实现界面组件控制动画速度变量
场景
Three.js中使用requestAnimationFrame方法实现立方体转动和小球跳动的动画：
在上面的基础上，引入dat.GUI的库，能很容易就创建出一个简单的界面组件
用以修改代码中的变量。
比如我们用其控制动画的速度，实现效果如下
注：
博客：
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
首先下载库dat-gui.js
将其引入到html中
然后新建界面并设置两个变量
var controls = new function () { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }; var gui = new dat.GUI(); gui.add(controls, ‘rotationSpeed‘, 0, 0.5); gui.add(controls, ‘bouncingSpeed‘, 0, 0.5);
然后再实现动画的速度控制的变量改为这两个变量
cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed;
以及
step += controls.bouncingSpeed; sphere.position.x = 20 + ( 10 * (Math.cos(step))); sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));
完整示例代码
dat.gui的使用
"WebGL-output">
原文：https://www.cnblogs.com/badaoliumangqizhi/p/15100390.html