构建Three.js的四大基本组件

111 阅读1分钟

Three.js中,要渲染物体到网页,需要四个组件:场景(scene)、相机(camera)、渲染器(renderer)、几何体(geometry)

有了这四大组件,才能通过相机将场景渲染到网页上去。

四大组件:

1.场景: 场景(scene)是所有物体的容器

image.png

2.相机 :

相机(camera)决定了场景中哪个角度的物体会显示出来,相机有很多种,我们在这里只介绍两种:透视相机和正投影相机

透视相机:即离试点近的物体大,离视点远的物体小,远到几点即为消失,成为灭点;

正投影相机:  即远处和近处的是一样大;

image.png

相机参数:

视角fov:视角的大小,可以理解为眼睛睁开的大小,如果设置为0,就是闭上眼睛,什么都看不到;如果设置为180,可以认为视野广阔,但是在180度时,物体在整个可视区域比例会变小;

近平面near : 表示近处裁面的距离,不能设置为负值;

远平面far : 表示远处的裁面;

纵横比aspect : 实际窗口的纵横比,即宽度除以高度。这个值越大,说明宽度越大,看到的就是宽荧幕,如果这个值小于1 ,看到的就是竖屏的。

3.渲染器

渲染器(renderer) 决定了怎么将场景画到屏幕上, 通过计算显示到屏幕上,计算的过程叫做渲染。

image.png

4.网络模型:

网络模型(几何体geometry)就是要显示在场景的对象。

image.png