three.js - 通过 Material 上的透明PNG显示背景颜色？

Question

我正在使用 THREE.js 制作案例生成器，基本是我希望能够改变 height/width/length一个盒子，旋转它，并改变盒子的背景颜色。

到目前为止是这样:
http://design365hosting.co.uk/casebuilder3D/

尺寸改变和盒子的拖动一样有效，现在我正在处理背景颜色的变化。

我希望它工作的方式是使用透明 PNG 作为盒子的面，并设置背景颜色，以便此背景颜色通过透明 PNG 显示。

这就是我目前的做法:

var texture = THREE.ImageUtils.loadTexture("images/crate.png");
materials.push(new THREE.MeshBasicMaterial({color:0xFF0000, map: texture}));

如您所见，我将 Material 设置为背景色为红色并覆盖透明的 PNG，问题是，three.js 似乎忽略了背景色而只显示透明的 PNG，这意味着没有颜色显示。

预期的结果应该是一个带有重叠 PNG 的红色框。

希望这是有道理的，有人可以帮忙吗？

Answer 1

三.js MeshBasicMaterial不支持您正在尝试做的事情。在 MeshBasicMaterial , 如果 PNG 是部分透明的，则 Material 将是部分透明的。
您想要的是 Material 保持不透明，而 Material 颜色则显示出来。
您可以通过修改 Material 的着色器来做到这一点:

var material = new THREE.MeshPhongMaterial( {
    color: 0x0080ff,
    map: texture
} );

material.onBeforeCompile = function ( shader ) {

    var custom_map_fragment = THREE.ShaderChunk.map_fragment.replace(

        `diffuseColor *= texelColor;`,

        `diffuseColor = vec4( mix( diffuse, texelColor.rgb, texelColor.a ), opacity );`

    );

    shader.fragmentShader = shader.fragmentShader.replace( '#include <map_fragment>', custom_map_fragment );

};

这是一个 fiddle : https://jsfiddle.net/17jmgn6r/
在 fiddle 中，纹理是透明背景上的一个圆圈。您可以看到 Material 的颜色显示出来。
三.js r.125