学习threejs / webGL - 颜色和透明度

Posted 2023-02-27

【中文标题】学习threejs / webGL - 颜色和透明度

【英文标题】：Learning threejs / webGL - color and transparency

【发布时间】：2016-07-12 11:53:53

【问题描述】：

我正在尽我所能通过深入研究一些代码来学习threejs/webgl，但似乎找不到一些解决方案。

我正在使用 ocean2 着色器 (https://github.com/mrdoob/three.js/blob/master/examples/webgl_shaders_ocean2.html)

首先-这里使用的颜色是什么？它似乎不是 HSL

 OCEAN_COLOR: new THREE.Vector3(0.004, 0.016, 0.047),
 SKY_COLOR: new THREE.Vector3(3.2, 9.6, 12.8),

其次 - 是否可以更改它的 alpha 值？

我正在尝试在海洋下方制作图像，或者像本示例中所做的那样一起替换纹理 (http://maevabarriere.com/installation-comestible)

我知道这些都是模糊的问题，但我已经研究了好几天，似乎找不到任何答案，所以即使是正确方向的一点也将不胜感激。我很高兴能了解更多相关信息！

【参考方案1】：

如果您是通过研究海洋着色器示例来学习three.js，那么您将陷入困境。该示例最适合已经熟悉着色器和 three.js 的用户。

SKY_COLOR 仅表示特定于该示例的高动态范围 RGB 颜色。

https://github.com/mrdoob/three.js/blob/master/examples/js/shaders/OceanShaders.js

如果您希望海洋是透明的，则必须修改着色器。

three.js 中的颜色通常用THREE.Color 表示。 THREE.Color 没有 alpha 组件。

three.js 中的不透明度通常由material.opacity 指定。

three.js r.75

【讨论】：

谢谢@WestLangley。我知道有很多事情要做，但为什么不争取最高点呢，哈哈。我发现这对 Vector3 着色非常有帮助，我想我会分享以防其他人正在寻找 [link]forums.kleientertainment.com/topic/… 现在来了解如何使用这种材料。不透明度！