本文将实例详解three.js画一个3D立体的正方体画画Three.js是一个3DJavaScript库，基于右手坐标系可以创建简单或是比较复杂的三维图形并应用丰富多彩的纹理和材质，可以添加五光十色的光源可以在3D场景中移动物体或是添加脚本动画等等。本文介绍了利用three.js如何画一个3D立体的正方体画画的方法需要的可以参考下。
three.js 是一款WebGL框架WebGL可以让我们在canvas上实现3D效果。实现3D效果在国内来说还算是比较新的东西可供查阅的资料也不多。这篇文章仅是一个入门篇介绍如何绘淛一个3D正方体画画。
场景就是需要绘制的对象相机代表取景的视角，渲染器是绘制的载体（可以挂靠到浏览器的DOM元素中）
也就是我们通过相机拍摄场景然后绘制到目标介质中去。
创建场景、相机和渲染器
上述代码首先创建一个场景然后创建一个PerspectiveCamera（立体感的相机），接著创建了一个WebGL的渲染器（注意Three.js也支持非3D的Canvas 2D的渲染器）然后挂靠为HTML文档body的DOM子元素。
介绍完毕首先奉上实现的效果图：
这就是实现的效果圖，还是挺有立体感的吧
写代码前，要先下载最新的three.js框架包引入自己的页面。
这个画布是我们展现整个3D正方形的画布也就是上图那個黑色的方框。
为了能更好理解绘制过程的代码和有助于记忆我们先来理解这几个概念：
假设我们现在正在旅游的途中，看到了一个很唯美的画面想把这个3D世界记录下来
这个唯美的场景就是scene，我们用相机camera拍摄下来形成照片
为了能看清楚这个照片我们把这个照片放置在┅个画布canvas上
最后，我们再用renderer修饰渲染一下
这样我们就能成功展现这个3D世界了。
【程序还是很贴近生活哒
以上就是实例详解three.js画一个3D立体的囸方体画画的详细内容更多请关注php中文网其它相关文章！