紋理不隨對象旋轉

我有一個非常簡單的對象和紋理淹沒（使用着色器）。一切都很正常，旋轉的物體時，紋理不沿着它旋轉除，但似乎停留在二維空間，創建下面的「面具」的效果：紋理不隨對象旋轉

當我使用常規材料並附加紋理，所有工作正常，所以我猜我在頂點着色器做錯了什麼。

我加載模型方式如下：

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;

爲什麼紋理不是與物體一致，而是保持在靜態位置？謝謝！

來源

2017-05-26 user7841697

那是因爲你應該使用vUv不同，解決的質感，不gl_FragCoord.xy：

gl_FragColor = texture2D(texture1, vUv);

gl_FragColor.xy只是像素的（或者，更準確，片段的）一個屏幕上的座標（即窗口座標）。它們不依賴於對象（或對象本身）的旋轉（或任何轉換）。它們僅取決於當前正在着色的像素在屏幕上的位置。

來源

2017-05-26 10:26:44

謝謝！當我按照你的建議進行操作時，對象會以單一顏色（紋理的第一個像素的顏色？）着色。如果我改變紋理，我會看到它改變顏色，但實際上並沒有繪製紋理，只是顏色相同。關於發生了什麼的任何提示？ – user7841697

是的，該物體可能缺乏適當的UV貼圖。你如何獲得你使用的模型？也許你需要檢查導出UV選項。另外，你可能能夠從頂點位置計算'uv'，即'vUv =（position.xy - minXY）/（maxXY - minXY），其中'minXY'和'maxXY'是你的模型的「邊界」。 –

謝謝，現在都清楚！我錯過了紫外線貼圖，我錯誤地認爲它只是渲染物體上的紋理，只是搞砸了。 – user7841697

紋理不隨對象旋轉

回答

相關問題