body { margin: 0; }
let scene = new THREE.Scene();
let gui = new dat.GUI();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
const element = renderer.domElement;
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const planegeo = new THREE.PlaneGeometry( 200, 200 );
const grey = new THREE.MeshStandardMaterial( {color: 0xcccccc });
	var material = new THREE.MeshBasicMaterial({
		color: 0xcccccc,
		side: THREE.DoubleSide
	});
const plane = new THREE.Mesh(planegeo, material);
gui.add(plane.rotation, 'x', 0, Math.PI*2);
gui.add(plane.rotation, 'y', 0, Math.PI*2);
gui.add(plane.rotation, 'z', 0, Math.PI*2);
scene.add(plane);
let ninety = Math.PI/2;
let approx = 1.56;
plane.rotation.x = ninety;
plane.updateMatrix();
plane.position.z = 0.01;
camera.position.z = 0;
camera.lookAt(0,0,0);
function animate() {
	requestAnimationFrame( animate );
	renderer.render( scene, camera );
  plane.updateMatrix();
  console.log(camera.position);
  console.log(camera.rotation);
}
animate();
let rotConst = 5;

renderer.domElement.addEventListener('wheel', (e) => {
	camera.position.z += e.deltaY != 0 ? e.deltaY > 0 ? 1 : -1 : 0;
	});
let map = { 
	"d": ()=> {camera.rotation.z +=0.1;
		},
			"a": ()=> {camera.rotation.z -=0.1; 
		},	"s": ()=> {camera.rotation.x -=0.1; 
		},	"w": ()=> {camera.rotation.x +=0.1; 
		}, "p": ()=>{plane.rotation.x = Math.PI/2;}
	};
document.addEventListener('keydown', (e) => {
	if(map[e.key]) {
		map[e.key]();
	}
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/three@0.127.0/build/three.js
  2. https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.js