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 が部分的に透明な場合、マテリアルは部分的に透明になります。

あなたが望むのは、マテリアルがopaqueのままで、代わりにマテリアルの色が透けて見えることです。

これは、マテリアルのシェーダーを変更することで実行できます。

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/

フィドルでは、テクスチャは透明な背景の円です。素材の色が透けて見えます。

three.js r.125

于 2012-11-25T02:43:21.383 に答える