通過材質上的透明PNG顯示背景顏色？

我正在製作一個使用THREE.js的箱子製作工具，基本功能是我希望能夠更改箱子的height/width/length，旋轉它並同時更改箱子的背景顏色。通過材質上的透明PNG顯示背景顏色？

這是它迄今： 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的紅框。

希望有道理，任何人都可以幫忙嗎？

來源

2012-09-11 James

Three.js MeshBasicMaterial不支持你正在嘗試做的事情。在MeshBasicMaterial中，如果PNG部分透明，則材料將部分透明。

你想要什麼，是保持不透明的材質，而不是材質顏色。

您可以使用自定義ShaderMaterial來做到這一點。事實上，這很容易。這裏是片段着色器：

uniform vec3 color; 
uniform sampler2D texture; 

varying vec2 vUv; 

void main() { 

    vec4 tColor = texture2D(texture, vUv); 

    gl_FragColor = vec4(mix(color, tColor.rgb, tColor.a), 1.0); 

}

這裏是一個小提琴：http://jsfiddle.net/g5btunz9/

在小提琴，質地是透明背景的圓圈。您可以看到材質的紅色顯示。

three.js r.72

來源

2012-11-25 02:43:21 WestLangley

通過材質上的透明PNG顯示背景顏色？

回答

相關問題