Question

我有一个非常简单的对象和一个淹没的纹理（使用着色器）。一切都很好，除了旋转物体时，纹理不会沿着它旋转，但似乎留在2D空间中，在下面创建“蒙版”效果：

当我使用常规材质并附加纹理时，一切正常，所以我猜我在顶点着色器上做错了。

我按以下方式加载模型：

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 );
}

顶点着色器：

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 );
}

片段着色器：

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 );
}

最后我按照以下方式旋转对象：

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

为什么纹理与对象不是一个，而是保持在静态位置？谢谢！

Answer 1

那是因为你应该使用vUv变化来解决纹理，而不是gl_FragCoord.xy：

gl_FragColor = texture2D(texture1, vUv);

gl_FragColor.xy只是屏幕上的像素（或更准确的片段）坐标（即窗口坐标）。它们不依赖于对象（或对象本身）的旋转（或任何变换）。它们仅取决于当前被遮挡的像素在屏幕上的位置。

纹理不随对象旋转

1 个答案: