8

我正在使用 制作案例构建器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}));

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

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

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

4

1 回答 1

17

Three.jsMeshBasicMaterial不支持您尝试执行的操作。在MeshBasicMaterial中，如果 PNG 是部分透明的，则材质将是部分透明的。

您想要的是保持不透明的材料，以及要显示的材料颜色。

您可以通过修改材质的着色器来做到这一点：

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 );

};

这是一个小提琴：https ://jsfiddle.net/17jmgn6r/

在小提琴中，纹理是透明背景上的圆圈。您可以看到材料的颜色显示出来。

三.js r.125

于 2012-11-25T02:43:21.383 回答