Wsrtjtyk

// This is basically everything to setup for a basic THREE.JS field to do our work in

var scene = new THREE.Scene(); // Empty Space

var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000); // Perspective Camera (Args, FOV, Aspect = W/H, Min View Dist, Max View Dist)

//var controls = new THREE.OrbitControls(camera); // We will use this to look around

camera.position.set(0, 2, 5); // Note that depth into positon is mainly the opposite of where you normally want it to be.

camera.rotation.x = -0.3 // This is an attempt to rotate the angle of the camera off of an axis

var renderer = new THREE.WebGLRenderer({antialias: true}); // Our Renderer + Antialiasing

renderer.shadowMap.enabled = true; // This allows shadows to work in our 3D animation

renderer.shadowMap.type = THREE.PCFSoftShadowMap; // This one isn't as blocky as THREE.PCFShadowMap

renderer.setClearColor("#00CCCC"); // Note: same as 0x000000

renderer.setSize(window.innerWidth, window.innerHeight); // Renderer Dimensions

document.getElementById("container").appendChild(renderer.domElement); // Add our renderer creation to our div named "container"

// Lighting (It's not necessary but it looks cool!)

var light = new THREE.PointLight("#FFFFFF", 5, 1000); // Color, intensity, range(lighting will not exceed render distance)

light.castShadow = true;

light.position.set(5, 5, 0); // This will treat the light coming from an angle!

scene.add(light);

light.shadow.mapSize.width = 512;

light.shadow.mapSize.height = 512;

light.shadow.camera.near = 0.5;

light.shadow.camera.far = 500;

// We will make a cube here

var cubeGeo = new THREE.BoxGeometry(1, 1, 1); // This is the shape, width, height and length of our cube. Note BoxGeometry IS the current shape!

var cubeMat = new THREE.MeshStandardMaterial({color: "#FF0000"}); // Create a basic mesh with undefined color, you can also use a singular color using Basic rather than Normal, There is also Lambert and Phong. Lambert is more of a Matte material while Phong is more of a gloss or shine effect.

var cube = new THREE.Mesh(cubeGeo, cubeMat); // Create the object with defined dimensions and colors!

cube.castShadow = true; // This will allow our cube to cast a shadow outward.

cube.recieveShadow = false // This will make our cube not recieve shadows from other objects (Although it isn't needed because it's default, you show make a habit of writing it anyways as some things default to true!)

scene.add(cube); // scene.add(object) is what we will use for almost every object we create in THREE.JS

//cube.add(camera); // This is an attempt to attach the camera to the cube...

// Loader

var ship;

var loader = new THREE.GLTFLoader();

loader.load("http://ipaddress:port/files/models/raven/scene.gltf", function(gltf) {

	scene.add(gltf.scene);

	ship = gltf.scene;

	ship.scale.multiplyScalar(0.005);

	ship.rotation.y = Math.PI;

}, undefined, function(error) {

	console.error(error);

});

// Lest make a floor to show the shadow!

var floorGeo = new THREE.BoxGeometry(1000, 0.1, 1000);

var floorMat = new THREE.MeshStandardMaterial({color: "#0000FF"});

var floor = new THREE.Mesh(floorGeo, floorMat);

floor.recieveShadow = true; // This will allow the shadow from the cube to portray itself unto it.

floor.position.set(0, -3, 0);

scene.add(floor);

// Now let's create an object on the floor so that we can distance ourself from our starting point.

var buildingGeo = new THREE.BoxGeometry(10, 100, 10);

var buildingMat = new THREE.MeshNormalMaterial();

var building = new THREE.Mesh(buildingGeo, buildingMat);

building.position.z = -100;

scene.add(building);

var rotation = 0;

// Controls

var keyState = {};



window.addEventListener('keydown',function(e){

    keyState[e.keyCode || e.which] = true;

},true);



window.addEventListener('keyup',function(e){

    keyState[e.keyCode || e.which] = false;

},true);

document.addEventListener("keydown", function(event) {

  console.log(event.which);

});

var camAdded = false;

var render = function() {

	requestAnimationFrame(render); // This grabs the browsers frame animation function.

	if (rotation == 1) {

		ship.rotation.x += 0.01; // rotation is treated similarly to how two dimensional objects' location is treated

		ship.rotation.y += 0.01; // however it will be based on an axis point plus the width/height and subtract but keep it's indice location!

		ship.rotation.z += 0.01;

	}

	if (keyState[87]) { // Up

		ship.rotateX(0.01);

	}

	if (keyState[83]) { // Down

		ship.rotateX(-0.01);

	}

	if (keyState[65]) { // Left

		ship.rotateY(0.03);

	}

	if (keyState[68]) { // Right

		ship.rotateY(-0.03);

	}

	if (keyState[81]) {

		ship.rotateZ(0.1);

	}

	if (keyState[69]) {

		ship.rotateZ(-0.1);

	}

	if (keyState[82]) { // Reset

		for (var i = 0; i < 10; i++) {

			if (!ship.rotation.x == 0) {

				if (ship.rotation.x > 0) {

					ship.rotation.x -= 0.005;

				} else if (ship.rotation.x < 0){

					ship.rotation.x += 0.005;

				}

			}

			if (!ship.rotation.z == 0) {

				if (ship.rotation.z > 0) {

					ship.rotation.z -= 0.01;

				} else if (ship.rotation.z < 0){

					ship.rotation.z += 0.01;

				}

			}

		}

	}

	ship.translateZ(0.2); // This will translate our ship forward in the direction it's currently facing so that it will look as if it is flyimg.

	renderer.render(scene, camera); // This will render the scene after the effects have changed (rotation!)

	window.addEventListener('resize', onWindowResize, false);

}

render(); // Finally, we need to loop the animation otherwise our object will not move on it's own!

function onWindowResize() {

	var sceneWidth = window.innerWidth - 20;

	var sceneHeight = window.innerHeight - 20;

	renderer.setSize(sceneWidth, sceneHeight);

	camera.aspect = sceneWidth / sceneHeight;

	camera.updateProjectionMatrix();

}

<!DOCTYPE htm>

<html>

	<head>

		<meta charset="utf-8">

		<title>Basic Three.JS</title>

	</head>

	<body style="background-color: #2B2B29; color: #FFFFFF; text-align: center;">

		<div id="container"></div>

		<script>

			window.onload = function() {

				document.getElementById("container").width = window.innerWidth - 20;

				document.getElementById("container").height = window.innerHeight - 20;

			}

		</script>

		<script src="http://ipaddress:port/files/scripts/three.min.js"></script>

		<script src="http://ipaddress:port/files/scripts/GLTFLoader.js"></script>

		<script src="http://ipaddress:port/files/scripts/OrbitControls.js"></script>

		<script src="http://ipaddress:port/files/scripts/basicthree.js"></script> <!-- This is the code below -->

	</body>

</html>

if (typeof ship != "undefined") {

  // Previous code inside of the main three.js loop...

  ship.translateZ(0.2); // Move ship

  camera.position.set(ship.position.x, ship.position.y, ship.position.z); // Set the camera's position to the ships position

  camera.translateZ(10); // Push the camera back a bit so it's not inside the ship

  camera.rotation.set(ship.rotation.x, ship.rotation.y, ship.rotation.z); // Set the rotation of the ship to be the exact same as the ship

  camera.rotateX(0.3); // Tilt the camera downwards so that it's viewing over the ship

  camera.rotateY(Math.PI); // Flip the camera so it's not facing the head of the ship model.



  // Note: many bits of code I have are inverted due to the ship's model being backwards (or so it seems)...

}