Three.js material, textur und Farbe

Ich versucht zu machen, material für ein Auto-Modell mit three.js wo die Grundfarbe von dem Auto-kann dynamisch geändert werden. Dieser war einfach durch ändern der Farbe-Attribut des MeshPhongMaterial, die ich verwende.
Ich brauchte dann zum anwenden einer textur auf der Oberseite und dachte, das wäre einfach genug, indem ein Bild auf die Karte, Attribut des Materials.
Das Ergebnis war nicht was ich erwartet habe, obwohl die Karte/Bild mit der textur war auch schattiert die Farbe festlegen, indem Sie das color-Attribut. Ich will es im Grunde überlagern die Grundfarbe.

Kann jemand mich in die richtige Richtung?

InformationsquelleAutor user1871801 | 2012-12-03

three.js

Hier ist eine komplette script-chunk. Legen Sie sofort nach dem Lesen three.js

<script>
THREE.ShaderChunk.map_fragment = [
    "#ifdef USE_MAP",
        "vec4 texelColor = texture2D( map, vUv ); /* NEWWW */",
        "#ifdef GAMMA_INPUT",
        "texelColor.xyz *= texelColor.xyz;",
        "#endif",
        "gl_FragColor.rgb = mix(gl_FragColor.rgb,texelColor.rgb,texelColor.a);",
        "vec3 surfDiffuse = mix(diffuse,vec3(1,1,1),texelColor.a);",
    "#else",
        "vec3 surfDiffuse = diffuse;",
    "#endif"].join('\n');
//now replace references to 'diffuse' with 'surfDiffuse'
THREE.ShaderChunk.lights_phong_fragment = 
    THREE.ShaderChunk.lights_phong_fragment.replace(/\bdiffuse\b/gm,'surfDiffuse')
THREE.ShaderLib.phong.fragmentShader = [
    "uniform vec3 diffuse;",
    "uniform float opacity;",
    "uniform vec3 ambient;",
    "uniform vec3 emissive;",
    "uniform vec3 specular;",
    "uniform float shininess;",
    THREE.ShaderChunk[ "color_pars_fragment" ],
    THREE.ShaderChunk[ "map_pars_fragment" ],
    THREE.ShaderChunk[ "lightmap_pars_fragment" ],
    THREE.ShaderChunk[ "envmap_pars_fragment" ],
    THREE.ShaderChunk[ "fog_pars_fragment" ],
    THREE.ShaderChunk[ "lights_phong_pars_fragment" ],
    THREE.ShaderChunk[ "shadowmap_pars_fragment" ],
    THREE.ShaderChunk[ "bumpmap_pars_fragment" ],
    THREE.ShaderChunk[ "normalmap_pars_fragment" ],
    THREE.ShaderChunk[ "specularmap_pars_fragment" ],
    "void main() {",
        "gl_FragColor = vec4( vec3 ( 1.0 ), opacity );",
        THREE.ShaderChunk[ "map_fragment" ],
        THREE.ShaderChunk[ "alphatest_fragment" ],
        THREE.ShaderChunk[ "specularmap_fragment" ],
        THREE.ShaderChunk[ "lights_phong_fragment" ],
        THREE.ShaderChunk[ "lightmap_fragment" ],
        THREE.ShaderChunk[ "color_fragment" ],
        THREE.ShaderChunk[ "envmap_fragment" ],
        THREE.ShaderChunk[ "shadowmap_fragment" ],
        THREE.ShaderChunk[ "linear_to_gamma_fragment" ],
        THREE.ShaderChunk[ "fog_fragment" ],
    "}"
].join('\n');
</script>

gelernt, ein wenig über die three.js phong-material -- es nicht handhaben highlights der Art, wie ich möchte, aber... was auch immer. Wenn Sie mehr Raffinesse ich würde vorschlagen, mit ShaderMaterial statt.

Ihr einen champion, dieser funktionierte tadellos.

InformationsquelleAutor bjorke

0

Müssen Sie eine benutzerdefinierte shader für -- und eine textur mit alpha-Kanal (im wesentlichen ein DDS-format). Wenn Sie sich in der three.js Quelle, du wirst sehen, ein bisschen fragment-shader-code, genannt 'map_fragment', die sieht so aus:
```
    "#ifdef USE_MAP",

        "#ifdef GAMMA_INPUT",

            "vec4 texelColor = texture2D( map, vUv );",
            "texelColor.xyz *= texelColor.xyz;",

            "gl_FragColor = gl_FragColor * texelColor;",

        "#else",

            "gl_FragColor = gl_FragColor * texture2D( map, vUv );",

        "#endif",

    "#endif"
```
Wie Sie sehen können es multipliziert Ihre textur-map, indem Sie die Farbe (die zu diesem Punkt ist in "gl_FragColor"). Stattdessen Klang es, wie Sie möchten, dass Ihre map-overlay auf der Oberseite der Grundfarbe, nur waren Sie gemalt habe, Sie (sagen wir, Chrom-Stoßstangen und Scheinwerfer).

Einen einfachen Weg, dies zu tun wäre, um nur die Art und Weise ändern 'phong' arbeiten, bevor Sie instanziieren alle phong-Material, indem Sie den Wert des "map_fragment" string.

Statt "gl_FragColor * (irgendwas)" - versuchen Sie das als eine neu-Zuordnung der DREI.ShaderChunk.map_fragment:
```
 [

    "#ifdef USE_MAP",

        "vec4 texelColor = texture2D( map, vUv );",

        "#ifdef GAMMA_INPUT",

            "texelColor.xyz *= texelColor.xyz;",

        "#endif",

        "gl_FragColor = vec4(mix(gl_FragColor.rgb,texelColor.rgb,texelColor.a),(gl_FragColor.a*texelColor.a));",

    "#endif"

].join('\n');
```
Die Gefahr mit überschreiben des stock-Methode auf diesem Weg ist, dass es auf ALLE Modelle in der Szene -- die gemalte textur als overlay über das material Farbe. Wenn das in Ordnung ist, bist du fertig. Ansonsten sollten Sie eine neue DREI.ShaderMaterial, die wie der "phong", außer für den Unterschied hier zitiert.
- Hi,ich habe versucht, ersetzen die 'map_fragment' mit der version oben, aber ich immer noch das gleiche Ergebnis erhalten (dies ist mit einem .png-textur mit Transparenz). Ich habe auch versucht mit beiden ein .tif-und .dds mit alpha-Kanal aber bekomme einen schwarzen material.
- Ich habe auch versucht gl_FragColor = texelColor nur um es zu testen davon ausgegangen, dass es nur anzeigen, die textur und die Farbe ignorieren, aber das produziert einen Fehler.
- Jede chance ein funktionierendes Beispiel? 🙂
- Ich werde fügen Sie ein Skript chunk als eine zweite Antwort.
InformationsquelleAutor bjorke

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.