var scene = new THREE.Scene();

​

        var rotX = 0;

        var rotY = 0;

​

        var plane = new THREE.Mesh(

          new THREE.PlaneBufferGeometry(10000, 10000, 10000, 1, 1, 1),

          new THREE.MeshBasicMaterial({color: 0x555555, transparent: true, opacity: 08})

        );

        plane.rotation.x = -90 * Math.PI / 180;

        plane.position.y = -0.01;

        scene.add(plane);

​

        var helper = new THREE.AxisHelper(2);

        var cam = new THREE.AxisHelper(1);

        helper.add(cam);

        scene.add(helper);

​

        cam.translateZ(4);

​

        var light = new THREE.AmbientLight( 0x404040 );

        scene.add( light );

​

        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );

        camera.position.z = 10;

        camera.position.y = 10;

        camera.lookAt(new THREE.Vector3(0, 0, 0));

​

        var renderer = new THREE.WebGLRenderer();

        renderer.setSize(window.innerWidth, window.innerHeight);

        document.body.appendChild( renderer.domElement );

​

        window.addEventListener('keydown', e => {

          if (e.keyCode === 65) {

            rotY -= 4 * (Math.PI / 180);

          }

          if (e.keyCode === 68) {

            rotY += 4 * (Math.PI / 180);

          }

          if (e.keyCode === 87) {

            rotX -= 4 * (Math.PI / 180);

          }

          if (e.keyCode === 83) {

            rotX += 4 * (Math.PI / 180);

          }

        }, false );

​

        function update() {

          requestAnimationFrame(update);

​

          helper.rotation.set(rotX, rotY, 0);

​

          renderer.render( scene, camera );

        }

        update();