Three.js 选择性发光通道

提示词

PROMPT
1
使用 Three.js 和 postprocessing 库创建选择性发光通道，使用 SelectiveBloomEffect 实现选择性发光效果。

效果描述

这是一个展示如何创建选择性发光通道的示例，使用 SelectiveBloomEffect 实现选择性发光效果。

效果特性

  • 选择性发光：实现选择性发光
  • SelectiveBloomEffect：使用 SelectiveBloomEffect
  • 点击交互：点击选择发光对象
  • 发光强度：可调发光强度
  • 发光阈值：可调发光阈值
  • 后处理：使用 EffectComposer

核心参数

参数 值 说明
发光强度 3.0 发光强度
发光阈值 0.4 发光阈值
发光平滑 0.2 发光平滑
混合函数 ADD 混合函数
模糊效果 true 模糊效果

核心代码解析

创建选择性发光效果

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
const bloomEffect = new SelectiveBloomEffect(scene, camera, {
    blendFunction: BlendFunction.ADD,
    mipmapBlur: true,
    luminanceThreshold: 0.4,
    luminanceSmoothing: 0.2,
    intensity: 3.0,
});

composer.addPass(new RenderPass(scene, camera));
composer.addPass(new EffectPass(camera, bloomEffect));

创建对象

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
const boxMaterial = new THREE.MeshBasicMaterial({ color: 0xa0dee2 });
const boxMaterial2 = new THREE.MeshBasicMaterial({ color: "yellow" });

const box1 = new THREE.Mesh(boxGeometry, boxMaterial);
const box2 = new THREE.Mesh(boxGeometry, boxMaterial2);

box1.position.set(-1.5, 0, 0);
scene.add(box1, box2);

bloomEffect.selection.set([box1], true);

点击交互

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
window.addEventListener("click", (e) => {
    const raycaster = new THREE.Raycaster();
    const mouse = new THREE.Vector2(
        (e.offsetX / e.target.clientWidth) * 2 - 1,
        -(e.offsetY / e.target.clientHeight) * 2 + 1
    );

    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects(scene.children);

    if (intersects.length > 0) {
        const object = intersects[0].object;
        bloomEffect.selection.toggle(object);
    }
});

技术亮点

  1. 选择性发光：实现选择性发光
  2. SelectiveBloomEffect：使用 SelectiveBloomEffect
  3. 点击交互：点击选择发光对象
  4. 发光强度：可调发光强度
  5. 发光阈值：可调发光阈值

调试技巧

  1. 发光强度：调整发光强度改变发光效果
  2. 发光阈值：调整发光阈值改变发光范围
  3. 发光平滑：调整发光平滑改变发光过渡
  4. 混合函数：调整混合函数改变发光混合
  5. 模糊效果：调整模糊效果改变发光质量

扩展方向

  1. 更多效果：添加更多后处理效果
  2. 交互控制：添加交互控制
  3. 动画效果：添加动画效果
  4. 多种发光：支持多种发光
  5. 自定义发光：支持自定义发光

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