THREE.js中OutlinePass无法渲染至场景的问题求助

问题描述 #

参考Three.js轮廓示例实现选中物体轮廓效果，无报错信息，highlightSelectedObject函数触发正常且selectedObjects不为空，但选中物体时轮廓不显示。项目已本地安装Three.js，Scene、Camera和Renderer在其他模块实例化。

导入代码 #

import * as THREE from "../../build/three.module.js";
import {OutlinePass} from "../../examples/jsm/postprocessing/OutlinePass.js";
import {RenderPass} from "../../examples/jsm/postprocessing/RenderPass.js";
import {EffectComposer} from "../../examples/jsm/postprocessing/EffectComposer.js";

原实现函数 #

function highlightSelectedObject(selectedObjects) {
    if (selectedObjects != null) {

        const scene = project.currentScene.scene;
        const camera = project.currentScene.camera;
        const renderer = project.renderer;

        var composer = new EffectComposer(renderer);
        var renderPass = new RenderPass(scene, camera);
        var outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera, selectedObjects);
        outlinePass.renderToScreen = true;

        outlinePass.selectedObjects = selectedObjects;

        composer.addPass(renderPass);
        composer.addPass(outlinePass);

        const params = {
            edgeStrength: 2,
            edgeGlow: 1,
            edgeThickness: 1.0,
            pulsePeriod: 0,
            usePatternTexture: false
        };

        outlinePass.edgeStrength = params.edgeStrength;
        outlinePass.edgeGlow = params.edgeGlow;
        outlinePass.visibleEdgeColor.set(0xffffff);
        outlinePass.hiddenEdgeColor.set(0xffffff);

        composer.render(scene, camera);
    }
}

核心问题分析 #

1. 后处理对象重复创建：每次选中物体时都新建EffectComposer和OutlinePass，导致渲染上下文混乱，且无法持续作用于后续帧。
2. 渲染流程错误：仅在选中时调用一次composer.render，后续帧仍使用原renderer.render，轮廓效果无法持续显示。
3. 冗余参数赋值：初始化OutlinePass时已传入selectedObjects，后续重复赋值无意义，但不影响核心功能。

修正方案 #

1. 初始化全局后处理对象 #

在场景初始化完成后（而非选中时）创建一次后处理相关对象，避免重复创建：

// 模块级变量声明
let composer, outlinePass;

// 场景初始化完成后执行此函数
function initPostProcessing() {
    const scene = project.currentScene.scene;
    const camera = project.currentScene.camera;
    const renderer = project.renderer;

    // 创建后处理 composer
    composer = new EffectComposer(renderer);
    const renderPass = new RenderPass(scene, camera);
    
    // 初始化轮廓通道
    outlinePass = new OutlinePass(
        new THREE.Vector2(window.innerWidth, window.innerHeight),
        scene,
        camera
    );

    // 配置轮廓样式参数
    outlinePass.edgeStrength = 2;
    outlinePass.edgeGlow = 1;
    outlinePass.edgeThickness = 1.0;
    outlinePass.pulsePeriod = 0;
    outlinePass.usePatternTexture = false;
    outlinePass.visibleEdgeColor.set(0xffffff);
    outlinePass.hiddenEdgeColor.set(0xffffff);
    outlinePass.renderToScreen = true;

    // 添加通道到 composer
    composer.addPass(renderPass);
    composer.addPass(outlinePass);
}

// 监听窗口大小变化，更新后处理尺寸
window.addEventListener('resize', () => {
    const renderer = project.renderer;
    const camera = project.currentScene.camera;
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    composer.setSize(window.innerWidth, window.innerHeight);
});

2. 修改选中函数，仅更新选中对象 #

选中时只需更新OutlinePass的selectedObjects属性，无需重建整个后处理链：

function highlightSelectedObject(selectedObjects) {
    // 确保后处理对象已初始化
    if (!outlinePass) return;
    // 更新选中对象，空数组则取消轮廓
    outlinePass.selectedObjects = selectedObjects || [];
}

3. 修改帧循环，使用Composer渲染 #

将原渲染循环中的renderer.render(scene, camera)替换为composer.render()，让后处理效果持续作用于每一帧：

function animate() {
    requestAnimationFrame(animate);
    
    // 保留原有的场景更新逻辑（如动画、相机控制等）
    // ...
    
    // 用后处理 composer 渲染场景
    composer.render();
}
animate();

额外注意事项 #

• 确保使用的是PerspectiveCamera，OrthographicCamera需要额外适配OutlinePass参数
• 选中对象的visible属性需设为true，且材质不能完全透明
• 检查Three.js版本与官方示例匹配，避免版本兼容性问题

内容的提问来源于stack exchange，提问作者trslys00