Three.js - 渲染器(WebGLRenderer)（二）

简介

在three.js中内置了很多渲染器，选择什么渲染器都是根据需求来判断的。本节我们详细了解最常用的渲染器 WebGLRenderer

渲染器(WebGLRenderer)

• WebGLRenderer主要作用就是把相机视椎体中的三维场景渲染成一个二维图片显示在画布上
• 实例化new WebGLRenderer()接受一个对象参数作为渲染器的行为配置。不传参数都会执行其默认值。常用配置：

1. canvas 与渲染器绑定的画布节点。不传内部会自己创建一个新的画布节点，使用.domElement获取。
2. context 渲染上下文(RenderingContext) 对象。就是将渲染器附加到已经创建的WebGL上下文中以便后期操作。默认为null
3. precision 着色器精度。渲染成图片的颜色精度。值：highp/mediump/lowp默认为highp。
4. alpha 是否可以设置背景色透明。默认为false。
5. antialias 是否执行抗锯齿。默认为false。
6. preserveDrawingBuffer 是否保留缓直到手动清除或被覆盖。 默认false。

• 除了实例化的默认配置，我们也可以通过它的属性来控制渲染器。常用属性：

1. .autoClear 定义渲染器是否在渲染每一帧之前自动清除其输出。
2. .autoClearColor 定义渲染器是否需要清除颜色缓存。默认为true。
3. .autoClearDepth 定义渲染器是否清除深度缓存。 默认是true。
4. .autoClearStencil 定义渲染器是否需要清除模板缓存。默认为true。
5. .domElement 返回画布节点。当配置参数没关联canvas，会自动创建一个新的画布节点，需要手动放入html中。
6. .shadowMap 是一个对象。当我们需要阴影时就需要开启它。
7. .shadowMap.enabled 是否允许在场景中使用阴影贴图，默认false。
8. .shadowMap.autoUpdate 是否启动场景中的阴影自动更新，默认是true。
9. .shadowMap.type 值是Integer类型，定义阴影贴图类型。可选值有THREE.BasicShadowMap, THREE.PCFShadowMap (默认), THREE.PCFSoftShadowMap 和 THREE.VSMShadowMap THREE全局常量值，代表不同的数字。

• 有了参数和属性的控制就还有方法的控制。常用方法：

1. .clear(color:Boolean, depth:Boolean, stencil:Boolean ) 渲染器清除颜色、深度或模板缓存。
2. .getContext() 返回WebGL上下。
3. .render()(scene,camera) 传入场景和相机，在画布上渲染图片。
4. .setClearColor(color,alpha) 设置背景颜色和透明度。
5. .setSize()( width,height) 修改canvas节点的宽高。

• 上面只是列举了一些常用的属性和方法，想更觉灵活的使用WebGLRenderer还需要去熟悉其他属性和方法。

开始使用

• 在上一节的代码基础上进行修改。

1. 渲染器绑定已存在的canvas节点。

    const canvas = document.querySelector('#c2d')
    // 渲染器 实例化
    const renderer = new THREE.WebGLRenderer({ canvas:canvas })

2. 渲染器自定义节点

  // 渲染器 实例化
  const renderer = new THREE.WebGLRenderer()
  // 设置 画布宽高
  renderer.setSize(1000, 500)
  // 加入html
  document.body.appendChild(renderer.domElement)

• 两种方式实现的效果都是一样的
  

3. 获取上下文

console.log('getContext()', renderer.getContext())

4. 设置背景颜色和透明度

renderer.setClearColor(0xeeeeee, 0.5)

5. 渲染器绘制图片。使用.render()绘制图片到画布上，每当场景发生变换都需要重新执行一次，绘制最新的图片。在绘制过程就它会根据配置信息去判断是否有缓存，来快速绘制。当然不是所有缓存都开启最好，缓存是需要内存空间的，当空间不足时程序就会出错。

  function render(time) {
    time *= 0.001

    sunMesh.rotation.y = time
    sunMesh.rotation.x = time

    // 加载渲染器
    renderer.render(scene, camera)

    // 开始动画
    requestAnimationFrame(render)
  }

总结

渲染器(WebGLRenderer) 简单理解就是，把我们绘制的场景图，通过相机视椎体的范围来截取，转化为一张图片。然后去绑定页面上canvas元素把这张图片绘制到元素上。动画效果就是不断的生成新的图片替换原来的图片来实现的。渲染器上有很多属性和方法，都是配合其他内容一起使用的，比如阴影就需要灯光和几何体来配合才能展示。