添加线条在Outline Threejs上。

huangapple go评论58阅读模式
英文:

Add lines over the Outline Threejs

问题

I've added an OutlinePass to my mesh, but I have also some lines that has to be over that outlinepass, is that possible to do?

// 创建一个EffectComposer实例
this.compose = new EffectComposer(this.renderer);

// 将RenderPass添加到EffectComposer实例
var renderPass = new RenderPass(this.scene, this.camera);
this.compose.addPass(renderPass);

// 创建一个OutlinePass实例并将立方体网格添加到所选对象中
var outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), this.scene, this.camera);
outlinePass.renderToScreen = true;
outlinePass.selectedObjects.push(this.mesh);

// -- 参数配置
outlinePass.edgeStrength = 60;
outlinePass.edgeGlow = 0;
outlinePass.edgeThickness = 5;
outlinePass.pulsePeriod = 0;
outlinePass.usePatternTexture = false; // 用于对象网格的图案纹理
outlinePass.visibleEdgeColor.set("#CCCCCC"); // 设置基本边缘颜色
outlinePass.hiddenEdgeColor.set("#CCCCCC"); // 当被其他对象遮挡时设置边缘颜色
outlinePass.overlayMaterial.blending = THREE.CustomBlending;

this.compose.addPass(outlinePass);

// 添加FXAA效果以平滑轮廓的边缘
var effectFXAA = new ShaderPass(FXAAShader);
effectFXAA.uniforms["resolution"].value.set(
1 / window.innerWidth,
1 / window.innerHeight
);
effectFXAA.renderToScreen = true;
this.compose.addPass(effectFXAA);
this.createWideLine(new Vector3(0, 0, 56), new Vector3(-300, 0, 56), new THREE.Color(0x00FF00));

That's the actual result:
添加线条在Outline Threejs上。

As you can see the lines are under the outlinepass and I need to have that lines over the outlinepass.

Really thanks

英文:

I've added an OutlinePass to my mesh, but I have also some lines that has to be over that outlinepass, is that possible to do?

// Crea una instancia de EffectComposer
    this.compose = new EffectComposer(this.renderer);

    // Agrega el render pass a la instancia de EffectComposer
    var renderPass = new RenderPass(this.scene, this.camera);
    this.compose.addPass(renderPass);

    // Crea una instancia de OutlinePass y agrega la malla del cubo a los objetos seleccionados
    var outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), this.scene, this.camera);
    outlinePass.renderToScreen = true;
    outlinePass.selectedObjects.push(this.mesh);
    

    
    // -- parameter config
    outlinePass.edgeStrength = 60;
    outlinePass.edgeGlow = 0;
    outlinePass.edgeThickness = 5;
    outlinePass.pulsePeriod = 0;
    outlinePass.usePatternTexture = false; // patter texture for an object mesh
    outlinePass.visibleEdgeColor.set("#CCCCCC"); // set basic edge color
    outlinePass.hiddenEdgeColor.set("#CCCCCC"); // set edge color when it hidden by other objects
    outlinePass.overlayMaterial.blending = THREE.CustomBlending

    this.compose.addPass(outlinePass);

   


    // Agrega un efecto FXAA para suavizar los bordes del contorno
    var effectFXAA = new ShaderPass(FXAAShader);
    effectFXAA.uniforms["resolution"].value.set(
        1 / window.innerWidth,
        1 / window.innerHeight
    );
    effectFXAA.renderToScreen = true;
    this.compose.addPass(effectFXAA);
    this.createWideLine(new Vector3(0,0,56),new Vector3(-300,0,56), new THREE.Color(0x00FF00));

That's the actual result:
添加线条在Outline Threejs上。

As you can see the lines are under the outlinepass and I need to have that lines over the outlinepass.

Really thanks

答案1

得分: 1

Outline Pass 是在场景渲染之后以单独的通道渲染的,因此它将始终位于顶部。如果您想在轮廓之上绘制线条,请创建一个类似 Three.js Editor 中的 SceneHelper 的不同场景,并在轮廓通道之后使用另一个渲染通道来渲染它。

var renderPassScene = new RenderPass(this.scene, this.camera);
this.compose.addPass(renderPassScene);
var outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), this.scene, this.camera);
// ....
var renderPassSceneHelper = new RenderPass(this.sceneHelper, this.camera);
this.compose.addPass(renderPassSceneHelper);

将所需的线条添加到 sceneHelper 而不是 Scene。

参考 three.js 编辑器中的渲染函数

英文:

Outline Pass is rendered in a separate pass after the scene is rendered so it will be always on top
if you want to draw lines on top of the outline create a different scene similar to SceneHelper in Three.js Editor and render it using another render pass after outline pass

 var renderPassScene = new RenderPass(this.scene, this.camera);
 this.compose.addPass(renderPassScene);
 var outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), this.scene, this.camera);
 // ....
 var renderPassSceneHelper = new RenderPass(this.sceneHelper, this.camera);
 this.compose.addPass(renderPassSceneHelper );

Add The lines you need on top to sceneHelper instead of Scene

reference for render function in three.js editor

huangapple
  • 本文由 发表于 2023年5月22日 22:21:10
  • 转载请务必保留本文链接:https://go.coder-hub.com/76307166.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定