在我的代码中，three.js`shaderMaterial`看上去很奇怪

Question

我使用three.js shaderMaterial做了一个例子。但是材料看起来很奇怪。当我旋转相机shaderMaterial时，不要移动。

这是我的代码。

var geometry = new THREE.BoxBufferGeometry( 2,2,2 );
            var shaderMat = new THREE.ShaderMaterial({
                uniforms:{
                    resolution:{value: new THREE.Vector2(window.innerWidth,window.innerHeight)}
                },
                vertexShader: document.getElementById( 'vertexShader' ).textContent,
                fragmentShader: document.getElementById( 'fragmentShader' ).textContent
            });
            shaderMat.side = 2;
            mesh = new THREE.Mesh( geometry, shaderMat );
            scene.add( mesh );

和GLSL代码

<script type="x-shader/x-vertex" id="vertexShader">
        varying vec2 vUv;
        void main() {
            vec2 vUv = uv;
            vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
            gl_Position = projectionMatrix * modelViewPosition;
        }
    </script>
    <script type="x-shader/x-fragment" id="fragmentShader" >
        precision mediump float;
        uniform vec2 resolution;
        varying vec2 vUv;
        void main(void) {
            vec2 q = gl_FragCoord.xy / resolution.xy;
            vec2 p = -1.0 + 2.0 * q;

            float v = p.x;
            vec3 col = vec3(0.01 * max(0.0, 1.0), 0.1 * max(0.0, p.x), 0.0) / abs(v * 2.0);
            float op = 0.01/abs(v * 2.0);
            gl_FragColor = vec4(col, op);
        }
    </script>

我不知道我的代码有什么问题。