学习交流欢迎加群:789723098,博主会将一些demo整理共享
试想一下,如果我们的周围的事物都是静止的,那将是多么无聊的一个世界;同样的,我们创建出的场景如果是静止的,只能满足我们一时的视觉体验,时间一长会让我们感觉到枯燥无聊,所以要营造好的视觉体验和享受,就必须让场景动起来,这样才能给我们以震撼的效果。接下来做一个旋转的立方体实例。在此之前有一个问题:
无论学WebGL还是Three.js,为什么人们总爱拿立方体做文章,或者从画立方体开始?我自己总结的有以下几点原因:
(1)立方体拓扑结构简单,顶点数少,方便绘制
(2)很多的场景贴图都会用到立方体,例如天空盒
(3)天空盒又是创建大型场景贴图或场景视觉导航必不可少的神器
基于以上三点,我也是从死磕立方体开始的。
首先必须先创建一个立方体,这个可以参考我另一片博客:点击打开链接,里面有几种基本几何的创建示例。立方体创建好之后,就要让它动起来,那怎样让其旋转起来呢?要旋转首先必须绕一根目标轴旋转,这里我们选择绕X、Y、Z轴旋转,其次要考虑旋转的速度,为什么会发生旋转这个过程?这里举一个例子,大家小时候可能玩过一个游戏,你会拉着小伙伴的手,然后站在原地转起来,这里你就是目标轴,当你给定一个旋转速度,你的小伙伴也会跟着你转起来,当你停下,你的小伙伴也就停下,上边有可能举得不太恰当(ps:有时候也会把小伙伴