【问题标题】:Learning threejs / webGL - color and transparency学习threejs / webGL - 颜色和透明度
【发布时间】: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)

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

【问题讨论】:

    标签: three.js webgl shader


    【解决方案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/… 现在来了解如何使用这种材料。不透明度!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-07-26
    • 2012-07-11
    • 2011-10-06
    • 2016-04-24
    • 2012-01-20
    • 1970-01-01
    相关资源
    最近更新 更多