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

Question

我按照以下示例在选择对象时制作对象的轮廓： https://trijs.org/examples/?q=out#webgl_postprocessing_outline https://github.com/scqilin/ Three-OutlinePass

未发现错误，但选择对象时不出现轮廓。当选择一个对象时，就会正确触发highlightSelectedObject函数。 selectedObjects 不为空。

在我的例子中，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 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 版本。我查看了部署示例中的代码，它就在那里。

Answer 2

我不知道你的其余代码，但问题可能与

rerender.render()

的用法有关。我遇到了类似的问题，并在保留

effectComposer.render()

的同时删除此渲染方法为我解决了这个问题。此外，确保只有一个通道的

renderToScreen

属性设置为

true

。另外，请确保您的

addPass

通话顺序正确。

    const animate = () => {
      requestAnimationFrame(animate);
      this.raycasterWork();
      this._effectComposer.render();
    };

    this.initHoverEffects();
    animate();

protected initHoverEffects(): void {
    this._effectComposer = new EffectComposer(this._renderer);
    this._effectComposer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

    this._renderPass = new RenderPass(this._scene, this._camera);

    this._outlinePass = new OutlinePass(
      new THREE.Vector2(this._width, this._height),
      this._scene,
      this._camera
    );
    this._outlinePass.edgeStrength = 5;
    this._outlinePass.edgeGlow = 0.6;
    this._outlinePass.edgeThickness = 1;
    this._outlinePass.pulsePeriod = 2.5;
    this._outlinePass.visibleEdgeColor = new THREE.Color(
      ItemsFactory.ITEM_DRAW_CONFIG.selectionColor
    );
    this._outlinePass.hiddenEdgeColor = new THREE.Color(
      ItemsFactory.ITEM_DRAW_CONFIG.hiddenSelectionColor
    );

    this._shaderPass = new ShaderPass(FXAAShader);
    this._shaderPass.uniforms["resolution"].value.set(
      1 / this._width,
      1 / this._height
    );

    this._renderPass.renderToScreen = false;
    this._outlinePass.renderToScreen = false;
    this._shaderPass.renderToScreen = true;

    this._effectComposer.addPass(this._renderPass);
    this._effectComposer.addPass(this._outlinePass);
    this._effectComposer.addPass(this._shaderPass);
  }