复杂的形状字符轮廓 [英] Complex shape character outline

问题描述

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

Say I have this character and I want allow user to select it, so when it s selected I want to show an outline around it.

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

the character is an object3D with some meshes. I tried to clone and set a backside material, but it did NOT work, the problem was each cube in the shape was render with backside separately so the outline was wrong.

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

do I need to create another mesh for the outline, is there an easier way?

推荐答案

@spassvolgel所写的内容是正确的;

What @spassvolgel wrote is correct;

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

What I suspect needs to be done is something like this: 1. First the background needs to be rendered 2. Then, on a separate transparent layer, the character model with a flat color, slightly bigger than the original, 3. On another transparent layer the character with its normal material / texture 4. Finally, the character layer needs to go on top of the outline layer and them combined need to be placed in the bg

你只需创建多个场景并将它们与顺序渲染过程结合起来：

You just create multiple scenes and combine them with sequential render passes:

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 实现：

Here is a fiddle implemented with GPU picking, but it could just as easily be implemented with the more-familiar Raycaster:

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

three.js.r.66

three.js.r.66

这篇关于复杂的形状字符轮廓的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！