javascript
/
three.js
spegling av https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368
							<!DOCTYPE html>
<html>
<head>
	<title>three.js webgl - octree raycasting</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;
		}
	</style>

</head>

<body>

	<script type="text/javascript" src="../build/three.js"></script>
	<script type="text/javascript" src="js/Octree.js"></script>
	<script type="text/javascript" src="js/controls/TrackballControls.js"></script>
	<script type="text/javascript" src="js/libs/stats.min.js"></script>
	<script>

		var camera, scene, renderer;

		var controls, stats;

		var tracker;

		var octree;

		var objects = [];
		var objectsSearch = [];
		var totalFaces = 0;

		var simpleMeshCount = 5000;
		var radius = 100;
		var radiusMax = radius * 10;
		var radiusMaxHalf = radiusMax * 0.5;
		var radiusSearch = radius * 0.75;

		var baseColor = 0x333333;
		var foundColor = 0x12C0E3;
		var intersectColor = 0x00D66B;

		var clock = new THREE.Clock();
		var searchDelay = 1;
		var searchInterval = 0;
		var useOctree = true;

		var raycaster = new THREE.Raycaster();
		var mouse = new THREE.Vector2();
		var intersected;

		init();
		animate();

		function init() {

			// standard three scene, camera, renderer

			scene = new THREE.Scene();

			camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, radius * 100 );
			camera.position.z = radius * 10;
			scene.add( camera );

			renderer = new THREE.WebGLRenderer();
			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

			// create octree

			octree = new THREE.Octree( {
				// uncomment below to see the octree (may kill the fps)
				//scene: scene,
				// when undeferred = true, objects are inserted immediately
				// instead of being deferred until next octree.update() call
				// this may decrease performance as it forces a matrix update
				undeferred: false,
				// set the max depth of tree
				depthMax: Infinity,
				// max number of objects before nodes split or merge
				objectsThreshold: 8,
				// percent between 0 and 1 that nodes will overlap each other
				// helps insert objects that lie over more than one node
				overlapPct: 0.15
			} );

			// lights

			var ambient = new THREE.AmbientLight( 0x101010 );
			scene.add( ambient );

			var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
			directionalLight.position.set( 1, 1, 2 ).normalize();
			scene.add( directionalLight );

			// create all objects

			var simpleGeometry = new THREE.BoxGeometry( 1, 1, 1 );

			for ( var i = 0; i < simpleMeshCount - 1; i++ ) {

				totalFaces += simpleGeometry.faces.length;

				var simpleMaterial = new THREE.MeshBasicMaterial();
				simpleMaterial.color.setHex( baseColor );

				modifyOctree( simpleGeometry, simpleMaterial, false, true, true, true );

			}

			// camera controls

			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;

			// info

			var info = document.createElement( 'div' );
			info.style.position = 'absolute';
			info.style.top = '0';
			info.style.width = '100%';
			info.style.textAlign = 'center';
			info.style.padding = '10px';
			info.style.background = '#FFFFFF';
			info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - octree (raycasting performance) - by <a href="http://github.com/collinhover/threeoctree" target="_blank" rel="noopener">collinhover</a>)</small>';
			document.body.appendChild( info );

			// stats

			stats = new Stats();
			document.body.appendChild( stats.dom );

			// bottom container

			var container = document.createElement( 'div' );
			container.style.position = 'absolute';
			container.style.bottom = '0';
			container.style.width = '100%';
			container.style.textAlign = 'center';
			document.body.appendChild( container );

			// tracker

			tracker = document.createElement( 'div' );
			tracker.style.width = '100%';
			tracker.style.padding = '10px';
			tracker.style.background = '#FFFFFF';
			container.appendChild( tracker );

			// octree use toggle

			var toggle = document.createElement( 'div' );
			toggle.style.position = 'absolute';
			toggle.style.bottom = '100%';
			toggle.style.width = '100%';
			toggle.style.padding = '10px';
			toggle.style.background = '#FFFFFF';
			container.appendChild( toggle );

			var checkbox = document.createElement('input');
			checkbox.type = "checkbox";
			checkbox.name = "octreeToggle";
			checkbox.value = "value";
			checkbox.id = "octreeToggle";
			checkbox.checked = true;

			var label = document.createElement('label');
			label.htmlFor = "octreeToggle";
			label.appendChild(document.createTextNode('Use Octree') );

			toggle.appendChild(checkbox);
			toggle.appendChild(label);

			// events

			checkbox.addEventListener( 'click', toggleOctree, false );
			renderer.domElement.addEventListener( 'mousemove', onDocumentMouseMove, false );

			window.addEventListener( 'resize', onWindowResize, false );

		}

		function toggleOctree () {

			useOctree = !useOctree;

		}

		function animate() {

			// note: three.js includes requestAnimationFrame shim

			requestAnimationFrame( animate );

			render();

			stats.update();

		}

		function render() {

			controls.update();

			renderer.render( scene, camera );

			// update octree post render
			// this ensures any objects being added
			// have already had their matrices updated

			octree.update();

		}

		function modifyOctree( geometry, material, useFaces, randomPosition, randomRotation, randomScale ) {

			var mesh;

			if ( geometry ) {

				// create new object

				mesh = new THREE.Mesh( geometry, material );

				// give new object a random position, rotation, and scale

				if ( randomPosition ) {

					mesh.position.set( Math.random() * radiusMax - radiusMaxHalf, Math.random() * radiusMax - radiusMaxHalf, Math.random() * radiusMax - radiusMaxHalf );

				}

				if ( randomRotation ) {

					mesh.rotation.set( Math.random() * 2 * Math.PI, Math.random() * 2 * Math.PI, Math.random() * 2 * Math.PI );

				}

				if ( randomScale ) {

					mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * radius * 0.1 + radius * 0.05;

				}

				// add new object to octree and scene
				// NOTE: octree object insertion is deferred until after the next render cycle

				octree.add( mesh, { useFaces: useFaces } );
				scene.add( mesh );

				// store object

				objects.push( mesh );

				/*

				// octree details to console

				console.log( ' ============================================================================================================');
				console.log( ' OCTREE: ', octree );
				console.log( ' ... depth ', octree.depth, ' vs depth end?', octree.depthEnd() );
				console.log( ' ... num nodes: ', octree.nodeCountEnd() );
				console.log( ' ... total objects: ', octree.objectCountEnd(), ' vs tree objects length: ', octree.objects.length );
				console.log( ' ============================================================================================================');
				console.log( ' ');

				// print full octree structure to console

				octree.toConsole();

				*/

			}

		}

		function onWindowResize() {

			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();

			renderer.setSize( window.innerWidth, window.innerHeight );

		}

		function onDocumentMouseMove( event ) {

			event.preventDefault();

			mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
			mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

			raycaster.setFromCamera( mouse, camera );

			var octreeObjects;
			var numObjects;
			var numFaces = 0;
			var intersections;

			if ( useOctree ) {

				octreeObjects = octree.search( raycaster.ray.origin, raycaster.ray.far, true, raycaster.ray.direction );

				intersections = raycaster.intersectOctreeObjects( octreeObjects );

				numObjects = octreeObjects.length;

				for ( var i = 0, il = numObjects; i < il; i++ ) {

					numFaces += octreeObjects[ i ].faces.length;

				}

			}
			else {

				intersections = raycaster.intersectObjects( objects );
				numObjects = objects.length;
				numFaces = totalFaces;

			}

			if ( intersections.length > 0 ) {

				if ( intersected != intersections[ 0 ].object ) {

					if ( intersected ) intersected.material.color.setHex( baseColor );

					intersected = intersections[ 0 ].object;
					intersected.material.color.setHex( intersectColor );

				}

				document.body.style.cursor = 'pointer';

			}
			else if ( intersected ) {

				intersected.material.color.setHex( baseColor );
				intersected = null;

				document.body.style.cursor = 'auto';

			}

			// update tracker

			tracker.innerHTML = ( useOctree ? 'Octree search' : 'Search without octree' ) + ' using infinite ray from camera found [ ' + numObjects + ' / ' + objects.length + ' ] objects, [ ' + numFaces + ' / ' + totalFaces + ' ] faces, and [ ' + intersections.length + ' ] intersections.';

		}

	</script>

</body>

</html>