2016-05-05 9 views
1

Ich habe einen Tunnel mit einer rotierenden Textur und Alpha-Karte. Ich möchte die Deckkraft, eventuell Tweening, der Alpha-Map ändern.Ändern AlphaMap Opazität wird nicht aktualisiert (THREE.JS R76)

Ich beginne die Deckkraft bei 0 und dann später, um es zu erhöhen. Die Live-Ansicht ändert sich jedoch nicht, während die Opazität-Eigenschaft dies tut. In der Live-Ansicht bleibt es bei voller Deckkraft hängen. Ich habe versucht, die Eigenschaft needsUpdate des Materials auf true zu setzen, aber es hat nichts geändert. Hier

ist die Setup ...

function addTunnel(){ 
var cylTexture = loader.load("wormhole.jpg"), 
    cylAlpha = loader.load("wormholeAlpha2.jpg"); 
    cylTexture.wrapT = THREE.RepeatWrapping; 
    cylTexture.wrapS = THREE.RepeatWrapping; 
    cylAlpha.wrapT = THREE.RepeatWrapping; 
    cylAlpha.wrapS = THREE.RepeatWrapping; 

var cylGeom = new THREE.CylinderGeometry(5000, 5000, 50000, 32, 32, true), 
    cylMat = new THREE.MeshPhongMaterial({ 
     side: THREE.BackSide, 
     map: cylTexture, 
     alphaMap: cylAlpha, 
     transparent: true 
    }), 
    cyl = new THREE.Mesh(cylGeom, cylMat); 

cyl.name = "tunnel"; 
scene.add(cyl); 
scene.getObjectByName("tunnel").position.z= -9000; 
rotateObject(scene.getObjectByName("tunnel"), -90, 0, 0); 
octree.add(scene.getObjectByName("tunnel")); 
tunnel = scene.getObjectByName("tunnel"); 
tunnel.material.alphaMap.opacity = 0; 
} 

Antwort

1

Der PhongMaterial Shader verwendet den Pixelwert des AlphaMap als der Alpha-Wert als HERE in der Quelle gesehen.
Sie können dies nicht zwischenschalten, ohne die aphaMap dynamisch zu generieren oder den Shader zu ändern.
Es klingt für mich, als wäre es wahrscheinlich besser, ein eigenes ShaderMaterial zu erstellen.

HERE ist ein Beispiel für einen Dr.Who Zeit Tunneltyp-Shader, die Transparenz hat (die Hintergrundfarbe ändern Körper)

