Three.js 轮廓后处理

提示词

PLAINTEXT
1
使用 Three.js 的 OutlinePass 后处理效果实现物体轮廓高亮，结合 Raycaster 实现点击选择。

效果描述

这是一个展示如何使用轮廓后处理效果的示例，包括点击选择物体和轮廓高亮显示。

效果特性

  • 轮廓高亮：使用 OutlinePass 高亮选中物体
  • 点击选择：使用 Raycaster 实现点击选择
  • 后处理：使用 EffectComposer 管理后处理
  • 多个物体：创建多个随机位置的立方体
  • 阻尼控制：使用 OrbitControls 阻尼效果
  • 色彩校正：使用 OutputPass 进行色彩校正

核心参数

参数 值 说明
物体数量 10 随机位置的立方体
轮廓颜色 默认 OutlinePass 默认颜色
阻尼系数 0.02 OrbitControls 阻尼系数
物体范围 10 物体位置范围
网格大小 100, 20 GridHelper 大小

核心代码解析

创建后处理

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

// 轮廓
const outlinePass = new OutlinePass(
    new THREE.Vector2(window.innerWidth, window.innerHeight),
    scene,
    camera
);
composer.addPass(outlinePass);

// 色彩校正
const outputPass = new OutputPass();
composer.addPass(outputPass);

点击事件

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const raycaster = new THREE.Raycaster();

window.addEventListener("click", (event) => {
    const mouse = new THREE.Vector2(
        (event.offsetX / event.target.clientWidth) * 2 - 1,
        -(event.offsetY / event.target.clientHeight) * 2 + 1
    );

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

    if (intersects.length > 0)
        outlinePass.selectedObjects = [intersects[0].object];
    else outlinePass.selectedObjects = [];
});

创建物体

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
for (let i = 0; i < 10; i++) {
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({
        color: 0x00ff00 * Math.random(),
    });
    const cube = new THREE.Mesh(geometry, material);
    cube.position.x = Math.random() * 10;
    cube.position.y = Math.random() * 10;
    cube.position.z = Math.random() * 10;
    scene.add(cube);
}

技术亮点

  1. OutlinePass：使用 OutlinePass 创建轮廓效果
  2. Raycaster：使用 Raycaster 实现点击选择
  3. EffectComposer：使用 EffectComposer 管理后处理
  4. OutputPass：使用 OutputPass 进行色彩校正
  5. 阻尼效果：使用 OrbitControls 阻尼效果

调试技巧

  1. 轮廓参数：调整 OutlinePass 参数控制轮廓效果
  2. 选择逻辑：调整 Raycaster 参数控制选择范围
  3. 物体数量：调整物体数量测试性能
  4. 阻尼系数：调整阻尼系数控制交互感
  5. 点击区域：确保点击事件正确绑定

扩展方向

  1. 轮廓样式：自定义轮廓颜色和宽度
  2. 多选功能：支持多选物体
  3. 悬停效果：添加悬停轮廓效果
  4. 动画过渡：添加轮廓动画过渡
  5. UI 集成：集成 UI 显示选中信息

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