前言

在three.js中，渲染器（Renderer）是一个关键组件，用于将3D场景渲染到屏幕上。它负责处理光照、阴影、材质、纹理等方面的渲染，并将结果显示在浏览器中。

生活中如果有了景物和相机，那么如果想获得一张照片，就需要你拿着相机，按一下，咔，完成拍照。对于threejs而言，如果完成“咔”这个拍照动作，就需要一个新的对象，也就是WebGL渲染器(WebGLRenderer)。

渲染器

新版的threejs内部的渲染器有两个WebGLRenderer和WebGL1Renderer，自r118起，WebGLRenderer会自动使用 WebGL 2 渲染上下文。WebGL1Renderer是使用WebGL 1 渲染上下文。WebGL 2相对于WebGL 1性能上有很大的提升。对于新手来说只需使用WebGLRenderer即可。

当升级一个已存在的项目到 => r118 ， 应用程序可能会因为下列两种原因而损坏：

• 自定义着色器代码必须符合GLSL 3.0。（GLSL是一种，c++语法的语言，写材质和特效使用的，旧版WebGL 1.0 仅支持 GLSL 100 标准语法）
• WebGL 1扩展检查到被更改 (一些旧的第三方插件)

WebGL渲染器WebGLRenderer

通过WebGL渲染器WebGLRenderer可以实例化一个WebGL渲染器对象。

// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();

对于渲染器来说，它决定着绘制结果的质量，所以它拥有一些配置参数，下面是一些常用的配置初学可以不用设置，在后面场景搭建中要是出现问题时再配置即可。

alpha: true, //画布透明   更具需求决定场景的背景是threejs生成的canvas还是html其它的dom(如图片)
depthTest: true, //深度测试(用来计算物体之间的前后位置于遮挡关系的开关)
antialias: true, //是否开启抗锯齿效果（因为计算精度的问题，物体边界现锯齿不光滑的效果，开启这个功能可优化部分效果），默认值为false。
logarithmicDepthBuffer: true,//是否使用对数深度缓存。如果要在单个场景中处理巨大的比例差异，就有必要

设置Canvas画布尺寸.setSize()

WebGLRenderer初始化的过程中会生成一个canvas节点，这个就是三维场景最终呈现的位置。根据需求设置宽高。

注意点:画布所在的div最好不要出现滚轮或者溢出隐藏的配置，不然可能会导致后面鼠标事件拾取dom之间的相对屏幕坐标异常从而拾取不到物体。

// 定义threejs输出画布的尺寸(单位:像素px)
const width = 800; //宽度
const height = 500; //高度
renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)

渲染器渲染方法.render()

渲染器WebGLRenderer执行渲染方法.render()就可以生成一个Canvas画布(照片)，并把三维场景Scene呈现在canvas画布上面,你可以把.render()理解为相机的拍照动作“咔”（绘制图片的动作）。

通常3d场景是会变化移动的，所以执行一次.render()是没办法达到效果的，所以renderer.render(scene, camera)方法通常需要定时的调用（具体情况后面写demo的时候介绍）

renderer.render(scene, camera); //执行渲染操作

Canvas画布插入到任意HTML元素中

<div id="webgl" style="margin-top: 200px;margin-left: 100px;"></div>

document.getElementById('webgl').appendChild(renderer.domElement);