shaderTextureRotate_3d

HTML

<head>
	<meta charset="utf-8">
	<script type="x-shader/x-vertex" id="vertexshader">
		varying vec2 vUv;
		void main() {
			vUv = uv;
			gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
		}
	</script>
	<script type="x-shader/x-fragment" id="fragmentshader">

        uniform vec2 u_resolution;  // Canvas size (width,height)
        uniform float u_rotation_x;
        uniform float u_rotation_y;

        mat2 rotate2d(vec2 _angles){
            return mat2(_angles.x,
                        -_angles.x,
                        _angles.y,
                        _angles.y);
        }

        float map(float value, float min1, float max1, float min2, float max2) {
            return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
        }

        void main() {
            vec2 st = gl_FragCoord.xy/u_resolution.xy;
            vec3 color = vec3(1.0,1.0,1.0);
            float gradientLength = 0.2;
            float t = 18.;

            // move matrix in order to set rotation pivot point to center
            st -= vec2(0.5);

            // rotate
            vec2 u_rotation = vec2(u_rotation_x, u_rotation_y);
            st = rotate2d(u_rotation) * st;

            // move matrix back
            st += vec2(0.5);

            // apply gradient pattern
            vec2 p = vec2(floor(gl_FragCoord.x), floor(gl_FragCoord.y));
            float pp = clamp(gl_FragCoord.y,-0.5,st.y);
            float val = mod((pp + t), gradientLength);
            float alpha = map(val, 0.0, gradientLength, 1.0, 0.0);

            
            gl_FragColor = vec4(color,alpha);
        }
    </script>
</head>
<body>
	<div id="threejs_canvas">
		<script src="https://threejs.org/build/three.min.js"></script>
		<script src="perspectiveShaderTest.js"></script>
	</div>
</body>

JavaScript

var TWO_PI = Math.PI * 2;
var PI = Math.PI;

var width = window.innerHeight - 50;
var height = window.innerHeight - 50;
var aspect = width / height;
var canvasCubeSize = width;

var clock = new THREE.Clock();

var camera, scene, renderer;
var wire_cube;
var plane, geom_plane, mat_plane;

function init() {

    // ---------- scene 

    scene = new THREE.Scene();

    // ---------- wire cube 

    var wire_geometry = new THREE.BoxGeometry(canvasCubeSize / 2, canvasCubeSize / 2, canvasCubeSize / 2);
    var wire_material = new THREE.MeshBasicMaterial({
        wireframe: true,
        color: 0xff0000
    });

    wire_cube = new THREE.Mesh(wire_geometry, wire_material);
    scene.add(wire_cube);

    // ---------- plane

    var plane_w = canvasCubeSize / 2;
    var plane_h = plane_w;

    var geom_plane = new THREE.PlaneGeometry(plane_w,
        plane_h,
        0);
    var mat_plane = new THREE.MeshBasicMaterial({
        color: 0xffff00,
        side: THREE.DoubleSide
    });

    var shaderMaterial_plane = new THREE.ShaderMaterial({
        uniforms: {
            u_time: {
                value: 1.0
            },
            u_resolution: {
                value: new THREE.Vector2(canvasCubeSize, canvasCubeSize)
            },
            u_rotation_x: {
                value: wire_cube.rotation.y
            },
            u_rotation_y: {
                value: wire_cube.rotation.y
            }
        },
        vertexShader: document.getElementById('vertexshader').textContent,
        fragmentShader: document.getElementById('fragmentshader').textContent,
        blending: THREE.NormalBlending,
        depthTest: true,
        transparent: true
    });

    plane = new THREE.Mesh(geom_plane, shaderMaterial_plane);
    plane.rotation.x = -PI / 2;
    wire_cube.add(plane);

    // ---------- cam

    camera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, 1, 5000);
    camera.position.set(canvasCubeSize, canvasCubeSize,...