three.js所：在啓動時

-1

var FrontSide = new materialClass({ color: 0xffffff, map: THREE.ImageUtils.loadTexture('front.jpg') });three.js所：在啓動時

旋轉圖像。當上傳圖片，我想90度立即旋轉。需要做什麼以及如何完成？

請指教。

2017-06-16 MetaVoffka

你到底想幹什麼？旋轉_texture_？旋轉_object_？ _你試過了什麼？請複習['我如何提出一個好問題？']（https://stackoverflow.com/help/how-to-ask）。此外，請包含任何相關代碼，您嘗試過的代碼以及任何錯誤。請參閱：['如何創建一個最小，完整和可驗證的示例']（https://stackoverflow.com/help/mcve）。 – TheJim01

閱讀[此SO回答]（https://stackoverflow.com/a/16747250/4045502）。或者，作爲選項，您可以使用帶有[片段着色器]（https://www.shadertoy.com/view/XlsGWf）的THREE.ShaderMaterial（）來旋轉紋理。 – prisoner849

關於紋理的演講... 給出了一個很好的例子，但我認爲在一行中有一個更簡單的方法，比如：「MakeRotate」或類似的東西 – MetaVoffka

停靠的着色器（從shadertoy到three.js所）：

var vertShader = ` 
    varying vec2 vUv; 
    void main() 
    { 
     vUv = uv; 
     vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); 
     gl_Position = projectionMatrix * mvPosition; 
    } 
`; 

var fragShader = ` 
    uniform float iGlobalTime; 
    uniform sampler2D iChannel0; 
    varying vec2 vUv; 

    void main(){ 
    vec2 uv = vUv; 
    float rot = iGlobalTime; //radians(90); 
    uv-=.5; 

    mat2 m = mat2(cos(rot), -sin(rot), sin(rot), cos(rot)); 
    uv = m * uv; 
    uv+=.5; 
    gl_FragColor = texture2D(iChannel0, uv); 
    } 
`;

和制服它：

var uniforms = { 
    iGlobalTime: { 
    value: 1.0 
    }, 
    iChannel0: { 
    value: new THREE.Texture() 
    } 
};

然後，我們將載入紋理，這樣的：

var textureLoader = new THREE.TextureLoader(); 
textureLoader.setCrossOrigin(""); 
textureLoader.load("https://threejs.org/examples/textures/UV_Grid_Sm.jpg", function(texture){ 
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping; 
    uniforms.iChannel0.value = texture; 
});

聚集在一起：

var planeMat = new THREE.ShaderMaterial({ 
    uniforms: uniforms, 
    vertexShader: vertShader, 
    fragmentShader: fragShader 
}); 
var planeGeom = new THREE.PlaneGeometry(2, 2); 
var plane = new THREE.Mesh(planeGeom, planeMat); 
scene.add(plane);

而且動畫循環將是這樣的：

var clock = new THREE.Clock(); 
var delta = 0; 

render(); 
function render() { 
    requestAnimationFrame(render); 
    delta += clock.getDelta(); 
    uniforms.iGlobalTime.value = delta; 
    renderer.render(scene, camera); 
}

three.js所R85

jsfiddle例如

來源

2017-06-16 16:02:55 prisoner849

three.js所：在啓動時

回答

相關問題