three.js(4) Renderer介绍和使用

Three.js中的Renderer（渲染器）是用来将场景和相机渲染到屏幕上的组件。它可以将3D场景中的模型、光照和材质等元素转化成2D图像，并显示在浏览器中。

在Three.js中，有几种不同类型的渲染器可用，每种都有其自己的用途和特性。以下是一些常见的Three.js渲染器的种类：

WebGLRenderer：这是Three.js中最常用的渲染器，它使用WebGL来绘制3D场景。它提供了强大的图形渲染功能，并且能够在大多数现代的Web浏览器中运行。

CSS3DRenderer：这个渲染器可以用来在3D空间中呈现DOM元素。它可以与WebGLRenderer结合使用，用于在3D场景中显示HTML元素。

SVGRenderer：这个渲染器可以用来在SVG格式中呈现3D场景。它通常用于在需要矢量图形的环境中使用，比如在打印或分辨率无关的应用中。

RaytracingRenderer：这个渲染器使用光线追踪技术来渲染3D场景，产生非常逼真的图像。它是一个相对较新的渲染器，通常用于需要高质量渲染的应用中。

这些是一些常见的Three.js渲染器的种类，每种都有其自己的特点和适用范围。根据应用的需求，可以选择适合的渲染器来实现最佳的渲染效果。

以下是对Renderer的一些属性和API的详细介绍：

属性：

domElement: 返回渲染器的DOM元素，通常是一个canvas元素，用于显示渲染的场景。

shadowMap.enabled: 设置是否启用阴影映射。

shadowMap.type: 设置阴影映射的类型，可以是BasicShadowMap、PCFShadowMap或PCFSoftShadowMap。

outputEncoding: 设置渲染器的输出编码，可以是sRGBEncoding或LinearEncoding。

API：

setSize(width, height): 设置渲染器的大小，通常与窗口大小相匹配。
javascript

1	renderer.setSize(window.innerWidth, window.innerHeight);

render(scene, camera): 将指定的场景和相机渲染到屏幕上。
javascript

1	renderer.render(scene, camera);

setClearColor(color, alpha): 设置渲染器的清除颜色和透明度。
javascript

1	renderer.setClearColor(0x000000, 1);

setPixelRatio(value): 设置渲染器的像素比例，通常用于支持高分辨率屏幕。
javascript

1	renderer.setPixelRatio(window.devicePixelRatio);

setAnimationLoop(callback): 设置循环渲染的回调函数，通常用于动画效果的渲染。
javascript

1
2
3

renderer.setAnimationLoop(() => {
// 在这里执行渲染循环中的操作
});

clear(): 清除渲染缓冲区，通常在每一帧渲染之前调用。
javascript

1	renderer.clear();

dispose(): 释放渲染器占用的资源，通常在不再需要渲染器时调用。
javascript

1	renderer.dispose();

这些属性和API可以帮助开发者在Three.js中使用渲染器实现各种功能，包括设置渲染器的大小、清除颜色、开启阴影映射等，以及进行场景和相机的渲染操作。

以下是一个使用Renderer的简单例子，用于在屏幕上渲染一个蓝色的矩形：

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

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

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

// 创建矩形
const geometry = new THREE.PlaneGeometry(2, 2);
const material = new THREE.MeshBasicMaterial({ color: 0x0000ff });
const rectangle = new THREE.Mesh(geometry, material);
scene.add(rectangle);

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