From fc9d5bc83e7d39f04dc6589a41550cfa016f1f96 Mon Sep 17 00:00:00 2001
From: alteredq <postfilter@gmail.com>
Date: Tue, 8 Feb 2011 18:23:40 +0100
Subject: [PATCH] Ported voxel painter demo to work with WebGLRenderer.

---
 examples/interactive_voxelpainter_gl.html     | 261 ++++++++++++++++++
 examples/textures/square-outline-textured.png | Bin 0 -> 683 bytes
 examples/textures/square-outline.png          | Bin 0 -> 182 bytes
 3 files changed, 261 insertions(+)
 create mode 100644 examples/interactive_voxelpainter_gl.html
 create mode 100644 examples/textures/square-outline-textured.png
 create mode 100644 examples/textures/square-outline.png
diff --git a/examples/interactive_voxelpainter_gl.html b/examples/interactive_voxelpainter_gl.html
new file mode 100644
index 00000000..3f8aee8f
--- /dev/null
+++ b/examples/interactive_voxelpainter_gl.html
@@ -0,0 +1,261 @@
+<!DOCTYPE HTML>
+<html lang="en">
+	<head>
+		<title>three.js - interactive - voxel painter - webgl</title>
+		<meta charset="utf-8">
+		<style type="text/css">
+			body {
+				font-family: Monospace;
+				background-color: #f0f0f0;
+				margin: 0px;
+				overflow: hidden;
+			}
+		</style>
+	</head>
+	<body>
+
+		<script type="text/javascript" src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
+		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
+
+		<script type="text/javascript" src="js/Stats.js"></script>
+
+		<script type="text/javascript">
+
+			var container, stats;
+			var camera, scene, renderer;
+			var projector, plane, cube;
+			var mouse2D, mouse3D, ray,
+			rollOveredFace, isShiftDown = false,
+			theta = 45, isCtrlDown = false;
+
+			var rollOverMesh, rollOverMaterial, voxelPosition = new THREE.Vector3(), tmpVec = new THREE.Vector3();			
+			var cubeGeo, cubeMaterial;
+			var i, intersector;
+			
+			init();
+			setInterval( loop, 1000 / 60 );
+
+			function init() {
+
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				var info = document.createElement( 'div' );
+				info.style.position = 'absolute';
+				info.style.top = '10px';
+				info.style.width = '100%';
+				info.style.textAlign = 'center';
+				info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - voxel painter - webgl<br /><strong>click</strong>: add voxel, <strong>control + click</strong>: remove voxel, <strong>shift + click</strong>: rotate, <a href="javascript:save();return false;">save .png</a>';
+				container.appendChild( info );
+
+				camera = new THREE.Camera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera.position.y = 800;
+				camera.target.position.y = 200;
+
+				scene = new THREE.Scene();
+
+				// roll-over helpers
+				
+				rollOverGeo = new Cube( 50, 50, 50 );
+				rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5 } );
+				rollOverMesh = new THREE.Mesh( rollOverGeo, rollOverMaterial );
+				scene.addObject( rollOverMesh );
+				
+
+				// cubes
+				
+				cubeGeo = new Cube( 50, 50, 50 );
+				cubeMaterial = new THREE.MeshLambertMaterial( { color: 0x00ff80, opacity: 1, shading: THREE.FlatShading, map: ImageUtils.loadTexture( "textures/square-outline-textured.png" ) } );
+				cubeMaterial.color.setHSV( 0.1, 0.7, 1.0 );
+				// picking
+				
+				projector = new THREE.Projector();
+
+				// grid
+
+				plane = new THREE.Mesh( new Plane( 1000, 1000, 20, 20 ), new THREE.MeshBasicMaterial( { color: 0x555555, wireframe: true } ) );
+				plane.rotation.x = - 90 * Math.PI / 180;
+				scene.addObject( plane );
+
+				mouse2D = new THREE.Vector3( 0, 10000, 0.5 );
+				ray = new THREE.Ray( camera.position, null );
+
+				// Lights
+
+				var ambientLight = new THREE.AmbientLight( 0x606060 );
+				scene.addLight( ambientLight );
+
+				var directionalLight = new THREE.DirectionalLight( 0xffffff );
+				directionalLight.position.x = Math.random() - 0.5;
+				directionalLight.position.y = Math.random() - 0.5;
+				directionalLight.position.z = Math.random() - 0.5;
+				directionalLight.position.normalize();
+				scene.addLight( directionalLight );
+
+				var directionalLight = new THREE.DirectionalLight( 0x808080 );
+				directionalLight.position.x = Math.random() - 0.5;
+				directionalLight.position.y = Math.random() - 0.5;
+				directionalLight.position.z = Math.random() - 0.5;
+				directionalLight.position.normalize();
+				scene.addLight( directionalLight );
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				container.appendChild(renderer.domElement);
+
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				container.appendChild( stats.domElement );
+
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
+				document.addEventListener( 'keydown', onDocumentKeyDown, false );
+				document.addEventListener( 'keyup', onDocumentKeyUp, false );
+
+			}
+
+			function getRealIntersector( intersects ) {
+				
+				for( i = 0; i < intersects.length; i++ ) {
+				
+					intersector = intersects[ i ];
+					
+					if ( intersector.object != rollOverMesh ) {
+						
+						return intersector;
+						
+					}
+				
+				}
+				
+				return null;
+				
+			}
+			
+			function setVoxelPosition( intersector ) {
+				
+				tmpVec.copy( intersector.face.normal );
+				
+				voxelPosition.add( intersector.point, intersector.object.rotationMatrix.multiplyVector3( tmpVec ) );
+					
+				voxelPosition.x = Math.floor( voxelPosition.x / 50 ) * 50 + 25;
+				voxelPosition.y = Math.floor( voxelPosition.y / 50 ) * 50 + 25;
+				voxelPosition.z = Math.floor( voxelPosition.z / 50 ) * 50 + 25;
+
+			}
+			
+			function onDocumentMouseMove( event ) {
+
+				event.preventDefault();
+
+				mouse2D.x = ( event.clientX / window.innerWidth ) * 2 - 1;
+				mouse2D.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
+
+			}
+
+			function onDocumentMouseDown( event ) {
+
+				event.preventDefault();
+
+				var intersects = ray.intersectScene( scene );
+
+				if ( intersects.length > 0 ) {
+
+					intersector = getRealIntersector( intersects );
+					
+					// delete cube
+					
+					if ( isCtrlDown ) {
+						
+						if ( intersector.object != plane ) {
+
+							scene.removeObject( intersector.object );
+							renderer.removeObject( scene, intersector.object );
+
+						}
+
+					// create cube
+					
+					} else {
+
+						intersector = getRealIntersector( intersects );						
+						setVoxelPosition( intersector );
+
+						var voxel = new THREE.Mesh( cubeGeo, cubeMaterial );
+						voxel.position.copy( voxelPosition );
+						
+						scene.addObject( voxel );
+
+					}
+
+				}
+			}
+
+			function onDocumentKeyDown( event ) {
+
+				switch( event.keyCode ) {
+
+					case 16: isShiftDown = true; break;
+					case 17: isCtrlDown = true; break;
+
+				}
+
+			}
+
+			function onDocumentKeyUp( event ) {
+
+				switch( event.keyCode ) {
+
+					case 16: isShiftDown = false; break;
+					case 17: isCtrlDown = false; break;
+
+				}
+			}
+
+			function save() {
+
+				window.open( renderer.domElement.toDataURL('image/png'), 'mywindow' );
+
+			}
+			
+			function loop() {
+
+				if ( isShiftDown ) {
+
+					theta += mouse2D.x * 3;
+
+				}
+
+				mouse3D = projector.unprojectVector( mouse2D.clone(), camera );
+				ray.direction = mouse3D.subSelf( camera.position ).normalize();
+
+				var intersects = ray.intersectScene( scene );
+
+				if ( intersects.length > 0 ) {
+
+					intersector = getRealIntersector( intersects );
+					if ( intersector ) {
+					
+						setVoxelPosition( intersector );					
+						rollOverMesh.position = voxelPosition;
+						
+					}
+					
+				}
+				
+				camera.position.x = 1400 * Math.sin( theta * Math.PI / 360 );
+				camera.position.z = 1400 * Math.cos( theta * Math.PI / 360 );
+
+				renderer.render( scene, camera );
+				stats.update();
+			}
+
+		</script>
+
+	</body>
+</html>
diff --git a/examples/textures/square-outline-textured.png b/examples/textures/square-outline-textured.png
new file mode 100644
index 0000000000000000000000000000000000000000..6cc07519c43462e37d22add35ed4b2cb317c2c9d
GIT binary patch
literal 683
zcmV;c0#yBpP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00001b5ch_0Itp)
z=>Px#32;bRa{vGf6951U69E94oEQKA00(qQO+^RW0tgWfGdJ$I8~^|S8FWQhbVF}#
zZDnqB07G(RVRU6=Aa`kWXdp*PO;A^X4i^9b0vJg|K~y-)rITB3t3VJ$PxBm43?e|J
zNQttoY&RRpUzA`u#vm}S8HW3DWqSeX@77UuRhIx8f0zK^<Ku%QNpQ{qa6X?&k_2ll
z>$=i34P{vp1OdY^FijI(*YW=T{vYu9`N`Yc8?UdgL{UVRWdKamgy(sP2qMBf&#dc8
zS(ZFKJ>3;(tr^FWx~|#p_asTewr$MwjJ1|L&rwRTEDOUh;G9E5?tm=I$g+&KZCTe9
zV+`B2VT{2TLs1l1Ygv{B5n&uheBZwVilQJ*Q>JO+cs!z%B1sa~bwxyO%jff%d7g33
zVT=L51K75WuItcRBO-)hh_#l!?-3E&wxwwrf*|0!KaS%aaFyqI9!ZiQBAiYqj4|wX
zJNmxo>+1^<;qmbir4&&V-2uiJlu|rDKa-{@aU8SX?{BeLYnkVn%jJT#mWPK2JkPs(
zu&yggDdIS0x7!g#5!<$LI2>-KI_KE74d3^1&QX@-9gyca(=<_46(WMxn!2v(x{f%G
z$@83|C<uapFbp}JPH3&~0OuS{(=d)BN-5Gb#rJ)*)@ZGHd3nM2eME%c-(Tvw=KK5m
z4mcbRjN^#47SHpzTrM<CgYWy4Wl5H07-RVP`QdmxvMkFj5f8Y1-u1p~WLj&Sb5vDD
z+qP6y#V`!?eSh=7yLu3YA@e*VB6yy6E0%~bO%r|Jqm&{HL-IVoDUiR``5#EOC%{on
Rgrfie002ovPDHLkV1fq>D_8&k

literal 0
HcmV?d00001

diff --git a/examples/textures/square-outline.png b/examples/textures/square-outline.png
new file mode 100644
index 0000000000000000000000000000000000000000..2e30ab4233775ac8375567893635085606bdc624
GIT binary patch
literal 182
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61SBU+%rFB|jKx9jP7LeL$-D$|I14-?iy0WW
zg+Z8+Vb&Z8pdfpRr>`sfZ6*#uZaIE80Ue-_WQl7;iF1B#Zfaf$gL6@8Vo7R>LV0FM
zhJw4NZ$Nk>pEyvFvZsq<h{pNk1O-6@BLjm!|NqaAxZ2a>v*eb+s>BfHttJzA7<TVu
VmhrkXp%SQ^!PC{xWt~$(69CnTFK_?=

literal 0
HcmV?d00001

