ceike的博客

包含如何在网页上构建立方体和线段（非css）Three.js经常会和WebGL混淆， 但也并不总是，three.js其实是使用WebGL来绘制三维效果的。WebGL是一个只能画点、线和三角形的非常底层的系统. 想要用WebGL来做一些实用的东西通常需要大量的代码， 这就是Three.js的用武之地。它封装了诸如场景、灯光、阴影、材质、贴图、空间运算等一系列功能，让你不必要再从底层WebGL开始写起。

注意，两边的效果是实时内容转化，其中摄像机最开始的红色范围对应了我们生物学上人眼的焦距17cm,（这里是模拟他的比例，并不是真实17cm）；在黄色范围内均为可见范围，当球体太近或者太远超出黄色可见范围后，在左边的摄像机拍摄出的画面里是不会显示的。右面是设计原理，内置了一个摄像机，跟随我们要展示在二维面上的物体；这两个球体模仿的应该是行星环绕（具有真实的物理引擎），而我们的目标就是让这份物理规律浅显易懂地展示出来。如下面是three.js编写的案例，来帮助我们理解二维面上是怎么渲染出三维效果的;