英文:
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));
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));
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。
英文:
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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论