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 = new THREE.Scene();

// 创建一个相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建一个 WebGL 渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建一个立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({
    
     color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 添加光线来照亮场景
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 1, 1).normalize();
scene.add(light);

// 渲染循环
function animate() {
    
    
    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 文档。

猜你喜欢

转载自blog.csdn.net/cuclife/article/details/142177919