three.js 画一个旋转的立方体

学习交流欢迎加群：789723098，博主会将一些demo整理共享

试想一下，如果我们的周围的事物都是静止的，那将是多么无聊的一个世界；同样的，我们创建出的场景如果是静止的，只能满足我们一时的视觉体验，时间一长会让我们感觉到枯燥无聊，所以要营造好的视觉体验和享受，就必须让场景动起来，这样才能给我们以震撼的效果。接下来做一个旋转的立方体实例。在此之前有一个问题：

无论学WebGL还是Three.js，为什么人们总爱拿立方体做文章，或者从画立方体开始？我自己总结的有以下几点原因：

(1)立方体拓扑结构简单，顶点数少，方便绘制

(2)很多的场景贴图都会用到立方体，例如天空盒

(3)天空盒又是创建大型场景贴图或场景视觉导航必不可少的神器

基于以上三点，我也是从死磕立方体开始的。

首先必须先创建一个立方体，这个可以参考我另一片博客：点击打开链接，里面有几种基本几何的创建示例。立方体创建好之后，就要让它动起来，那怎样让其旋转起来呢？要旋转首先必须绕一根目标轴旋转，这里我们选择绕X、Y、Z轴旋转，其次要考虑旋转的速度，为什么会发生旋转这个过程？这里举一个例子，大家小时候可能玩过一个游戏，你会拉着小伙伴的手，然后站在原地转起来，这里你就是目标轴，当你给定一个旋转速度，你的小伙伴也会跟着你转起来，当你停下，你的小伙伴也就停下，上边有可能举得不太恰当（ps:有时候也会把小伙伴