three.js中的三大组件

时间:2021-10-03 03:33:06

three.js中,要渲染物体到网页中,我们需要3个组件:场景scene、相机camera 和渲染器renderer。有了这三样东西,才能将物体渲染到网页中去。

创建这三要素的代码如下 :

var scene = new THREE.Scene(); // 场景
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);//正投影相机
var renderer = new THREE.WebGLRenderer(); // 渲染器
renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器渲染的范围
renderer.setClearColor('#000');//刷新画布的颜色
document.body.appendChild(renderer.domElement); //添加画布到body上

场景

Threejs中场景就只有一种,用THREE.Scene来表示,要构件一个场景也很简单,只要new一个对象就可以了,代码如下:
var scene = new THREE.Scene();
场景是所有物体的容器,如果要显示一个苹果,就需要将苹果对象加入场景中。

相机
相机决定了场景中那个角度的景色会显示出来。相机就像人的眼睛一样,人站在不同位置,抬头或者低头都能够看到不同的景色。
在Threejs中有多种相机,这里介绍两种,它们是:
正投影相机和透视投影相机

正投影相机: 距离该相机越远的物体,被渲染的越小(和人的眼睛观看物体类似,近大远小)
它的创建方式是 :
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

透视投影相机:所有物体被渲染出来的尺寸都一样(不管远近)
它的创建方式是 :
var camera = new THREE.OrthographicCamera(-4,4,4,-4,-200,500);
该相机通常使用在二维游戏中,如下图 :
three.js中的三大组件

相机具体的参数在后面会讲解到,这里只做简单的介绍。

渲染器
渲染器决定了渲染的结果应该画在页面的什么元素上面,并且以怎样的方式来绘制。这里我们定义了一个WebRenderer渲染器(渲染器也有多种,如:canvasRenderer、CSS3DRenderer),代码如下 :
var renderer = new THREE.WebGLRenderer(); 
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(‘#000’);
document.body.appendChild(renderer.domElement);

注意,渲染器renderer的domElement元素,表示渲染器中的画布,所有的渲染都是画在domElement上的,所以这里的appendChild表示将这个domElement挂接在body下面,这样渲染的结果就能够在页面中显示了。

渲染
renderer.render(scene, camera); 只有调用了该函数,渲染器才会开始工作,我们才能看到场景中的物体。

场景,相机,渲染器之间的关系
three.js中的场景是一个物体的容器,开发者可以将需要的角色放入场景中,例如苹果,葡萄。同时,角色自身也管理着其在场景中的位置。
相机的作用就是面对场景,在场景中取一个合适的景,把它拍下来。
渲染器的作用就是将相机拍摄下来的图片,放到浏览器中去显示。他们三者的关系如下图:
three.js中的三大组件