渲染器

渲染器其实代表的是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）。

正交相机

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

正交相机的构造方法如下：

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

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

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

透视相机

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

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

PerspectiveCamera( fov, aspect, near, far )

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

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

全景相机

全景相机就是可以360度拍摄的相机，见过百度地图全景街景拍摄车的话，应该会有印象，就像下面这个：

在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相机和渲染器相关推荐

ThreeJs场景、相机、渲染器、添加obj模型和删除模型
相机效果图 1.安装threeJs npm install three 2.安装加载obj和mtl文件的插件 npm i --save three-obj-mtl-loader 3.安装轨道控件插件 ...
Threejs在vue中使用(场景、相机、渲染器、gltf模型添加、环境贴图等）
前言 Three.js ( Javascript 3D library ) 是基于原生WebGL封装运行的三维引擎,WebGL可以看成是浏览器给我们提供的接口,在JavaScript中可以直接用这些A ...
threejs渲染器剔除模式
渲染器剔除模式渲染器可以设置成舍弃某些面,如前面.背面等,在[WebGLRenderer Constants]中对此有说明.默认情况下,是剔除掉背面,也就是背对着相机的面.下面看看例子: 首先创建一 ...
arnold如何设置鱼眼相机_【总结】如何看待默认渲染器、arnold阿诺德渲染器、Octane渲染器、Redshift等渲染器？...
没有晦涩的理论,纯使用体验.直观感受,一篇文章告诉你到底该如何选择渲染器. 关于C4D的渲染器,琳琅满目,如果把渲染器比作照相机,那么渲染器的种类比照相机的种类还要多.本篇文章我来谈谈自己的一些使用体 ...
软渲染器(Directx11)三之世界矩阵，相机变换矩阵，透视投影矩阵，透视除法,视口变换矩阵
其实各大矩阵具体的推导过程我就不给出了,我直接给出矩阵具体的形式和实现代码,以及那些大牛推导矩阵详细的文章: 一,世界矩阵(WorldMatrix) 我一般称世界矩阵为SRT矩阵,SRT分别是&quo ...
unity黑白滤镜_unity游戏相机滤镜渲染后期色彩处理特效着色器Colorful FX v4.4
unity游戏相机滤镜渲染后期色彩处理特效着色器Colorful FX v4.4,是一个可快速和自定义的后处理效果,颜色可调整. Colorful FX is a collection of high ...
【 Threejs 】- Shader 着色器实例渲染教程
着色器在threejs中是一个难点,话不多说,先来看看着色器是什么? 如果您已经有使用计算机绘图的经验,您就会知道在这个过程中您先画一个圆,然后画一个矩形.一条线.一些三角形,直到您组成您想要的图像. ...
ThreeJS 中体渲染，利用噪声模拟烟，云
ThreeJS 中体渲染,利用噪声模拟烟,云体渲染的东西也看了一段时间了,这里结合Three.js中体积云的例子,实现shdertoy中的一个效果,先放效果图. Fire2 (shadertoy.c ...
CVPR2021(Oral) 商汤、港中文实现单目人脸重建新突破：基于生成网络的渲染器！几何形状更精准！渲染效果更真实！...
点击上方"3D视觉工坊",选择"星标" 干货第一时间送达近日,商汤-港中文联合实验室提出基于风格化对抗生成器的人脸渲染器,用于取代传统图形学基于栅格化的渲染器 ...

threejs相机和渲染器

渲染器