前言
前端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解压进入文件夹后,几个比较有用的