midas
/
threejs-3d-cube


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
							<!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>

			var camera, scene, renderer, raycaster;
			var mesh, mouse, plane, intersectPoint, cameraHeight, light, mousePoint;

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

			init();
			animate();

			function init() {

				raycaster = new THREE.Raycaster();
				mouse = new THREE.Vector2();

				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
				camera.position.z = 100;
				camera.position.y = -50;

				cameraHeight = 100;

				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' );

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

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

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

				scene.add(mousePoint);

				mesh = new THREE.Mesh(geometry, material);
				scene.add( mesh );

				light = new THREE.PointLight(0xffffff, 5, 50, 1);
				light.position.set(-10, -20, 30);
				//light.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffffff } ) ) );
				scene.add(light);

				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;
				camera.lookAt(mesh.position);
				camera.updateMatrixWorld();
    			raycaster.setFromCamera(mouse, camera);

				raycaster.ray.intersectPlane(plane, intersectPoint);
  				mesh.lookAt(intersectPoint);

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

  				//light.position.z = 30 + Math.sin((new Date().getTime() / 1000)) * 5;

				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), 50);
				}

			});
			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), 50);
			});

		</script>

	</body>
</html>