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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351
							<!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; }
		</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, camera, fov = 45;
		var mesh, decal;
		var raycaster;
		var line;

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

		var decalDiffuse = THREE.ImageUtils.loadTexture( 'textures/decal/decal-diffuse.png' );
		var decalNormal = THREE.ImageUtils.loadTexture( 'textures/decal/decal-normal.jpg' );

		var decalMaterial = new THREE.MeshPhongMaterial( {
			specular: 0x444444,
			map: decalDiffuse,
			normalMap: decalNormal,
			normalScale: new THREE.Vector2( 1, 1 ),
			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.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( window.innerWidth, window.innerHeight );
			container.appendChild( renderer.domElement );

			scene = 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 );
			controls.minDistance = 50;
			controls.maxDistance = 200;

			var light = new THREE.HemisphereLight( 0xffddcc, 0x111122 );
			light.position.set( 1, 0.75, 0.5 );
			scene.add( light );

			var geometry = new THREE.Geometry();
			geometry.vertices.push( new THREE.Vector3(), new THREE.Vector3() );
			geometry.dynamic = true;

			line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { linewidth: 4 }) );
			scene.add( line );

			loadLeePerrySmith();

			raycaster = new THREE.Raycaster();

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

			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;

				raycaster.setFromCamera( mouse, camera );

				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 material = decalMaterial.clone();
			material.color.setHex( Math.random() * 0xffffff );

			var m = new THREE.Mesh( new THREE.DecalGeometry( mesh, p, r, s, check ), material );
			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.render( scene, camera );

		}

		</script>

	</body>
</html>