Ported voxel painter demo to work with WebGLRenderer.

2026-08-09 04:56:01 +10:00 · 2011-02-08 18:23:40 +01:00
parent b3ea0d5fcd
commit fc9d5bc83e
3 changed files with 261 additions and 0 deletions
@@ -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>