javascript - 复杂形状人物轮廓

标签 javascript three.js outline

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

enter image description here enter image description here

Angular 色是一个带有一些网格的 object3D。 我尝试克隆并设置背面 Material ,但没有用,问题是形状中的每个立方体都单独渲染背面,所以轮廓是错误的。

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

最佳答案

@spassvolgel 写的是正确的;

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

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

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

关于javascript - 复杂形状人物轮廓,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17739760/

相关文章:

javascript - react 路由器需要oauth 2客户端实现

javascript - Google 图表 LogScale 无法正常工作

javascript - 三个JS动画屏幕空白

css - 带有边框/轮廓/边距/填充的奇怪错误

css - outline 和 border CSS 属性有什么区别?

javascript - 带有参数列表的 For 循环

javascript - 如何使用 selectBoxIt 刷新所有选择字段以更改为横向模式?

unity-game-engine - Unity 中的 ThreeJS 着色器

javascript - 3D 对象在我的网站上显示为黑色背景

c - Visual Studio 2013 C 语法概述