纹理不随物体旋转答案

【问题标题】：Texture not rotating with the object纹理不随物体旋转
【发布时间】：2019-12-17 22:48:49
【问题描述】：

我有一个非常简单的对象和一个淹没它的纹理（使用着色器）。一切都很好，除了旋转对象时，纹理没有沿着它旋转，而是似乎停留在 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;

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

【问题讨论】：

标签： javascript three.js glsl

【解决方案1】：

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

gl_FragColor = texture2D(texture1, vUv);

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

【讨论】：

谢谢！当我按照您的建议进行操作时，对象会以单一颜色着色（纹理的第一个像素的颜色？）。如果我改变纹理，我会看到它改变颜色，但实际上并没有绘制纹理，只是相同的颜色。关于发生了什么的任何提示？
是的，该对象可能缺少适当的 UV 映射。你如何获得你正在使用的模型？也许您需要检查导出 UV 选项。此外，您也许可以从顶点位置计算 uv，即 vUv = (position.xy - minXY) / (maxXY - minXY), where minXY` 和 maxXY 是模型的“边界”。
谢谢，现在一切都清楚了！我错过了 UV 贴图，我有一个错误的假设，即无论如何它只会在对象上渲染纹理，只是搞砸了。