threejs相机和渲染器

时间：2022-03-01 20:27:03

渲染器

渲染器其实代表的是canvas标签。

渲染器的类型

WebGLRender

使用WebGL来渲染图形，速度较快，但是有些机器不支持WebGL。

CanvasRender

使用canvas2d来渲染图形，在较老的版本上，主要是用来渲染2D图形。现在这个渲染器在新版本中已弃用。

创建渲染器

创建渲染器代码如下：

renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);

setSize方法设置的是canvas标签的大小，比如：

renderer.setSize(100,100)

等于：

<canvas style="width:100px;height:100px;"></canvas>

相机

相机定义了场景中哪部分是可以见的，相机有自己的位置（position）、朝向（lookAt）和可视域。我们创建的图形一定要放在相机的可视域中才能看得见。可视域与相机的类型、相机的位置和朝向都有关。

相机的类型和创建

threejs提供的相机有正交相机（OrthographicCamera）、透视相机（PerspectiveCamera）、全景相机（CubeCamera）和3D相机（StereoCamera）。

正交相机

正交相机拍摄的效果类似设计图，重在表现物体的实际尺寸，没有近小远大的效果，如下图：

threejs相机和渲染器
正交相机的构造方法如下：

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

这个六个参数即是指定视域的左右上下近远六个范围。正交相机的视域是立方体：

threejs相机和渲染器

可以打开 ：【threejs相机例子】，按o键，就可以看到正交相机的演示，右边的线框则展示出正交相机的视域示意图。

透视相机

透视相机拍摄的效果类似人眼所见，即有近小远大的效果，如下图：
threejs相机和渲染器

透视相机的构造方法如下：

PerspectiveCamera( fov, aspect, near, far )

fov参数指定视角，aspect指定视图宽高比，后两个参数指定*面和远平面。透视相机的视域是一个台体：

threejs相机和渲染器

可以打开 ：【threejs相机例子】，按p键，就可以看到透视相机的演示，右边的线框则展示出透视相机的视域示意图。

全景相机

全景相机就是可以360度拍摄的相机，见过百度地图全景街景拍摄车的话，应该会有印象，就像下面这个：
threejs相机和渲染器
在threejs中，全景相机构造也类似，使用六个不同方向上的相机同时拍摄，将拍摄的结果融合到同一个画面中。这有点像VR的概念，无论你看向画面的哪个方向，都能看到那个方向的景物。可以打开下面的链接体验一下：【全景相机的例子】

3D相机

这个3D相机应该叫浮雕3D相机，它是用两个不同位置的透视相机同时拍摄，将拍摄的结果合成为一个画面。这便是早期3D电影的表现方法，通过让人的两只眼睛看到稍微不同的图像，来欺骗人的感觉，让人好像看到了立体一样。可以打开下面的链接，看看这种相机的拍摄效果：【3D相机例子】

你会发现直接看，画面似乎很模糊，但是当你戴上红蓝眼镜时，画面就变成了立体的了。关于浮雕3D电影可参考：【浮雕3D电影】

相机和渲染器的关系

在threejs中，渲染器可以视为是canvas标签，相机可以视为画布。注意画布和canvas标签不是同一个东西，canvas标签是画布的容器。画布就好比一张图片，而canvas标签就像img标签。

因此：

renderer.setSize(100,100)

相当于：

<canvas style="width:100px;height:100px;"></canvas>

而

var camera = new THREE.OrthographicCamera(-500,500,100,-100,1,1000);

相当于：

<canvas heigth="1000" width="1000"></canvas>

当然，这种类比过于简单，实际中，threejs做的工作要更多。

canvas标签大小和画布大小不一致会引发的问题

如果canvas标签和画布大小不一致，则会拉伸画布填充canvas标签，这会导致画面变形。例如：

camera = new THREE.OrthographicCamera(-500,500,20,-20,1,100);
renderer.setSize(1000,1000);

在上面的代码中，canvas标签较大，而故意将画布高度设得很小，画出来的效果大致如下：
threejs相机和渲染器
可以看到，字母在竖直方向上被拉长了。

threejs相关的其它文章见：threejs教程

标签：

相关文章