Three.js：启动时旋转图像

Question

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

上传图片时，我想立即旋转90度。需要做什么以及如何做？

请告知。

Answer 1

移植着色器（从shadertoy到three.js）：

OnCompleted

和它的制服：

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

three.js r85

jsfiddle示例