Three.js：画像をアップロードする際、起動

Question

var FrontSide = new materialClass({ color: 0xffffff, map: THREE.ImageUtils.loadTexture('front.jpg') });

で画像を回転させることで、私は90度で、すぐにそれを回転したいです。何をする必要があり、どのようにそれを行うことができますか？

お知らせください。

Answer 1

移植されたシェーダ（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例