假设我有这个角色，我想让用户选择它，所以当它被选中时，我想在它周围显示一个轮廓。
角色是一个带有一些网格的 object3D。我尝试克隆并设置背面材质，但它不起作用，问题是形状中的每个立方体都是单独渲染背面的，所以轮廓是错误的。
我需要为轮廓创建另一个网格，有没有更简单的方法？
问问题
5300 次
5 回答
18
@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
三.js.r.129
于 2014-02-18T19:04:24.227 回答
1
适用于任何复杂几何的通用解决方案可能是通过three.js中的 ShaderMaterial 类应用片段着色器。不确定您的经验水平，但如果您需要，可以在此处找到着色器简介。
可以在此处找到使用着色器突出几何图形的一个很好的示例。在他们的顶点着色器中，他们计算顶点的法线和用于表示发光效果强度的参数：
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 );
}
于 2014-02-13T17:39:08.167 回答
1
我在 gamedev.stackexchange.com/ 上发现了一些有用的东西。他们谈论模板缓冲区。不过，我不知道如何将其应用于 THREE.js..
于 2014-02-18T18:21:18.617 回答
1
您可以通过将轮廓对象渲染到（理想情况下）与目标帧缓冲区大小相同的纹理，然后使用该纹理渲染帧缓冲区大小的四边形并让片段着色器模糊或进行其他图像转换，从而获得良好的结果。我在这里有一个使用原始 WebGL 的示例，但您可以轻松制作自定义 ShaderMaterial。
于 2018-12-14T05:44:34.710 回答
0
我还没有找到答案，但我想演示当我创建多个网格时会发生什么，并在每个网格后面放置另一个网格
side: THREE.BackSide
如您所见，这不是预期的效果。我想在所有三个网格后面有一个干净的轮廓，不重叠。我的着色器编程水平真的不存在，但在大多数在线资源上，人们都说要使用这种克隆网格的方法。
于 2014-02-15T22:57:20.290 回答