midas
/
threejs-3d-cube


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
							<!DOCTYPE html>
<html lang="en">
<head>
	<title>facing cube with lighting</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<style>
		body {
			margin: 0px;
			background-color: #000000;
			overflow: hidden;
			cursor: none;
		}
	</style>
</head>
<body>

	<script src="./three.js"></script>
	<script src="./WebGL.js"></script>
	<script src="./OBJLoader.js"></script>

	<script>

		var camera, scene, renderer, raycaster, objloader;
		var mouse, plane, intersectPoint, cameraHeight, light, mousePoint, ship, spacePlane;

		if ( WEBGL.isWebGLAvailable() === false ) {
			document.body.appendChild( WEBGL.getWebGLErrorMessage() );
		}

		init();
		animate();

		function init() {


			THREE.Object3D.DefaultUp = new THREE.Vector3(0,0,1);
			raycaster = new THREE.Raycaster();
			mouse = new THREE.Vector2();
			objloader = new THREE.OBJLoader();

			cameraHeight = 100;
			camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
				//camera.up = new THREE.Vector3(0,0,1);
				camera.position.x = 10;
				camera.position.y = -50;
				camera.position.z = cameraHeight;
				camera.updateMatrixWorld();
				camera.lookAt(new THREE.Vector3(100,100,0));
				
				scene = new THREE.Scene();

				plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
				
				intersectPoint = new THREE.Vector3();

				//var texture = new THREE.TextureLoader().load( './greebles.jpg' );
				

				objloader.load(
					'./simple_ship.obj',
					function ( object ) {
						object.scale.multiplyScalar(8);
						object.position = new THREE.Vector3(100, 100, 0);
						mouse.x = 0;
						mouse.y = 0.5;
						ship = object;
						scene.add(ship);
					},
					function ( xhr ) {
						//console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
					},
					function (error) {
						console.error( 'Error loading ship model');
					}
				);

				var geometry = new THREE.BoxBufferGeometry(20, 20, 20);
				var material = new THREE.MeshStandardMaterial({color: "blue"});

				var sphere = new THREE.SphereBufferGeometry( 0.5, 16, 8 );

				mousePoint = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial( { color: "red" } ));

				scene.add(mousePoint);

				light = new THREE.PointLight(0xffffff, 3, 70, 2);
				light.position.set(-10, -20, 30);
				scene.add(light);

				var spaceTexture = new THREE.TextureLoader().load( './darkPurple.png' );
				spaceTexture.wrapS = spaceTexture.wrapT = THREE.RepeatWrapping;
				spaceTexture.repeat.set(8, 8);
				var spaceMaterial = new THREE.MeshBasicMaterial({map: spaceTexture, color: 0x606060 });

				spacePlane = new THREE.Mesh(new THREE.PlaneGeometry(1024, 1024), spaceMaterial);
				spacePlane.position = new THREE.Vector3(0, 0, -50);
				scene.add(spacePlane);

				var skyBoxGeometry = new THREE.CubeGeometry( 1024, 1024, 1024 );
				var skyBoxMaterial = new THREE.MeshBasicMaterial( { map: spaceTexture, color: 0x606060, side: THREE.BackSide } );
				var skyBox = new THREE.Mesh( skyBoxGeometry, skyBoxMaterial );
				scene.add(skyBox);

				scene.fog = new THREE.FogExp2( 0x000000, 0.0012 );

				renderer = new THREE.WebGLRenderer({antialias: true});
				renderer.setPixelRatio(window.devicePixelRatio);
				renderer.setSize(window.innerWidth, window.innerHeight);
				document.body.appendChild(renderer.domElement);

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

			}

			function onWindowResize() {
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

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

			}

			function animate() {

				requestAnimationFrame(animate);

				camera.position.z = cameraHeight;
				if(ship) { camera.lookAt(ship.position); }
				camera.updateMatrixWorld();
				raycaster.setFromCamera(mouse, camera);

				raycaster.ray.intersectPlane(plane, intersectPoint);
				if(ship) { ship.lookAt(intersectPoint); }

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

				if(spacePlane) {
					spacePlane.position.z = 4 * Math.sin((new Date().getTime() / 1000) * 1) - 10;
				}

				renderer.render(scene, camera);

			}

			document.addEventListener("mousemove", function(event) {
				event.preventDefault();
				mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
				mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
			});

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

			document.addEventListener("touchstart", function(event) {
				scaling = false;
				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 = cameraHeight;
				}
			});

			document.addEventListener("touchmove", function(event) {
				if(event.touches.length == 1) {

					mouse.x = (event.touches[0].clientX / window.innerWidth) * 2 - 1;
					mouse.y = -(event.touches[0].clientY / window.innerHeight) * 2 + 1;
				}

				if(scaling && event.touches.length == 2) {
					var newDist = Math.hypot(
						event.touches[0].clientX - pinchCenter.x,
						event.touches[0].clientY - pinchCenter.y
					);
					cameraHeight = origCameraHeight * (origDistance / newDist);
					cameraHeight = Math.max(Math.min(cameraHeight, 250), 30);
				}
			});
			document.addEventListener("touchend", function(event) {
				if(scaling) {
					scaling = false;
				}
			});

			document.addEventListener("wheel", function(event) {
				cameraHeight += (event.deltaY / 10);
				cameraHeight = Math.max(Math.min(cameraHeight, 250), 30);
			});

			function lookAtVector( sourcePoint, destPoint ) {
				return new THREE.Quaternion().setFromRotationMatrix(
					new THREE.Matrix4()
					.lookAt( sourcePoint, destPoint, new THREE.Vector3( 0, 0, -1 ) )
					);

			}

		</script>

	</body>
	</html>