OutlinePass 未渲染到 THREE.js 中的場景

Question

我按照這些示例在選擇對象時制作對象的輪廓： https://threejs.org/examples/?q=out#webgl_postprocessing_outline https://github.com/scqilin/three-OutlinePass

沒有發現錯誤，但選擇object時沒有出現輪廓。 選擇 object 時會正確觸發 highlightSelectedObject function。 selectedObjects 不是 null。

在我的例子中，THREE.js 安裝在項目文件中。 場景、相機和渲染器在別處實例化。

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：

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);
    }
}

THREE.js 的路徑應該是正確的。 是渲染的問題嗎？

Answer 1

我有一個類似的問題。 在查看另一個示例時，我發現設置outlinePass.renderToScreen = true允許它工作。 它可能不存在，具體取決於您使用的 outlinePass.js 的版本。 我查看了已部署示例中的代碼，它就在那里。