使用Three.js + Blender构建在浏览器端显示的3D模型（1）

前言

前端3D效果的展示方法很多，如果简单的显示一个立方体，我们可以用六块div，每块div结合CSS的旋转特性，旋转出不同的角度组装出来一个盒子。当我们拖拽这个盒子的时候，可以用JS根据鼠标新的坐标点刷新那六个div新的旋转角度参数，让六个面始终同步旋转，始终是闭合的，所以视觉效果来看是3D的。

上述方法适用于简单的3D模型，比如立方体、长方体等。其特点是，各种控件都支持这种css旋转，比如我们可以把一个iframe做出3D的旋转效果，同时不影响iframe上网页内容的操作，这是比较酷的。但是对于一些更注重细节的3D模型，则很难用css特性来实现。也许我们可以用更多的，粒度更小的div来组装，但缺乏配合这种方法的3D建模工具，只凭经验去拼凑，注定很难适应各种需求。所以我们选择Three.js来实现对3D模型的展示。Three.js提供了一些API，能够在场景里创建一些常见的几何体，比如长方体、球体等。但实际应用的时候，我们更多的是结合一些3D建模软件生成定制的3D模型，然后用Three.js加载显示。

3D建模软件选择blender是因为这是一个开源免费的软件，官网：www.blender.org。 Thee.js 当然也是一个开源项目，项目位置：https://github.com/mrdoob/three.js/

第一章 Three.js初体验

从github上下载three.js解压进入文件夹后，几个比较有用的