ThreeJS入门（141）：THREE.WebGLRenderer 知识详解，示例代码

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第

141

篇入门文章

文章目录

THREE.WebGLRenderer

是 Three.js 中用于渲染 WebGL 图形的一个类。它是 Three.js 中最常用的渲染器之一，负责将场景中的对象绘制到屏幕上。WebGL 是一种用于渲染 2D 和 3D 图形的 JavaScript API，它利用浏览器的硬件加速图形能力来绘制图形。

构造函数

构造函数

new THREE.WebGLRenderer([parameters])

可以接受一个可选的参数对象，其中包含渲染器的各种配置选项：

• alpha：如果设置为 true，则背景为透明；默认为 false。
• antialias：如果设置为 true，则开启抗锯齿；默认为 false。
• preserveDrawingBuffer：如果设置为 true，则保留绘图缓冲区，以便可以访问已绘制的帧；默认为 false。
• powerPreference：指定渲染器使用的 GPU 功率模式，可以是 "default", "high-performance" 或 "low-power"。
• stencil：如果设置为 true，则开启模板缓冲区；默认为 false。
• logarithmicDepthBuffer：如果设置为 true，则使用对数深度缓冲区；默认为 false。
• gammaOutput：如果设置为 true，则输出时进行伽玛校正；默认为 false。
• precision：指定着色器精度，可以是 "highp"、"mediump" 或 "lowp"。
• pixelRatio：指定渲染分辨率相对于屏幕分辨率的比例，默认为设备像素比。
• xrCompatible：如果设置为 true，则渲染器与 WebXR 兼容；默认为 false。

属性

THREE.WebGLRenderer

类提供了许多属性来控制渲染器的行为：

• domElement：渲染器创建的 <canvas> 元素，用于绘制图形。
• context：WebGL 上下文。
• capabilities：渲染器的能力信息。
• autoClear：如果设置为 true，则在每次渲染之前自动清除屏幕；默认为 true。
• gammaFactor：伽玛因子，用于输出时的伽玛校正；默认为 1。
• gammaInput：如果设置为 true，则输入时进行伽玛校正；默认为 false。
• toneMapping：色调映射方式，用于模拟现实世界中的曝光效果；默认为 THREE.NoToneMapping。
• toneMappingExposure：色调映射的曝光系数；默认为 1。
• outputEncoding：输出编码方式，用于指定颜色空间；默认为 THREE.sRGBEncoding。
• outputColorSpace：输出颜色空间；默认为 THREE.sRGBColorSpace。
• localClippingEnabled：如果设置为 true，则启用局部裁剪；默认为 false。
• lightsNeedUpdate：指示灯是否需要更新；默认为 false。
• shadowsNeedUpdate：指示阴影是否需要更新；默认为 false。
• materialsNeedUpdate：指示材质是否需要更新；默认为 false。
• morphTargetsNeedUpdate：指示变形目标是否需要更新；默认为 false。
• skinningNeedUpdate：指示蒙皮是否需要更新；默认为 false。
• shadowMapNeedsUpdate：指示阴影贴图是否需要更新；默认为 false。
• renderList：渲染列表，用于存储待渲染的对象。

方法

THREE.WebGLRenderer

类提供了多种方法来控制渲染流程：

• **render(scene, camera)**：渲染场景。
• **setSize(width, height[, updateStyle])**：设置渲染器的尺寸。
• **setPixelRatio(pixelRatio)**：设置渲染分辨率相对于屏幕分辨率的比例。
• **clear([target])**：清除渲染器的内容。
• **forceContextLoss()**：强制上下文丢失。
• **reset()**：重置渲染器。
• **dispose()**：释放渲染器占用的资源。
• **contextLost()**：上下文丢失时的回调。
• **contextRestored()**：上下文恢复时的回调。

使用示例

下面是一个简单的示例，展示如何使用

THREE.WebGLRenderer

来渲染一个基本的场景：

// 创建一个场景const scene =newTHREE.Scene();// 创建一个相机const camera =newTHREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight,0.1,1000);
camera.position.z =5;// 创建一个 WebGL 渲染器const renderer =newTHREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);// 创建一个立方体const geometry =newTHREE.BoxGeometry(1,1,1);const material =newTHREE.MeshStandardMaterial({ color:0x00ff00});const cube =newTHREE.Mesh(geometry, material);
scene.add(cube);// 添加光线来照亮场景const light =newTHREE.DirectionalLight(0xffffff,1);
light.position.set(0,1,1).normalize();
scene.add(light);// 渲染循环functionanimate(){requestAnimationFrame(animate);// 更新立方体的旋转
    cube.rotation.x +=0.01;
    cube.rotation.y +=0.01;// 渲染场景
    renderer.render(scene, camera);}animate();

总结

THREE.WebGLRenderer

是 Three.js 中用于渲染 WebGL 图形的主要类。通过配置不同的参数，可以定制渲染器的各种行为，如背景透明度、抗锯齿、伽玛校正等。使用

THREE.WebGLRenderer

可以轻松地将 Three.js 场景中的对象绘制到屏幕上，并通过渲染循环不断更新画面。

在实际应用中，

THREE.WebGLRenderer

提供了许多高级特性，如色调映射、局部裁剪、阴影贴图等，可以根据需要调整渲染器的设置来优化性能或实现特定的视觉效果。

需要注意的是，Three.js 的版本可能会有所不同，因此具体的方法和属性可能会有所变化。在实际使用时，请参考最新的 Three.js 文档。