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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - interactive cubes (gpu)</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 {
				font-family: Monospace;
				background-color: #f0f0f0;
				margin: 0px;
				overflow: hidden;
			}

			.info {
				position: absolute;
				background-color: black;
				opacity: 0.8;
				color: white;
				text-align: center;
				top: 0px;
				width: 100%;
			}

			.info a {
				color: #00ffff;
			}
		</style>
	</head>
	<body>

		<div class="info">
			<a href="http://threejs.org" target="_blank">three.js</a> webgl - gpu picking
		</div>

		<div id="container"></div>

		<script src="../build/three.min.js"></script>

		<script src="js/controls/TrackballControls.js"></script>

		<script src="js/libs/stats.min.js"></script>

		<script>

			var container, stats;
			var camera, controls, scene, renderer;
			var pickingData = [], pickingTexture, pickingScene;
			var objects = [];
			var highlightBox;

			var mouse = new THREE.Vector2();
			var offset = new THREE.Vector3(10, 10, 10);

			init();
			animate();

			function init() {

				container = document.getElementById("container");

				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
				camera.position.z = 1000;

				controls = new THREE.TrackballControls( camera );
				controls.rotateSpeed = 1.0;
				controls.zoomSpeed = 1.2;
				controls.panSpeed = 0.8;
				controls.noZoom = false;
				controls.noPan = false;
				controls.staticMoving = true;
				controls.dynamicDampingFactor = 0.3;

				scene = new THREE.Scene();
				pickingScene = new THREE.Scene();
				pickingTexture = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight);
				pickingTexture.generateMipmaps = false;

				scene.add( new THREE.AmbientLight( 0x555555 ) );

				var light = new THREE.SpotLight( 0xffffff, 1.5 );

				light.position.set( 0, 500, 2000 );
				light.castShadow = true;

				light.shadowCameraNear = 200;
				light.shadowCameraFar = camera.far;
				light.shadowCameraFov = 50;

				light.shadowBias = -0.00022;
				light.shadowDarkness = 0.5;

				light.shadowMapWidth = 1024;
				light.shadowMapHeight = 1024;

				scene.add( light );

				var geometry = new THREE.Geometry(),
					pickingGeometry = new THREE.Geometry(),
					pickingMaterial = new THREE.MeshBasicMaterial({
						vertexColors: THREE.VertexColors
					}),
					defaultMaterial = new THREE.MeshLambertMaterial({
						color: 0xffffff,
						shading: THREE.FlatShading,
						vertexColors: THREE.VertexColors
					});

				function applyVertexColors(g, c) {
					g.faces.forEach(function(f){
						var n = (f instanceof THREE.Face3) ? 3 : 4;
						for(var j=0; j<n; j++){
							f.vertexColors[j] = c;
						}
					});
				}
				
				for ( var i = 0; i < 5000; i ++ ) {
					var position = new THREE.Vector3();
					position.x = Math.random() * 10000 - 5000;
					position.y = Math.random() * 6000 - 3000;
					position.z = Math.random() * 8000 - 4000;

					var rotation = new THREE.Vector3();
					rotation.x = ( Math.random() * 2 * Math.PI);
					rotation.y = ( Math.random() * 2 * Math.PI);
					rotation.z = ( Math.random() * 2 * Math.PI);

					var scale = new THREE.Vector3();
					scale.x = Math.random() * 200 + 100;
					scale.y = Math.random() * 200 + 100;
					scale.z = Math.random() * 200 + 100;
					
					//give the geom's vertices a random color, to be displayed
					var geom = new THREE.CubeGeometry(1, 1, 1);
					var color = new THREE.Color(Math.random() * 0xffffff);
					applyVertexColors(geom, color);
					var cube = new THREE.Mesh(geom);
					cube.position.copy(position);
					cube.rotation.copy(rotation);
					cube.scale.copy(scale);
					THREE.GeometryUtils.merge(geometry, cube);

					//give the pickingGeom's vertices a color corresponding to the "id"
					var pickingGeom = new THREE.CubeGeometry(1, 1, 1);
					var pickingColor = new THREE.Color(i);
					applyVertexColors(pickingGeom, pickingColor);
					var pickingCube = new THREE.Mesh(pickingGeom);
					pickingCube.position.copy(position);
					pickingCube.rotation.copy(rotation);
					pickingCube.scale.copy(scale);
					THREE.GeometryUtils.merge(pickingGeometry, pickingCube);

					pickingData[i] = {
						position: position,
						rotation: rotation,
						scale: scale
					};
				}
				var drawnObject = new THREE.Mesh(geometry, defaultMaterial);
					//drawnObject.castShadow = true;
					//drawnObject.receiveShadow = true;
					scene.add(drawnObject);
					
				pickingScene.add(new THREE.Mesh(pickingGeometry, pickingMaterial));

				highlightBox = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1), new THREE.MeshLambertMaterial({color: 0xffff00}));
				scene.add(highlightBox);
				
				projector = new THREE.Projector();

				renderer = new THREE.WebGLRenderer( { antialias: true, clearColor: 0xffffff } );
				renderer.sortObjects = false;
				renderer.setSize( window.innerWidth, window.innerHeight );

				renderer.shadowMapEnabled = true;
				renderer.shadowMapSoft = true;

				container.appendChild( renderer.domElement );
				
				stats = new Stats();
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.top = '0px';
				container.appendChild( stats.domElement );
				
				renderer.domElement.addEventListener('mousemove', onMouseMove);
			}
			//

			function onMouseMove(e) {
				mouse.x = e.clientX;
				mouse.y = e.clientY;
			}
			
			function animate() {

				requestAnimationFrame( animate );

				render();
				stats.update();

			}

			function pick() {
				//render the picking scene off-screen
				var gl = self.renderer.getContext();
				renderer.render(pickingScene, camera, pickingTexture);
				var pixelBuffer = new Uint8Array(4);
				
				//read the pixel under the mouse from the texture
				gl.readPixels(mouse.x, pickingTexture.height - mouse.y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixelBuffer);
				
				//interpret the pixel as an ID
				var id = (pixelBuffer[0] << 16) | (pixelBuffer[1] << 8) | (pixelBuffer[2]);
				var data = pickingData[id];
				if(data){
					//move our highlightBox so that it surrounds the picked object
					if(data.position && data.rotation && data.scale){
						highlightBox.position.copy(data.position);
						highlightBox.rotation.copy(data.rotation);
						highlightBox.scale.copy(data.scale).addSelf(offset);
						highlightBox.visible = true;
					}
				} else {
					highlightBox.visible = false;
				}
			}
			
			function render() {

				controls.update();

				pick();

				renderer.render( scene, camera );

			}

		</script>

	</body>
</html>