<script id="tunnelVertexShader" type="x-shader/x-vertex"> 
    varying vec3 vPosition; 
    void main(void) { 
     vPosition = position; 
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); 
    } 
    </script> 

    <script id="tunnelFragmentShader" type="x-shader/x-fragment"> 
    varying vec3 vPosition; 
    uniform vec3 color; 
    uniform vec3 noiseScale; 
    uniform float speed; 
    uniform float time; 
    uniform float intensity; 

    // 
    // Description : Array and textureless GLSL 2D/3D/4D simplex 
    //    noise functions. 
    //  Author : Ian McEwan, Ashima Arts. 
    // Maintainer : ijm 
    //  Lastmod : 20110822 (ijm) 
    //  License : Copyright (C) 2011 Ashima Arts. All rights reserved. 
    //    Distributed under the MIT License. See LICENSE file. 
    //    https://github.com/ashima/webgl-noise 
    // 

    vec4 mod289(vec4 x) { 
     return x - floor(x * (1.0/289.0)) * 289.0; } 

    float mod289(float x) { 
     return x - floor(x * (1.0/289.0)) * 289.0; } 

    vec4 permute(vec4 x) { 
     return mod289(((x*34.0)+1.0)*x); 
    } 

    float permute(float x) { 
     return mod289(((x*34.0)+1.0)*x); 
    } 

    vec4 taylorInvSqrt(vec4 r) 
    { 
     return 1.79284291400159 - 0.85373472095314 * r; 
    } 

    float taylorInvSqrt(float r) 
    { 
     return 1.79284291400159 - 0.85373472095314 * r; 
    } 

    vec4 grad4(float j, vec4 ip) 
     { 
     const vec4 ones = vec4(1.0, 1.0, 1.0, -1.0); 
     vec4 p,s; 

     p.xyz = floor(fract (vec3(j) * ip.xyz) * 7.0) * ip.z - 1.0; 
     p.w = 1.5 - dot(abs(p.xyz), ones.xyz); 
     s = vec4(lessThan(p, vec4(0.0))); 
     p.xyz = p.xyz + (s.xyz*2.0 - 1.0) * s.www; 

     return p; 
     } 

    // (sqrt(5) - 1)/4 = F4, used once below 
    #define F4 0.309016994374947451 

    float snoise(vec4 v) 
     { 
     const vec4 C = vec4(0.138196601125011, // (5 - sqrt(5))/20 G4 
          0.276393202250021, // 2 * G4 
          0.414589803375032, // 3 * G4 
          -0.447213595499958); // -1 + 4 * G4 

    // First corner 
     vec4 i = floor(v + dot(v, vec4(F4))); 
     vec4 x0 = v - i + dot(i, C.xxxx); 

    // Other corners 

    // Rank sorting originally contributed by Bill Licea-Kane, AMD (formerly ATI) 
     vec4 i0; 
     vec3 isX = step(x0.yzw, x0.xxx); 
     vec3 isYZ = step(x0.zww, x0.yyz); 
    // i0.x = dot(isX, vec3(1.0)); 
     i0.x = isX.x + isX.y + isX.z; 
     i0.yzw = 1.0 - isX; 
    // i0.y += dot(isYZ.xy, vec2(1.0)); 
     i0.y += isYZ.x + isYZ.y; 
     i0.zw += 1.0 - isYZ.xy; 
     i0.z += isYZ.z; 
     i0.w += 1.0 - isYZ.z; 

     // i0 now contains the unique values 0,1,2,3 in each channel 
     vec4 i3 = clamp(i0, 0.0, 1.0); 
     vec4 i2 = clamp(i0-1.0, 0.0, 1.0); 
     vec4 i1 = clamp(i0-2.0, 0.0, 1.0); 

     // x0 = x0 - 0.0 + 0.0 * C.xxxx 
     // x1 = x0 - i1 + 1.0 * C.xxxx 
     // x2 = x0 - i2 + 2.0 * C.xxxx 
     // x3 = x0 - i3 + 3.0 * C.xxxx 
     // x4 = x0 - 1.0 + 4.0 * C.xxxx 
     vec4 x1 = x0 - i1 + C.xxxx; 
     vec4 x2 = x0 - i2 + C.yyyy; 
     vec4 x3 = x0 - i3 + C.zzzz; 
     vec4 x4 = x0 + C.wwww; 

    // Permutations 
     i = mod289(i); 
     float j0 = permute(permute(permute(permute(i.w) + i.z) + i.y) + i.x); 
     vec4 j1 = permute(permute(permute(permute (
       i.w + vec4(i1.w, i2.w, i3.w, 1.0)) 
       + i.z + vec4(i1.z, i2.z, i3.z, 1.0)) 
       + i.y + vec4(i1.y, i2.y, i3.y, 1.0)) 
       + i.x + vec4(i1.x, i2.x, i3.x, 1.0)); 

    // Gradients: 7x7x6 points over a cube, mapped onto a 4-cross polytope 
    // 7*7*6 = 294, which is close to the ring size 17*17 = 289. 
     vec4 ip = vec4(1.0/294.0, 1.0/49.0, 1.0/7.0, 0.0) ; 

     vec4 p0 = grad4(j0, ip); 
     vec4 p1 = grad4(j1.x, ip); 
     vec4 p2 = grad4(j1.y, ip); 
     vec4 p3 = grad4(j1.z, ip); 
     vec4 p4 = grad4(j1.w, ip); 

    // Normalise gradients 
     vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3))); 
     p0 *= norm.x; 
     p1 *= norm.y; 
     p2 *= norm.z; 
     p3 *= norm.w; 
     p4 *= taylorInvSqrt(dot(p4,p4)); 

    // Mix contributions from the five corners 
     vec3 m0 = max(0.6 - vec3(dot(x0,x0), dot(x1,x1), dot(x2,x2)), 0.0); 
     vec2 m1 = max(0.6 - vec2(dot(x3,x3), dot(x4,x4)   ), 0.0); 
     m0 = m0 * m0; 
     m1 = m1 * m1; 
     return 49.0 * (dot(m0*m0, vec3(dot(p0, x0), dot(p1, x1), dot(p2, x2))) 
        + dot(m1*m1, vec2(dot(p3, x3), dot(p4, x4)))) ; 

     } 

    float turbulence(vec3 p) { 
     float t = -0.5; 
     for (float f = 1.0 ; f <= 5.0 ; f++){ 
      float power = pow(2.0, f); 
      t += abs(snoise(vec4(power * p, time))); 
     } 
     return t/5.0 * intensity; 
    } 
    void main() { 
     vec3 nPos = vec3(vPosition.x, vPosition.y - (speed * time), vPosition.z); 
     float n = turbulence(nPos/(0.0 - noiseScale)); 
     vec3 finalColor = vec3(color.x * n, color.y * n, color.z * n); 
     float finalAlpha = finalColor.x + finalColor.y + finalColor.z; 
     gl_FragColor = vec4(finalColor, finalAlpha); 
    } 
    </script> 
+0

Oh nein, das ist schreckliche Nachricht für mich. Ich habe gerade angefangen in 3D zu arbeiten ... Shader sind nicht einfach für mich. Ich muss eine Textur für die Alpha-Map verwenden ... zumindest weiß ich, wie es geht. Kann das ShaderMaterial eine Textur verwenden und dann benutze ich eine Uniform, um die Opazität irgendwie zu ändern. Einige Hinweise würden mir wirklich helfen, es zu planen. –

+0

Wenn ich den gesamten PhongMaterial-Shader ändere, würden dann nicht die anderen Objekte, die den Shader benutzen, ihre Deckkraft ändern? –

+0

Ja und ja ..... – 2pha