cesium three性能比较_「three.js基础」如何让一个立方体旋转起来

这次，我们通过案例来分析如何让一个立方体动起来！附上源码哦！

点击上方“Web前端进阶指南”关注我呦

跟程序员小强一起学前端

上一篇内容我们说了关于three.js的一些入门知识，了解了一下WebGL中的three.js框架，以及一些优缺点，也简单的看了一些案例。接下来继续往深里学习吧。

每次学习之前都会去Three.js官网的案例库里看看有没有好玩的，炫酷的动画，这样才能勾起对它的爱好，在这之前，我又去找到一款非常可爱炫酷的案例，但是这个案例比较难，我们就拿上一篇例子中涉及到的内容展开学习。

上一篇的最后我们简单的示范了让一个立方体旋转起来，接下来将对three.js来做一个简要的介绍；我们将开始搭建一个场景，其中包含一个正在旋转的立方体。在学习完成后，我们将实现一个更为简单的立方体旋转，我会把代码放到网盘，供大家学习参考。

分析案例

在开始之前呢，我会逐步的附上代码图片一一分析如何用代码去实现这个立方体旋转效果，我们由广泛的理解细分到每个函数的应用。

起步之前

在开始使用three.js之前，我们跟往常写页面一样，将它放在HTML文档里，同时将three.js引用到文档中，跟写js一样将它写在标签中，等你写完了，然后在你的浏览器中打开这个HTML文件。如下图所示：

这里页面渲染的时候动画都会由替代，所以我们有必要去给Canvas定义CSS样式，接下来的所有代码都会写在