简体繁体 English

Three.js：如何制作对比球？

[英]Three.js: how to make a contrast sphere?

原文 2013-06-10 16:03:26 4 1 javascript/ three.js/ outlining

How to make a white sphere (THREE.SphereGeometry) be visible on a dark green surface and on a white scene background? 如何使白色球体（THREE.SphereGeometry）在深绿色表面和白色场景背景上可见？ Is there some outlining in Three.js? Three.js中是否有概述？ Probably dynamic outlining? 可能是动态概述？

three.js r.58 three.js r.58

1 个解决方案

An easy solution is to use a multi-material, wireframe material combined with your original material, for an example check out: 一个简单的解决方案是将多种材料的线框材料与原始材料结合使用，例如，请查看以下示例：

http://stemkoski.github.io/Three.js/Wireframe.html http://stemkoski.github.io/Three.js/Wireframe.html

A slightly trickier (but perhaps more aesthetically pleasing) solution is to create a second object with the same geometry as the first, at the same position, scaled up by a small amount, with a solid color material, and most importantly, set the "side" parameter to THREE.BackSide. 一种稍微棘手（但也许更美观）的解决方案是在第二个对象的相同位置处创建一个具有相同几何形状的对象，并使用纯色材料按比例放大一小部分，最重要的是，将“侧”参数设置为THREE.BackSide。 This will ensure that your second mesh does not obscure the first. 这将确保您的第二个网格不会遮挡第一个。 For an example, check out: 例如，签出：

http://stemkoski.github.io/Three.js/Outline.html http://stemkoski.github.io/Three.js/Outline.html

And finally, most trickily, you could do some sort of "halo" glow style effect; 最后，最棘手的是，您可以执行某种“光晕”发光样式效果； this solution involves a bit of coding using shaders. 该解决方案涉及使用着色器进行一些编码。 For an example, check out: 例如，签出：

http://stemkoski.github.io/Three.js/Shader-Halo.html http://stemkoski.github.io/Three.js/Shader-Halo.html

Hope this helps! 希望这可以帮助！