复杂的形状字符轮廓

Ash*_*rat 13 javascript outline three.js

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

在此输入图像描述 在此输入图像描述

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

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

Wes*_*ley 17

@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
Run Code Online (Sandbox Code Playgroud)

这是一个用GPU选择实现的小提琴,但它可以用更熟悉的方式轻松实现Raycaster:

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

所列项目的屏幕截图

three.js.r.66