Javascript 复杂形状字符轮廓

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

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

---

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

适用于任何复杂几何体的通用解决方案可能是通过in three.js应用片段着色器。不确定您的经验水平，但如果需要，可以找到着色器介绍

可以找到一个使用着色器高亮显示几何体的好例子。在顶点着色器中，它们计算顶点的法线和用于表示辉光效果强度的参数：

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

---

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

side: THREE.BackSide  

---

正如你所看到的，这不是理想的效果。我想在所有三个网格后面有一个干净的轮廓，不重叠。我的编程着色器级别确实不存在，但在大多数在线资源中，人们都说可以使用这种克隆网格的方法。

我在gamedev.stackexchange.com/上发现了一些有用的东西。他们谈到了模具缓冲区。但我不知道如何将此应用于THREE.js

---

@spassvolgel写的是正确的

我怀疑需要做的是这样的事情：1。首先需要渲染背景2。然后，在一个单独的透明层上，角色模型的颜色是平坦的，略大于原始的3。在另一个透明层上，角色及其法线材质/纹理4。最后，字符层需要放在轮廓层的顶部，它们的组合需要放在背景中

您只需创建多个场景并将其与顺序渲染过程组合：

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

轻松实现：

小提琴：

---

three.js.r.66

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

您可以只克隆并设置普通材质，然后稍微缩放克隆并将其移离摄影机。因此，大纲只是比实际模型更大的模型。只是一个想法，我记得读过一些这样做的游戏…好吧，谢谢亚库。我会试着把克隆人从摄像机上移开，以测试你的方式，但问题是我的角色比这更复杂，他们在地面上行走，我想只是因为摄像机是从顶部看的，轮廓克隆人会走到地面后面，把一切搞得一团糟！你最终成功了吗？我对解决方案非常感兴趣。我提供赏金，因为我真的很想知道如何做到这一点。像Ashkan一样，创建带有背面材质的克隆的问题也会出现，因为形状很复杂。我怀疑需要做的是这样的事情：1。首先需要渲染背景2。然后，在一个单独的透明层上，角色模型的颜色是平坦的，略大于原始的3。在另一个透明层上，角色及其法线材质/纹理4。最后，字符层需要放在大纲层的顶部，它们的组合需要放在bgAshkan中-请记住通过点击复选标记“接受”答案。谢谢你。看这张图片，这是我对着色器的问题。我认为着色器的结果不会有太大的不同，除非你编写一些复杂的着色器，我不能：D，是的，对于这件事，背面不是最好的主意…非常感谢！这看起来很有希望。赏金很快就要到期了，但我现在还没来得及深入研究代码，所以我会把它奖励给你。又来了！谢谢你的回答，演示也很棒。但还是有一些事情困扰着我。我的问题是，对象不是单个网格…@AshkanGhodrat你无法使用这种方法处理具有子网格的对象吗？我无法修改你的meshGroup代码，但你认为它可以解决此图像中的问题吗？我认为你应该发布一个新问题，明确说明你的额外要求。