threejs WebGLRenderer

阅读数:11 评论数:0

跳转到新版页面

分类

html/css/js

正文

一、概述

WebGLRenderer 是 three.js 中的核心渲染器，用于将 3D 场景渲染到网页的 <canvas> 元素上。它使用 WebGL 技术，通过 GPU（图形处理单元）进行硬件加速的渲染，以实现高效、实时的 3D 图形渲染。

二、基本使用

1、安装引入

npm install three

import * as THREE from 'three';

2、简单示例

import * as THREE from 'three';

// 创建场景
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);  // 将渲染器的 <canvas> 元素添加到 DOM 中

// 创建一个立方体几何体（用于展示）
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });  // 设置材质为绿色
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);  // 将立方体添加到场景中

// 创建动画函数
function animate() {
  requestAnimationFrame(animate);  // 请求下一帧

  // 使立方体旋转
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  // 渲染场景
  renderer.render(scene, camera);
}

animate();  // 启动动画

三、色彩空间

色彩空间是为了描述如何在数字图像中表示颜色和亮度。常见的色彩空间包括：

  • 线性色彩空间 (Linear Color Space)：在这个色彩空间中，颜色的强度值是线性的。意味着颜色的每个分量（红色、绿色、蓝色）的值是直接对应到光强度的数值（即 0 到 1 范围内的线性数值）。

  • sRGB 色彩空间 (Standard Red Green Blue)：sRGB 是一种标准色彩空间，它将颜色的强度值进行非线性映射（即伽马校正）。它被广泛应用于显示器和网页中，尤其是大多数图形硬件和浏览器使用它。

  • 其他色彩空间：还有像 AdobeRGB、DCI-P3 等，它们具有不同的色域和色彩表现方式，但在 three.js 中最常用的是线性色彩空间和 sRGB 色彩空间。

在 three.js 中，renderer.outputEncoding 用于指定渲染输出的色彩空间。设置 renderer.outputEncoding = THREE.sRGBEncoding 的作用是将渲染器的输出色彩空间设置为 sRGB，这对于正确显示颜色和亮度非常重要，尤其是在涉及到现代显示器和 HDR 渲染时。

四、阴影映射

1、开启阴影映射功能

当 renderer.shadowMap.enabled 设置为 true 时，渲染器会启用阴影映射（shadow mapping），允许物体的阴影在场景中正确地渲染出来。

2、阴影投射与接收

启用阴影映射后，你需要确保场景中的物体（如网格对象）设置了 castShadow 和 receiveShadow 属性来让物体正确地投射和接收阴影：

 

  • castShadow = true：表示该物体会投射阴影。
  • receiveShadow = true：表示该物体会接收阴影。

3、阴影映射类型

renderer.shadowMap.type：可以选择不同类型的阴影映射，如：

  • THREE.BasicShadowMap：简单的阴影，渲染速度较快，但效果较差。
  • THREE.PCFShadowMap：使用 PCF（Percentage Closer Filtering）技术的阴影，效果较好。
  • THREE.PCFSoftShadowMap：更柔和的阴影效果，适合制作自然的软阴影。

五、局部裁剪

在 Three.js 中，renderer.localClippingEnabled = true 的作用是启用局部裁剪平面（Local Clipping Planes）功能。这意味着你可以在渲染过程中定义多个裁剪平面，用于裁剪（切割）场景中的几何体，使得部分物体在渲染时被“裁掉”或不可见。

1、局部裁剪平面

裁剪平面是一种在 3D 空间中定义的平面，用于在渲染过程中“剪切”或裁掉物体的一部分。localClippingEnabled = true 使得你可以在材质上定义局部的裁剪平面，从而影响该材质的渲染，而不需要裁剪整个场景的所有物体。

与全局裁剪不同（通过 clippingPlanes 设置在场景或物体级别上），局部裁剪是针对特定材质的。通过这种方式，你可以有选择地对特定物体或区域应用裁剪效果。

2、使用方法

（1）开启局部裁剪

首先，你需要在渲染器中启用 localClippingEnabled。

（2）定义裁剪平面

然后，定义一个或多个裁剪平面，通常是在材质中设置。

（3）设置材质的裁剪平面

通过材质的 clippingPlanes 属性，可以为每个材质指定裁剪平面。

// 创建WebGL渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

// 启用局部裁剪
renderer.localClippingEnabled = true;

// 创建一个场景
const scene = new THREE.Scene();

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

// 创建裁剪平面
const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 1); // 平面法线（y轴）和一个常数

// 创建材质并启用裁剪平面
const material = new THREE.MeshStandardMaterial({
  color: 0x00ff00,
  clippingPlanes: [plane], // 使用裁剪平面
  clipShadows: true // 启用阴影裁剪
});

// 创建一个立方体
const geometry = new THREE.BoxGeometry();
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

animate();

clipShadows：如果为 true，则阴影也会受到裁剪影响（通常和 clippingPlanes 配合使用）。

THREE.Plane：裁剪平面由一个法向量和一个偏移量组成。可以通过 new THREE.Plane(normal, constant) 来定义平面，其中 normal 是平面的法线，constant 是平面与原点的距离。

相关推荐