demo/splatter.html

<!doctype html>
<html lang="en">
	<head>
		<title>Decal Splatter</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			*{ box-sizing: border-box; margin: 0; padding: 0 }
			body {
				color: #888;
				font-family: tahoma;
				font-size:13px;
				background-color: #222;
				margin: 0px;
				overflow: hidden;
				text-shadow: 0 1px 0 rgba( 0,0,0,.5 )
			}
			.intro{ position: absolute; left: 10px; top: 10px; line-height: 1.4em }
			a{ color: inherit }
			#container canvas{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; bottom: 0;}
			b{ color: #aaa;}
		</style>
	</head>
	<body>

		<div id="container"></div>
		<div class="intro">
			<p><b>Decal Splatter</b> | Click or tap and drag to rotate, mouse wheel or pinch to zoom, click or tap to shoot paint.</p>
			<p>Find the code here: <b><a href="https://github.com/spite/THREE.DecalGeometry" >THREE.DecalGeometry on GitHub</a></b>.</p>
		</div>

<script src="js/Three.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="../src/THREE.DecalGeometry.js"></script>
<script src="js/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( 'assets/splatter.png' ), 
	normalMap: THREE.ImageUtils.loadTexture( 'assets/wrinkle-normal.jpg' ),
	normalScale: new THREE.Vector2( .15, .15 ),
	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: 30,
	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;
	} );

	controls.addEventListener( 'start', function() {
		moved = false;
	} );

	controls.addEventListener( 'end', 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() {

    	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( 'assets/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( 'assets/Map-COL.jpg' ),
			specularMap: THREE.ImageUtils.loadTexture( 'assets/Map-SPEC.jpg' ),
			normalMap: THREE.ImageUtils.loadTexture( 'assets/Map-NOR.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 dResult = createDecal( 
		mesh, 
		p, 
		r, 
		s,
		check
	);
	decal = new THREE.Mesh( dResult.geometry, decalMaterial );
	scene.add( decal );

	helperScene.add( dResult.helper );
	dResult.helper.visible = false;
	var h = new THREE.BoxHelper( dResult.helper, 0xffffff );
	h.material.linewidth = 2;
	helperScene.add( h );*/

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

	//renderHelpers = true;

	/*line.geometry.vertices[ 0 ].set( p.x, p.y, p.z );
	line.geometry.vertices[ 1 ].set( c.x, c.y, c.z );
	line.geometry.verticesNeedUpdate = true;*/

}

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>