Three.js的渲染器(Renderer)、场景(Scene)、照相机(Camera)

HTML5 herman 290浏览 0评论

一个典型的Three.js程序至少要包括渲染器(Renderer)、场景(Scene)、照相机(Camera),以及你在场景中创建的物体。本文主要介绍它们的用法。

WebGL的渲染是需要HTML5 Canvas元素的,我们可以手动在HTML的<body>部分中定义Canvas元素,或者让Three.js帮你生成。

<body>
    <canvas id="xttblog" width="400px" height="300px" ></canvas>
</body>

渲染器(Renderer)

渲染器将和Canvas元素进行绑定,如果之前在HTML中手动定义了id为xttblog的Canvas元素,那么Renderer可以这样写:

var renderer = new THREE.WebGLRenderer({
    canvas: document.getElementById('xttblog')
});

而如果想要Three.js生成Canvas元素,在HTML中就不需要定义Canvas元素,在JavaScript代码中可以这样写:

var renderer = new THREE.WebGLRenderer();
renderer.setSize(400, 300);
document.getElementsByTagName('body')[0].appendChild(renderer.domElement);

上面代码的第二行表示设置Canvas的宽400像素,高300像素。第三行将渲染器对应的Canvas元素添加到<body>中。

我们可以使用下面的代码将背景色(用于清除画面的颜色)设置为黑色:

renderer.setClearColor(0x000000);

场景(Scene)

在Three.js中添加的物体都是添加到场景中的,因此它相当于一个大容器。一般说,场景里没有很复杂的操作,在程序最开始的时候进行实例化,然后将物体添加到场景中即可。

var scene = new THREE.Scene();

照相机(Camera)

在介绍照相机设置前,我们先来简单了解下坐标系。WebGLThree.js使用的坐标系是右手坐标系,看起来就是这样的:

照相机(Camera)

这里,我们定义了一个透视投影的照相机。

var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
camera.position.set(0, 0, 5);
scene.add(camera);

值得注意的是,照相机也需要被添加到场景中。

我们要创建一个x、y、z方向长度分别为1、2、3的长方体,并将其设置为红色。

var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
	new THREE.MeshBasicMaterial({
		color: 0xff0000
	})
);
scene.add(cube);

这段代码也是比较容易理解的,虽然你现在可能还不知道MeshBasicMaterial是什么,但是大致可以猜测出这是一种材质,可以用来设置物体的颜色。还是要提醒下,一定要记得把创建好的长方体添加到场景中。

那么这里长度为1的单位是什么呢?这里的长度是在物体坐标系中的,其单位与屏幕分辨率等无关,简单地说,它就是一个虚拟空间的坐标系,1代表多少并没有实际的意义,而重要的是相对长度。

渲染

在定义了场景中的物体,设置好的照相机之后,渲染器就知道如何渲染出二维的结果了。这时候,我们只需要调用渲染器的渲染函数,就能使其渲染一次了。

renderer.render(scene, camera);

至此,一个 Three.js 程序就完成了。

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!

本文原文出处:业余草: » Three.js的渲染器(Renderer)、场景(Scene)、照相机(Camera)