midas
/
threejs-obj-space


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333
							<!--<!DOCTYPE html>-->
<html lang="en">

<head>
	<title>threejs obj space</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<style type="text/css">
		html,
		body {
			margin: 0;
			padding: 0;
			background-color: #121212;
		}

		#game {
			width: 100%;
			height: 100%;
			/*margin: 10% auto auto auto;*/
			display: block;
		}
	</style>
</head>

<body>
	<div id="game"></div>
	<script src="./js/three.js-master/build/three.js"></script>
	<script src="./js/three.js-master/examples/js/loaders/OBJLoader.js"></script>
	<script src="./js/three.js-master/examples/js/loaders/MTLLoader.js"></script>
	<script type="text/javascript">
		var scene;
		var plane;
		var spaceCraft;
		var acceleration = { x: 0, y: 0 };
		var velocity = { x: 0, y: 0 };
		var camera;
		var renderer;
		var oscillator = 0;
		var targetObject;
		var spotLight;
		var keys = [];
		var targetCameraHeight = 175;
		var mouse;
		var mouseThrusting = false;

		var shipSpeed = 0.02;
		var shipRotationSpeed = 3;

		var gameContainer = document.getElementById("game");

		window.addEventListener("resize", function (event) {
			gameContainer = document.getElementById("game");
			buildCamera();
			renderer.setSize(gameContainer.clientWidth, gameContainer.clientHeight);
		});

		window.addEventListener("keydown", (event) => {
			keys[event.keyCode] = true;
		});
		window.addEventListener("keyup", (event) => {
			keys[event.keyCode] = false;
		});

		window.addEventListener("mousemove", (event) => {
			mouse.x = event.clientX - (window.innerWidth / 2);
			mouse.y = event.clientY - (window.innerHeight / 2);
		});

		window.addEventListener("wheel", (event) => {
			targetCameraHeight += (event.deltaY / 10);
			targetCameraHeight = Math.max(Math.min(targetCameraHeight, 500), 10);
		});

		var scaling = false;
		var pinchCenter = { x: 0, y: 0 };
		var origDistance = null;
		var origCameraHeight = null;

		window.addEventListener("touchstart", (event) => {
			scaling = false;
			mouseThrusting = false;
			if (event.touches.length == 1) {
				mouseThrusting = true;
				mouse.x = event.touches[0].clientX - (window.innerWidth / 2);
				mouse.y = event.touches[0].clientY - (window.innerHeight / 2);
			} else if (event.touches.length == 2) {
				scaling = true;
				pinchCenter = {
					x: (event.touches[0].clientX + event.touches[1].clientX) / 2,
					y: (event.touches[0].clientY + event.touches[1].clientY) / 2
				};
				origDistance = Math.hypot(
					event.touches[0].clientX - pinchCenter.x,
					event.touches[0].clientY - pinchCenter.y
				);
				origCameraHeight = targetCameraHeight;
			}
		});

		window.addEventListener("touchmove", (event) => {
			mouseThrusting = false;
			if (event.touches.length == 1) {
				mouseThrusting = true;
				mouse.x = event.touches[0].clientX - (window.innerWidth / 2);
				mouse.y = event.touches[0].clientY - (window.innerHeight / 2);
			} else if (event.touches.length == 2) {
				if (scaling) {
					var newDist = Math.hypot(
						event.touches[0].clientX - pinchCenter.x,
						event.touches[0].clientY - pinchCenter.y
					);
					targetCameraHeight = origCameraHeight * (origDistance / newDist);
					targetCameraHeight = Math.max(Math.min(targetCameraHeight, 500), 10);
				}
			}
		});
		window.addEventListener("touchend", (event) => {
			if (scaling) {
				scaling = false;
			}
			mouseThrusting = false;
		});

		window.addEventListener("mousedown", event => {

		});

		window.addEventListener("contextmenu", event => {
			event.preventDefault();
			mouseThrusting = true;
			return false;
		});

		window.addEventListener("mouseup", event => {
			if (event.button == 2) {
				mouseThrusting = false;
			}
		});

		let onProgress = (xhr) => {
			console.log((xhr.loaded / xhr.total * 100) + '% loaded');
		};

		let onError = (error) => {
			console.error("onError", error);
		};

		let buildCamera = () => {
			camera = new THREE.PerspectiveCamera(66, gameContainer.clientWidth / gameContainer.clientHeight, 0.1, 1000);
			targetCameraHeight = 175;
			camera.position.y = targetCameraHeight;
			camera.position.x = 0;
			camera.position.z = 0;
			camera.rotation.y = 90 * (Math.PI / 180);
			camera.up = new THREE.Vector3(0, 1, 0);
			camera.lookAt(new THREE.Vector3(0, 0, 0));

			return camera;
		}

		let addAmbientLight = (scene) => {
			var light = new THREE.AmbientLight(0xffffff);
			light.intensity = 0.6;
			scene.add(light);
		};

		let addSpotLight = (scene) => {
			spotLight = new THREE.SpotLight(0xffffff);
			spotLight.position.set(0, 100, 0);
			//spotLight.shadow.camera.near = 0.0001;

			spotLight.angle = 0.18;
			spotLight.penumbra = 1;
			spotLight.intensity = 0.2;
			//spotLight.castShadow = true;
			scene.add(spotLight);
		};

		let addSpacePlane = (scene) => {
			var texture = new THREE.TextureLoader().load('./assets/Backgrounds/blue.png');
			texture.wrapS = THREE.RepeatWrapping;
			texture.wrapT = THREE.RepeatWrapping;
			texture.side = THREE.SingleSide;
			texture.repeat.set(20, 20);
			var geometry = new THREE.PlaneGeometry(500, 500, 256, 256);

			var material = new THREE.MeshLambertMaterial({ map: texture, color: 0xffffff });

			plane = new THREE.Mesh(geometry, material);
			plane.position.y = -10;
			plane.rotation.x = 270 * (Math.PI / 180);
			//plane.receiveShadow = true;
			scene.add(plane);
		};

		let addSpaceCraft = (scene) => {
			new THREE.MTLLoader().load('./assets/Models/spaceCraft1.mtl', function (materials) {

				materials.preload();

				new THREE.OBJLoader()
					.setMaterials(materials)
					.load('./assets/Models/spaceCraft1.obj', function (object) {

						//object.traverse(function (child) {
						//	child.castShadow = true;
						//	child.receiveShadow = true;
						//});

						spaceCraft = object;
						spaceCraft.up = new THREE.Vector3(0, 0, 1);
						//object.castShadow = true;
						//object.receiveShadow = true;
						// object.rotation.x = 90;
						scene.add(object);

					}, onProgress, onError);

			}, onProgress, onError);
		};

		let animate = () => {
			requestAnimationFrame(animate);

			update();

			renderer.render(scene, camera);
		};

		let update = () => {
			acceleration.x = 0;
			acceleration.y = 0;

			oscillator += 1;
			oscillator %= 360;

			if (spaceCraft) {

				spaceCraft.rotation.y = Math.atan2(-mouse.x, -mouse.y);
				//spaceCraft.rotation.y = mouse.x;

				//float effect
				spaceCraft.position.y = Math.sin(oscillator * Math.PI / 180);
				spaceCraft.rotation.z = Math.cos(oscillator * Math.PI / 180) / 8;

				if (keys[37]) { // left
					spaceCraft.rotation.y += shipRotationSpeed * (Math.PI / 180);
				}
				if ((keys[38] || keys[87]) || mouseThrusting) { // up || w
					acceleration.x = shipSpeed * Math.sin(spaceCraft.rotation.y - (180 * Math.PI / 180));
					acceleration.y = shipSpeed * Math.cos(spaceCraft.rotation.y - (180 * Math.PI / 180));
				}
				if (keys[39]) { // right
					spaceCraft.rotation.y -= shipRotationSpeed * (Math.PI / 180);
				}
				if (keys[40]) { // down
				}

				velocity.x += acceleration.x;
				velocity.y += acceleration.y;

				spaceCraft.position.x += velocity.x;
				spaceCraft.position.z += velocity.y;

				camera.position.x = spaceCraft.position.x;
				camera.position.z = spaceCraft.position.z;
				//targetCameraHeight = Math.floor(75 + (50 * ((Math.abs(velocity.x) + Math.abs(velocity.y)))));


				// if (camera.position.y < targetCameraHeight) {
				// 	camera.position.y += Math.sign(targetCameraHeight);
				// }
				// if (acceleration.x == 0 && this.acceleration.y == 0) { //only zoom back in if the user isn't touching the throttle
				// 	if (camera.position.y > targetCameraHeight) {
				// 		camera.position.y -= Math.sign(targetCameraHeight);
				// 	}
				// }

				camera.position.y = targetCameraHeight;

				spotLight.position.x = camera.position.x;
				spotLight.position.z = camera.position.z;

				targetObject.position.x = spaceCraft.position.x + (5 * Math.cos(oscillator * Math.PI / 180));
				targetObject.position.z = spaceCraft.position.z + (5 * Math.sin(oscillator * Math.PI / 180));
			}

			//raycaster.setFromCamera(mouse, camera);

			// raycaster.ray.intersectPlane(plane, intersectPoint);
			//intersectPoint.x = 10;
			//intersectPoint.z = 10;
			//if (spaceCraft) { spaceCraft.lookAt(intersectPoint); }

			// mousePoint.position.x = intersectPoint.x;
			// mousePoint.position.y = intersectPoint.y;
			// mousePoint.position.z = intersectPoint.z;
		};

		document.addEventListener("DOMContentLoaded", function () {
			scene = new THREE.Scene();
			scene.background = new THREE.Color(0x000000);

			mouse = new THREE.Vector2();

			// intersectPoint = new THREE.Vector3();

			// raycaster = new THREE.Raycaster();

			camera = buildCamera();

			renderer = new THREE.WebGLRenderer();
			renderer.setPixelRatio(window.devicePixelRatio);
			renderer.setSize(gameContainer.clientWidth, gameContainer.clientHeight);

			addAmbientLight(scene);
			addSpacePlane(scene);

			addSpotLight(scene);
			targetObject = new THREE.Object3D();
			scene.add(targetObject);
			spotLight.target = targetObject;

			addSpaceCraft(scene);

			gameContainer.appendChild(renderer.domElement);

			animate();
		});
	</script>
</body>

</html>