javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370
							<!doctype html>
<html lang="en">
	<head>
		<title>WebGL decals</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 {
				color: #fff;
				font-family:Monospace;
				font-size:13px;
				margin: 0px;
				text-align:center;
				overflow: hidden;
			}
			#info{ position: absolute; width: 100%; padding: 5px; }
			#container canvas{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; bottom: 0;}
		</style>
	</head>
	<body>

		<div id="container"></div>
		<div id="info">
			<strong>Decal Splatter</strong><br />
			Click or tap to shoot.</p>
		</div>

		<script src="../build/three.min.js"></script>
		<script src="js/geometries/DecalGeometry.js"></script>
		<script src="js/controls/OrbitControls.js"></script>
		<script src="js/libs/dat.gui.min.js"></script>

		<script>

		var container = document.getElementById( 'container' );

		var renderer, scene, helperScene, camera, fov = 45;
		var mesh, decal;
		var projector, raycaster;
		var line;
		var spotLight, pointLight, ambientLight;

		var intersection = {
			intersects: false,
			point: new THREE.Vector3(),
			normal: new THREE.Vector3()
		};
		var controls, renderHelpers = false;
		var mouseVector = new THREE.Vector3();
		var mouse = new THREE.Vector2();

		var decalMaterial = new THREE.MeshPhongMaterial( {
			specular: 0xffffff,
			shininess: 10,
			map: THREE.ImageUtils.loadTexture( 'textures/decal/decal-diffuse.png' ),
			normalMap: THREE.ImageUtils.loadTexture( 'textures/decal/decal-normal.jpg' ),
			normalScale: new THREE.Vector2( .15, .15 ),
			shininess: 30,
			transparent: true,
			depthTest: true,
			depthWrite: false,
			polygonOffset: true,
			polygonOffsetFactor: -4,
			wireframe: false
		});
		/*decalMaterial = new THREE.MeshNormalMaterial( {
			transparent: true,
			depthTest: true,
			depthWrite: false,
			polygonOffset: true,
			polygonOffsetFactor: -4,
			shading: THREE.SmoothShading
		});*/
		var decals = [];
		var decalHelper, mouseHelper;
		var p = new THREE.Vector3( 0, 0, 0 );
		var r = new THREE.Vector3( 0, 0, 0 );
		var s = new THREE.Vector3( 10, 10, 10 );
		var up = new THREE.Vector3( 0, 1, 0 );
		var check = new THREE.Vector3( 1, 1, 1 );

		var params = {
			projection: 'normal',
			minScale: 10,
			maxScale: 20,
			rotate: true,
			clear: function() {
				removeDecals();
			}
		};

		window.addEventListener( 'load', init );

		function init() {

			renderer = new THREE.WebGLRenderer( { antialias: true });
			renderer.setSize( window.innerWidth, window.innerHeight );

			container.appendChild( renderer.domElement );
	
			scene = new THREE.Scene();
			helperScene = new THREE.Scene();

			camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1000 );
			camera.position.z = 100;
			camera.target = new THREE.Vector3();
			controls = new THREE.OrbitControls( camera, renderer.domElement );
	
			scene.add( camera );

			ambientLight = new THREE.AmbientLight( 0x111111 );
			scene.add( ambientLight );

			pointLight = new THREE.PointLight( 0xff0000 );
			pointLight.position.z = 10000;
			pointLight.distance = 4000;
			scene.add( pointLight );

			pointLight2 = new THREE.PointLight( 0xff5500 );
			pointLight2.position.z = 1000;
			pointLight2.distance = 2000;
			scene.add( pointLight2 );

			pointLight3 = new THREE.PointLight( 0x0000ff );
			pointLight3.position.x = -1000;
			pointLight3.position.z = 1000;
			pointLight3.distance = 2000;
			scene.add( pointLight3 );

			spotLight = new THREE.SpotLight( 0xaaaaaa );
			spotLight.position.set( 100, 50, 100 );
			scene.add( spotLight );

			line = new THREE.Line( new THREE.Geometry( ), new THREE.LineBasicMaterial( { linewidth: 4 }) );
			line.geometry.vertices.push( new THREE.Vector3( 0, 0, 0 ) );
			line.geometry.vertices.push( new THREE.Vector3( 0, 0, 0 ) );
			scene.add( line );

			loadLeePerrySmith();

			projector = new THREE.Projector();
			raycaster = new THREE.Raycaster();

			mouseHelper = new THREE.Mesh( new THREE.BoxGeometry( 1, 1, 10 ), new THREE.MeshNormalMaterial() );
			scene.add( mouseHelper );
			mouseHelper.visible = false;

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

			var moved = false;

			controls.addEventListener( 'change', function() {

				moved = true;

			} );

			window.addEventListener( 'mousedown', function () {

				moved = false;
	
			}, false );

			window.addEventListener( 'mouseup', function() {

				checkIntersection();
				if( !moved ) shoot();

			} );

			window.addEventListener( 'mousemove', onTouchMove );
			window.addEventListener( 'touchmove', onTouchMove );

			function onTouchMove( event ) {

				if( event.changedTouches ) {
					x = event.changedTouches[ 0 ].pageX;
					y = event.changedTouches[ 0 ].pageY;
				} else {
					x = event.clientX;
					y = event.clientY;
				}
		
				mouse.x = ( x / window.innerWidth ) * 2 - 1;
				mouse.y = - ( y / window.innerHeight ) * 2 + 1;

				checkIntersection();

			}

			function checkIntersection() {

				if( !mesh ) return;
		
				mouseVector.set( mouse.x, mouse.y, 1 );
				projector.unprojectVector( mouseVector, camera );

				raycaster.set( camera.position, mouseVector.sub( camera.position ).normalize() );

				var intersects = raycaster.intersectObjects( [ mesh ] );

				if ( intersects.length > 0 ) {

					var p = intersects[ 0 ].point;
					mouseHelper.position.copy( p );
					intersection.point.copy( p );
					var n = intersects[ 0 ].face.normal.clone();
					n.multiplyScalar( 10 );
					n.add( intersects[ 0 ].point );
					intersection.normal.copy( intersects[ 0 ].face.normal );
					mouseHelper.lookAt( n );

					line.geometry.vertices[ 0 ].copy( intersection.point );
					line.geometry.vertices[ 1 ].copy( n );
					line.geometry.verticesNeedUpdate = true;

					intersection.intersects = true;

				} else {

					intersection.intersects = false;

				}

			}
	
			var gui = new dat.GUI();

			gui.add( params, 'projection', { 'From cam to mesh': 'camera', 'Normal to mesh': 'normal' } );
			gui.add( params, 'minScale', 1, 30 );
			gui.add( params, 'maxScale', 1, 30 );
			gui.add( params, 'rotate' );
			gui.add( params, 'clear' );
			gui.open();

			onWindowResize();
			render();
	
		}

		function loadLeePerrySmith( callback ) {

			var loader = new THREE.JSONLoader();

			loader.load( 'obj/leeperrysmith/LeePerrySmith.js', function( geometry ) {

				geometry.verticesNeedUpdate = true;
				geometry.elementsNeedUpdate = true;
				geometry.morphTargetsNeedUpdate = true;
				geometry.uvsNeedUpdate = true;
				geometry.normalsNeedUpdate = true;
				geometry.colorsNeedUpdate = true;
				geometry.tangentsNeedUpdate = true;

				var material = new THREE.MeshPhongMaterial( {
					map: THREE.ImageUtils.loadTexture( 'obj/leeperrysmith/Map-COL.jpg' ),
					specularMap: THREE.ImageUtils.loadTexture( 'obj/leeperrysmith/Map-SPEC.jpg' ),
					normalMap: THREE.ImageUtils.loadTexture( 'obj/leeperrysmith/Infinite-Level_02_Tangent_SmoothUV.jpg' ),
					shininess: 10
				} );

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

				//scene.add( new THREE.FaceNormalsHelper( mesh, 1 ) );
				//scene.add( new THREE.VertexNormalsHelper( mesh, 1 ) );

			} );

		}

		function shoot() {

			if( params.projection == 'camera' ) {

				var dir = camera.target.clone();
				dir.sub( camera.position );

				p = intersection.point;

				var m = new THREE.Matrix4();
				var c = dir.clone();
				c.negate();
				c.multiplyScalar( 10 );
				c.add( p );
				m.lookAt( p, c, up );
				m = m.extractRotation( m );

				dummy = new THREE.Object3D();
				dummy.rotation.setFromRotationMatrix( m );
				r.set( dummy.rotation.x, dummy.rotation.y, dummy.rotation.z );

			} else {

				p = intersection.point;
				r.copy( mouseHelper.rotation );

			}

			var scale = params.minScale + Math.random() * ( params.maxScale - params.minScale );
			s.set( scale, scale, scale );

			if( params.rotate) r.z = Math.random() * 2 * Math.PI;

			var m = new THREE.Mesh( new THREE.DecalGeometry( mesh, p, r, s, check ), decalMaterial );
			decals.push( m );
			scene.add( m );

		}

		function removeDecals() {

			decals.forEach( function( d ) {
				scene.remove( d );
				d = null;
			} );
			decals = [];

		};

		function mergeDecals() {

			var merge = {};
			decals.forEach(function (decal) {
		
				var uuid = decal.material.uuid;
				var d = merge[uuid] = merge[uuid] || {};
				d.material = d.material || decal.material;
				d.geometry = d.geometry || new THREE.Geometry();
				d.geometry.merge(decal.geometry, decal.matrix);
		
			});

			removeDecals();

			for (var key in merge) {
		
				var d = merge[key];
				var mesh = new THREE.Mesh(d.geometry, d.material);
				scene.add(mesh);
				decals.push(mesh);
	
			}

		}

		function onWindowResize() {

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

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

		}

		function render() {

			requestAnimationFrame( render );
	
			renderer.autoClear = false;
			renderer.render( scene, camera );
			if( renderHelpers ) renderer.render( helperScene, camera );

		}

		</script>

	</body>
</html>