【threejs】三要素之渲染器

渲染器

渲染器负责将场景渲染到指定的输出目标上。

文档：https://threejs.rocyuan.top/docs/?q=webgl#api/zh/renderers/WebGLRenderer

创建渲染器

import * as THREE from "three";

const renderer = new THREE.WebGLRenderer();

常见操作

设置渲染器的大小

通过 setSize 方法设置渲染器的大小，通常设置为画布的宽度和高度。

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

将渲染器的 DOM 元素添加到页面中

渲染器会自动创建一个 canvas 元素，你需要将其添加到页面的 DOM 中。与【指定渲染器输出的 canvas】二选一即可。

document.body.appendChild(renderer.domElement);

指定渲染器输出的 canvas

如果你已经有一个 canvas 元素，你可以将其传递给渲染器的 canvas 属性。与【将渲染器的 DOM 元素添加到页面中】二选一即可。

import * as THREE from "three";

const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector("#myCanvas"),
});

渲染场景

使用 render 方法将场景和相机结合起来，渲染出最终的图像。

renderer.render(scene, camera);

启用抗锯齿

通过 setAntialias 方法启用抗锯齿，以减少图像的锯齿感。

import * as THREE from "three";

const renderer = new THREE.WebGLRenderer({ antialias: true });

设置像素比率

通过 setPixelRatio 方法设置渲染器的像素比率，以适应高分辨率屏幕。

renderer.setPixelRatio(window.devicePixelRatio);

设置背景颜色

通过 setClearColor 方法设置渲染器的背景颜色。

renderer.setClearColor(0xffffff);

调整画布大小

当窗口大小发生变化时，需要调整渲染器的大小以适应新的窗口大小。

window.addEventListener("resize", () => {
  const width = window.innerWidth;
  const height = window.innerHeight;
  renderer.setSize(width, height);
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
});

渲染循环

渲染循环是渲染器的核心，它会不断地渲染场景并更新渲染器的输出。

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

保存渲染结果

通过 toDataURL 方法将渲染结果保存为图片。

const image = renderer.domElement.toDataURL("image/png");
const link = document.createElement("a");
link.href = image;
link.download = "screenshot.png";
link.click();

销毁渲染器

当不再需要渲染器时，需要调用 dispose 方法销毁渲染器。

renderer.dispose();