three.js基础学习之WebGLRenderer

这是three.js学习的第19篇学习笔记。在three.js基础学习之类人造光源中我们学习了三种人造光源，分别是点光源PointLight，聚光灯SpotLight和平面光源RectAreaLight。今天学习three.js的渲染引擎WebGLRenderer。

在创建three.js应用时，我们首先要做的就是要用THREE.WebGLRenderer创建渲染引擎实例renderer。在构建实例时，可选传入一个对象，对renderer的一些默认特征进行修改处理，下面我们看一下具体构建方法和一些常用的参数。

1
2
3
const renderer = new THREE.WebGLRenderer({
    // 在这里修改一些参数
})

THREE.WebGLRenderer实例化需要传入的一些参数

  • canvas 我们传入最多的，大概就是这个参数了。 canvas用来承载three.js应用的画面。如果不传入，THREE.WebGLRenderer在构建了实例后也会自动创建一个，通过renderer属性值domElement可以获取到。不过我个人建议还是提起传入更方便一点。

  • context 默认值为null，用来将渲染器添加到一个已有的渲染环境中去。这个暂时知道就行，后面实战的时候可以具体学习体验。

  • precision是着色器精度，在设备支持下默认是高精度”highp” ，备选项还有 “mediump” 和 “lowp”。

  • antialias 是否抗锯齿。默认是false。

这写是几个常见的构建参数，还有一些不常用的在后面实战中遇到我们再详细学习。

THREE.WebGLRenderer实例化后的一些属性和方法

将THREE.WebGLRenderer实例化后我们就得到了渲染器renderer，下面我们学习一下renderer的一些常用属性和方法。

  • 属性

    domElement 渲染器实例化完成后输出的一个canvas。如果我们一开始没有传入已经定义好的canvas，可以将它绑定到页面中，比如我们添加到body上。

    1
    document.body.appendChild(renderer.domElement);

    shadowMap 是否使用阴影贴图，它是一个对象，比较常用的参数有下面两个

    • enabled 是否允许在场景中使用阴影贴图，默认是false。
    • autoUpdate 启用场景中的阴影自动更新。默认是true

  • 方法

    getContext()返回当前的webGL环境。
    render(scene, camera) render()函数是一个必用的函数，它接收scene场景和camera相机两个参数。将场景渲染在canvas上，然后通过相机播放出来。
    setSize(width, height, updateStyle)调整canvas的大小，width和height代表宽和高，updateStyle为false则禁止修改canvas样式。
    setViewport(x,y, width, height) 设置可视窗口的位置和大小。