Three.js 截图功能

提示词

PLAINTEXT
1
使用 Three.js 的 WebGLRenderer 和 EffectComposer 实现截图功能，支持后处理效果的截图。

效果描述

这是一个展示如何实现截图功能的示例，包括基础渲染和后处理效果的截图。

效果特性

  • 基础截图：使用 WebGLRenderer 截图
  • 后处理截图：使用 EffectComposer 截图
  • Bloom 效果：使用 UnrealBloomPass 创建发光效果
  • GUI 控制：使用 lil-gui 控制截图
  • PNG 格式：导出 PNG 格式图片
  • 自动下载：自动触发下载

核心参数

参数 值 说明
Bloom 阈值 1.5 Bloom 效果阈值
Bloom 强度 0 Bloom 效果强度
Bloom 半径 0 Bloom 效果半径
图片格式 image/png PNG 格式
图片质量 0.8 图片质量

核心代码解析

创建后处理

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
const composer = new EffectComposer(renderer);
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);

const bloomPass = new UnrealBloomPass(
    new THREE.Vector2(window.innerWidth, window.innerHeight),
    1.5,
    0,
    0
);
composer.addPass(bloomPass);

截图函数

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
function screenShot() {
    renderer.render(scene, camera);
    composer.render();
    
    const base64 = renderer.domElement.toDataURL(["image/png", "0.8"]);
    
    const link = document.createElement("a");
    link.href = base64;
    link.download = "myImage.png";
    link.click();
}

GUI 控制

JAVASCRIPT
1
new GUI().add({ 截图: screenShot }, "截图");

渲染循环

JAVASCRIPT
1
2
3
4
function animate() {
    requestAnimationFrame(animate);
    composer.render();
}

技术亮点

  1. EffectComposer：使用 EffectComposer 管理后处理
  2. UnrealBloomPass：创建发光效果
  3. toDataURL：将 canvas 转换为 base64 图片
  4. 自动下载：创建链接自动触发下载
  5. 双重渲染：先渲染基础场景再渲染后处理

调试技巧

  1. 截图时机：确保在渲染完成后截图
  2. 图片质量：调整 toDataURL 的质量参数
  3. Bloom 参数：调整 Bloom 效果参数
  4. 图片格式：选择合适的图片格式
  5. 文件名：自定义截图文件名

扩展方向

  1. 截图预览：添加截图预览功能
  2. 多格式：支持多种图片格式
  3. 分辨率控制：控制截图分辨率
  4. 截图区域：截取指定区域
  5. 批量截图：批量截图功能

本文档由 ThreeLab 编辑整理，如需转载，请注明出处。