走进3D的奇妙世界

二、Three.js应用场景

利用Three.JS可以制作出很多酷炫的3D动画，并且Three.js还可以通过鼠标、键盘、拖拽等事件形成交互，在页面上增加一些3D动画和3D交互可以产生更好的用户体验。

通过Three.JS可以实现全景视图，这些全景视图应用在房产、家装行业能够带来更直观的视觉体验。在电商行业利用Three.JS可以实现产品的3D效果，这样用户就可以360度全方位地观察商品了，给用户带来更好的购物体验。另外，使用Three.JS还可以制作类似微信跳一跳那样的小游戏。随着技术的发展、基础网络的建设，web3D技术还能得到更广泛的应用。
 

三、主要组件

在Three.js中，有了场景（scene）、相机（camera）和渲染器（renderer） 这3个组建才能将物体渲染到网页中去。

1）场景

场景是一个容器，可以看做摄影的房间，在房间中可以布置背景、摆放拍摄的物品、添加灯光设备等。

2）相机

相机是用来拍摄的工具，通过控制相机的位置和方向可以获取不同角度的图像。

3）渲染器

渲染器利用场景和相机进行渲染，渲染过程好比摄影师拍摄图像，如果只渲染一次就是静态的图像，如果连续渲染就能得到动态的画面。在JS中可以使用requestAnimationFrame实现高效的连续渲染。



 

1）透视相机

透视相机模拟的效果与人眼看到的景象最接近，在3D场景中也使用得最普遍，这种相机最大的特点就是近大远小，同样大小的物体离相机近的在画面上显得大，离相机远的物体在画面上显得小。透视相机的视锥体如上图左侧所示，从近端面到远端面构成的区域内的物体才能显示在图像上。

透视相机构造器

PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )

•  fov — 摄像机视锥体垂直视野角度
•  aspect — 摄像机视锥体长宽比
•  near — 摄像机视锥体近端面
•  far — 摄像机视锥体远端面

2）正交相机

使用正交相机时无论物体距离相机远或者近，在最终渲染的图片中物体的大小都保持不变。正交相机的视锥体如上图右侧所示，和透视相机一样，从近端面到远端面构成的区域内的物体才能显示在图像上。

正交相机构造器

OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )

•  left — 摄像机视锥体左侧面
•  right — 摄像机视锥体右侧面
•  top — 摄像机视锥体上侧面
•  bottom — 摄像机视锥体下侧面
•  near — 摄像机视锥体近端面
•  far — 摄像机视锥体远端面

（编辑：阜新站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!