Question

说我有这个角色，我想让用户选择它，所以当它被选中时我想在它周围显示一个轮廓。

enter image description here

该角色是一个带有一些网格的object3D。我试图克隆并设置一个背面材料，但它不起作用，问题是形状中的每个立方体都是单独渲染背面，因此轮廓错误。

我是否需要为轮廓创建另一个网格，是否有更简单的方法？

Answer 1

@spassvolgel写的是正确的;

我怀疑需要做的是这样的：1。首先需要渲染背景2.然后，在单独的透明层上，角色模型的颜色比原始颜色略大，3。在另一个透明层上，该字符具有正常的材质/纹理4.最后，字符图层需要位于轮廓图层的顶部，并且它们的组合需要放在bg中

您只需创建多个场景并将它们与顺序渲染过程组合在一起：

renderer.autoClear = false;
. . . 

renderer.render(scene, camera); // the entire scene
renderer.clearDepth();
renderer.render(scene2, camera); // just the selected item, larger, in a flat color
renderer.render(scene3, camera); // the selected item again

这是一个用GPU选择实现的小提琴，但它可以很容易地用更熟悉的Raycaster实现：

小提琴：http://jsfiddle.net/Tcb3z/

Screenshot of selected item outlined

three.js.r.66

Answer 2

适用于任何复杂度几何的通用解决方案可能是通过three.js中的ShaderMaterial class应用片段着色器。不确定您的体验级别是什么，但如果您需要，可以找到着色器简介here。

可以找到使用着色器突出显示几何图形的一个很好的示例here。在它们的顶点着色器中，它们计算顶点的法线和用于表示发光效果强度的参数：

uniform vec3 viewVector;
uniform float c;
uniform float p;
varying float intensity;
void main() 
{
    vec3 vNormal = normalize( normalMatrix * normal );
    vec3 vNormel = normalize( normalMatrix * viewVector );
    intensity = pow( c - dot(vNormal, vNormel), p );

    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

这些参数传递给片段着色器，用于修改几何体周围像素的颜色值：

uniform vec3 glowColor;
varying float intensity;
void main() 
{
    vec3 glow = glowColor * intensity;
    gl_FragColor = vec4( glow, 1.0 );
}

Answer 3

我在gamedev.stackexchange.com/上找到了一些有用的东西。他们谈论模板缓冲区。我不知道如何将它应用于THREE.js虽然..

https://gamedev.stackexchange.com/questions/59361/opengl-get-the-outline-of-multiple-overlapping-objects

Answer 4

通过将概述的对象渲染为（理想情况下）目标帧缓冲区大小的纹理，然后使用该纹理渲染帧缓冲区大小的四边形并使片段着色器模糊或执行其他操作，可以获得良好的结果。图像转换。我有一个使用原始WebGL的示例here，但是您可以轻松地自定义ShaderMaterial。

Answer 5

我还没有找到答案，但我想展示当我创建多个网格时会发生什么，并在每个网格后面添加另一个网格

side: THREE.BackSide

http://jsfiddle.net/GwS9c/8/

正如您所看到的，这不是理想的效果。我希望所有三个网格背后的轮廓清晰，不重叠。我的编程着色器级别实际上并不存在，但在大多数在线资源上，人们都说使用这种克隆网格的方法。

复杂的形状字符轮廓

5 个答案: