三个js黑色材质到透明答案

【问题标题】：Three js black color of material to transparent三个js黑色材质到透明
【发布时间】：2015-04-05 11:40:00
【问题描述】：

如何在没有 alphaMap 的情况下从具有透明黑色的纹理制作 Lambert 材质。

我有带有云层纹理的球体。我需要黑色透明，如果我使用混合，它会影响阴影，我需要保持像 MeshPhong 材质一样的行为，但只能使用透明黑色。

var cloudsMaterial = new THREE.MeshLambertMaterial( { 
                        color: 0xffffff, 
                        map: THREE.ImageUtils.loadTexture( "img/planets/clouds.jpg" ),

                        specular   : new THREE.Color("rgb(255,255,255)"),
                        shininess  : 0.1,                              
                        depthTest  : 0,
                        blending   : 1,
                        transparent: true,
                        bumpScale  : 1, //0.8
                        bumpMap    : THREE.ImageUtils.loadTexture( "img/planets/bump.jpg" ),                                                      
                        } );

设置混合或其他属性的正确方法是什么？

【问题讨论】：

试试blending:2 或blending:THREE.AdditiveBlending。混合模式常量为here
添加剂混合将使纹理......添加剂。我正在尝试自定义混合，没有任何组合可以解决问题。我只需要使渲染器清晰的颜色透明（黑色）和其他颜色，如果是像素灰色（50% 黑色）的颜色，则应该有 50% 的透明度。我不能使用 Alpha Map，因为它是自定义动画着色器并且 alphaMap 没有动画。
有很多方法可以做到这一点，例如定义一个自定义着色器，但似乎最简单的方法就是将 Alpha 通道添加到您的纹理中。如果你不能修改资源，你可以在运行时进行。

标签： javascript three.js

【解决方案1】：

我的解决方案是使用 alpha 贴图（BW 纹理，其中白色 = 不透明度较低，黑色 = 100% 不透明）：

var t = THREE.ImageUtils.loadTexture( "clouds.jpg" );
var map = THREE.ImageUtils.loadTexture( "clouds_alpha.jpg" );
var cloudsMaterial = new THREE.MeshLambertMaterial( { 
                        map        : t,
                        alphaMap   : map,
                        blending   : 1,
                        transparent: true,                                                    
})

【讨论】：

【解决方案2】：

我知道这是可以做到的。将 jpg 与黑色 bg 透明混合。马丁，alphaMap:map 未定义。这个问题似乎没有答案。

如果我没记错的话，它是 glBlendFunc(GL_SRC_ALPHA, GL_ONE); 我相信 Threejs 没有忽略它。

【讨论】：

黑色 = 100% 不透明 = 不透明。似乎与预期结果相反。