Texture ne tournant pas avec l'objet

Question

J'ai un objet très simple et une texture noyée (en utilisant un shader). Tout fonctionne très bien, sauf lors de la rotation de l'objet, la texture ne tourne pas le long, mais semble rester dans l'espace 2D, créant ainsi l'effet « masque » ci-dessous:

Texture not rotating along the object

Lorsque j'utilise un matériau régulier et attacher la texture, tout fonctionne bien, donc je devine que je fais quelque chose de mal au vertex shader.

je charge le modèle de la façon suivante:

var loader = new THREE.JSONLoader(); 

loader.load("models/cube.json", addModelToScene); 

var texture = THREE.ImageUtils.loadTexture("images/woods.jpg"); 
texture.wrapS = THREE.RepeatWrapping; 
texture.wrapT = THREE.RepeatWrapping; 
texture.repeat.set(1.0, 1.0); 

uniforms = 
    { 
     time: 
     { 
      type: "f", 
      value: 1.0 
     }, 
     texture1: { type: "t", value: THREE.ImageUtils.loadTexture("images/woods.jpg") } 

    }; 

function addModelToScene(geometry, materials) { 
     var material  = new THREE.MeshFaceMaterial(materials); 
     var shaderMaterial = new THREE.ShaderMaterial 
     (
      { 
       vertexShader: $('#vertexshader').text(), 
       fragmentShader: $('#fragmentshader').text(), 
       uniforms:  uniforms 
      } 
    ); 

    model = new THREE.Mesh(geometry, shaderMaterial); 
    model.scale.set(2.5, 2.5, 2.5); 
    scene.add(model); 
} 

Vertex shader:

varying vec2 vUv; 

#ifdef GL_ES 
    precision highp float; 
#endif 

uniform float time; 
uniform sampler2D texture1; 

void main() 
{ 
    vUv = uv; 
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 
} 

shader Fragment:

varying vec2 vUv; 

#ifdef GL_ES 
    precision highp float; 
#endif 

uniform sampler2D texture1; 
uniform float time; 

void main() 
{ 
    vec2 u_resolution = vec2(1700, 1000); 
    vec2 uv   = gl_FragCoord.xy/u_resolution.xy; 
    gl_FragColor  = texture2D(texture1, uv); 
} 

Et enfin je tourne l'objet de la manière suivante:

model.rotation.z += 0.00013; 
model.rotation.z += 0.004; 

Pourquoi la texture n'est-elle pas une avec l'objet, mais reste en position statique? Merci!

Answer 1

C'est parce que vous devez utiliser vUv variable pour répondre à la texture, pas gl_FragCoord.xy:

gl_FragColor = texture2D(texture1, vUv); 

gl_FragColor.xy est ARRIVE pixel (ou, pour être plus précis, ce fragment) les coordonnées sur un écran (c.-à-coordonnées fenêtre) . Ils ne dépendent pas de la rotation (ou des transformations d'ailleurs) de votre objet (ou de l'objet lui-même). Ils dépendent uniquement de l'endroit où le pixel en cours d'ombrage se trouve sur l'écran.