首頁 探索 說明
登入
javascript
/
three.js
镜像来自 https://github.com/tazdij/three.js.git
2
0
複刻 0
Files 問題管理 0 Wiki
瀏覽代碼

Clean up.

Mr.doob 8 年之前
父節點
9b365be73b
當前提交
d68323edd8
共有 4 個文件被更改，包括 49 次插入 和 431 次删除
統一視圖 顯示文件統計
  1. 0 1
      examples/files.js
  2. 1 1
      examples/index.html
  3. 0 383
      examples/webgl_lights_arealight.html
  4. 48 46
      examples/webgl_physics_convex_break.html

+ 0 - 1
examples/files.js
查看文件 

@@ -67,7 +67,6 @@ var files = {
 
 		"webgl_lights_pointlights2",
 
 		"webgl_lights_pointlights2",
 
 		"webgl_lights_spotlight",
 
 		"webgl_lights_spotlight",
 
 		"webgl_lights_spotlights",
 
 		"webgl_lights_spotlights",
 
-		"webgl_lights_arealight",
 
 		"webgl_lights_rectarealight",
 
 		"webgl_lights_rectarealight",
 
 		"webgl_lines_colors",
 
 		"webgl_lines_colors",
 
 		"webgl_lines_cubes",
 
 		"webgl_lines_cubes",

+ 1 - 1
examples/index.html
查看文件 

@@ -473,7 +473,7 @@
 
 		}
 
 		}
 
 
 
 		filterInput.value = extractQuery();
 
 		filterInput.value = extractQuery();
 
-		updateFilter( )
 
+		updateFilter();
 
 
 
 		</script>
 
 		</script>

+ 0 - 383
examples/webgl_lights_arealight.html
查看文件 

@@ -1,383 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js webgl - lights - rect light</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 {
 
-				background-color: #000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				color: #ffffff;
 
-				padding: 5px;
 
-				font-family: Monospace;
 
-				font-size: 13px;
 
-				text-align: center;
 
-			}
 
-
 
-			a {
 
-				color: #ff0080;
 
-				text-decoration: none;
 
-			}
 
-
 
-			a:hover {
 
-				color: #0080ff;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<div id="container"></div>
 
-		<div id="info">
 
-			<a href="http://threejs.org" target="_blank">three.js</a> - Just to show the rect light and it's edge - by <a href="http://github.com/abelnation" target="_blank">abelnation</a><br />
 
-			Click and drag to move OrbitControls, center across the edge of the shadow.<br />
 
-			Click to set random color CTRL-Click for White.<br />
 
-		</div>
 
-
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/lights/RectAreaLightUniformsLib.js"></script>
 
-		<script src="../examples/js/libs/dat.gui.min.js"></script>
 
-		<script src="../examples/js/controls/OrbitControls.js"></script>
 
-		<script src="js/Detector.js"></script>
 
-
 
-		<script>
 
-
 
-			var container = document.getElementById( 'container' );
 
-
 
-			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-
 
-			var rnd = new THREE.WebGLRenderer();
 
-			var cam = new THREE.PerspectiveCamera( 34, window.innerWidth / window.innerHeight, 0.1, 20000 );
 
-			var orb = new THREE.OrbitControls( cam, rnd.domElement );
 
-
 
-			var scn = new THREE.Scene();
 
-
 
-			var matParams = {
 
-				specular: 0xFFFFFF,
 
-				shininess: 10000
 
-			};
 
-
 
-			var matFloor = new THREE.MeshPhongMaterial( matParams );
 
-			var matBox = new THREE.MeshPhongMaterial( matParams );
 
-			var geoFloor = new THREE.BoxGeometry( 2000, 0.1, 2000 );
 
-			var geoBox = new THREE.BoxGeometry( Math.PI, Math.sqrt( 2 ), Math.E );
 
-			var mshFloor = new THREE.Mesh( geoFloor, matFloor );
 
-			var mshBox = new THREE.Mesh( geoBox, matBox );
 
-
 
-			var amb = new THREE.AmbientLight( 0x080808 );
 
-
 
-			// TODO (abelnation): temp point light for debugging
 
-			var dir = new THREE.DirectionalLight( 0xFFFFFF );
 
-			var dirHelper = new THREE.DirectionalLightHelper( dir );
 
-
 
-			var shapes, shapeNames;
 
-			var rectLight;
 
-			var rectLightHelper;
 
-
 
-			var ray = new THREE.Raycaster();
 
-			var mouseDown = new THREE.Vector2();
 
-			var mouse = new THREE.Vector2();
 
-
 
-			var gui, guiElements;
 
-			var param = {};
 
-
 
-			function init() {
 
-
 
-				var gl = rnd.context;
 
-
 
-				// Check for float-RT support
 
-				// TODO (abelnation): figure out fall-back for float textures
 
-				if (!gl.getExtension("OES_texture_float")) {
 
-					alert("OES_texture_float not supported");
 
-					throw "missing webgl extension";
 
-				}
 
-
 
-				if (!gl.getExtension("OES_texture_float_linear")) {
 
-					alert("OES_texture_float_linear not supported");
 
-					throw "missing webgl extension";
 
-				}
 
-
 
-				rnd.shadowMap.enabled = true;
 
-				rnd.shadowMap.type = THREE.PCFSoftShadowMap;
 
-				rnd.gammaInput = true;
 
-				rnd.gammaOutput = true;
 
-				rnd.antialias = true;
 
-				rnd.domElement.addEventListener( 'mousedown', onDocumentClick );
 
-				rnd.domElement.addEventListener( 'mouseup', onDocumentClick );
 
-
 
-				// cam.position.set( 0, 100, 0 );
 
-				cam.position.set( 45, 20, 45 );
 
-
 
-				// shapes = {
 
-				// 	square: THREE.Polygon.makeSquare( 10.0 ),
 
-				// 	rectangle: THREE.Polygon.makeRectangle( 10.0, 5.0 ),
 
-				// 	circle: THREE.Polygon.makeCircle( 5.0, 20 ),
 
-				// 	star: THREE.Polygon.makeStar( 5, 5.0, 2.5 ),
 
-				// 	triangle: new THREE.Polygon( [
 
-				// 		new THREE.Vector3( -5.0, -5.0, 0 ),
 
-				// 		new THREE.Vector3(  0.0,  5.0, 0 ),
 
-				// 		new THREE.Vector3(  5.0, -5.0, 0 ),
 
-				// 	] )
 
-				// };
 
-				// shapeNames = Object.keys( shapes );
 
-
 
-				rectLight = new THREE.RectAreaLight( 0xFFFFFF, undefined, 2, 10 );
 
-				rectLight.matrixAutoUpdate = true;
 
-				rectLight.intensity = 70.0;
 
-				rectLight.position.set( 5, 5, 0 );
 
-				// rectLight.target = mshBox;
 
-				rectLightHelper = new THREE.RectAreaLightHelper( rectLight );
 
-				rectLight.add( rectLightHelper );
 
-
 
-				// TODO (abelnation): rect light shadow
 
-
 
-				matFloor.color.set( 0x808080 );
 
-				randomColor( matBox );
 
-
 
-				mshFloor.receiveShadow = true;
 
-				mshFloor.position.set( 0, 0, 0 );
 
-
 
-				mshBox.castShadow = true;
 
-				mshBox.receiveShadow = true;
 
-				mshBox.position.set( 0, 5, 0 );
 
-
 
-				scn.add( cam );
 
-
 
-				scn.add( mshFloor );
 
-				scn.add( mshBox );
 
-
 
-				// scn.add( amb );
 
-
 
-				// scn.add( dir );
 
-				// scn.add( dirHelper );
 
-
 
-				scn.add( rectLight );
 
-				// scn.add( rectLightHelper );
 
-
 
-				// scn.add( new THREE.AxisHelper( 10 ) );
 
-
 
-				document.body.appendChild( rnd.domElement );
 
-				onResize();
 
-				window.addEventListener( 'resize', onResize, false );
 
-
 
-				orb.addEventListener( 'change', render );
 
-				orb.update();
 
-
 
-			}
 
-
 
-			function onResize() {
 
-
 
-				rnd.setSize( window.innerWidth, window.innerHeight );
 
-				cam.aspect = ( window.innerWidth / window.innerHeight );
 
-				cam.updateProjectionMatrix();
 
-				orb.target = mshBox.position;
 
-
 
-			}
 
-
 
-			function tick() {
 
-
 
-				update();
 
-				render();
 
-
 
-				requestAnimationFrame( tick );
 
-
 
-			}
 
-
 
-			function update() {
 
-
 
-				var dt = 6000;
 
-				var qdt = dt / 4.0;
 
-				var dirSigns = [
 
-					[ 1,  1 ],
 
-					[ - 1,  1 ],
 
-					[ - 1,  1 ],
 
-					[ 1,  1 ]
 
-				];
 
-				var t = ( Date.now() / 1000 );
 
-
 
-				// move light in circle around center
 
-				// change light height with sine curve
 
-
 
-				var r = 10.0;
 
-
 
-				var lx = r * Math.cos( t );
 
-				var lz = r * Math.sin( t );
 
-
 
-				var ly = 5.0 + 5.0 * Math.sin( t / 3.0 );
 
-				// var ly = 7.0;
 
-
 
-				rectLight.position.set( lx, ly, lz );
 
-				rectLight.lookAt( mshBox.position );
 
-				rectLight.updateMatrixWorld();
 
-
 
-				// // move box in figure 8 path
 
-				// // xz is a figure 8
 
-				// // y is gently rising and falling
 
-				// 				var r = t * ( 4.0 * Math.PI );
 
-				// var s = Math.floor( t * dirSigns.length );
 
-                //
 
-				// var sign = dirSigns[ s ];
 
-				// var x = 5.0 * ( Math.cos( r ) + 1.0 ) * sign[ 0 ];
 
-				// var z = 5.0 * Math.sin( r ) * sign[ 1 ];
 
-				// var y = 2.5 * Math.cos( 0.5 * r ) + 5.0;
 
-                //
 
-				// mshBox.position.set( x, y, z );
 
-				// mshBox.updateMatrixWorld();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				rectLightHelper.update(); // required
 
-				rnd.render( scn, cam );
 
-
 
-			}
 
-
 
-			function clearGui() {
 
-
 
-				if ( gui ) gui.destroy();
 
-
 
-				gui = new dat.GUI();
 
-				gui.width = 190;
 
-				var gStyle = gui.domElement.style;
 
-				gStyle.position = "absolute";
 
-				gStyle.top = "48px";
 
-				gStyle.height = "220px";
 
-
 
-				gui.open();
 
-
 
-			}
 
-
 
-			function buildGui() {
 
-
 
-				clearGui();
 
-
 
-				param = {
 
-					'light color': rectLight.color.getHex(),
 
-					intensity: rectLight.intensity,
 
-					width: rectLight.width,
 
-					height: rectLight.height,
 
-					shininess: matFloor.shininess
 
-					// shape: shapeNames[0]
 
-				};
 
-
 
-				gui.add( param, 'width', 0.1, 20).onChange( function ( val ) {
 
-
 
-					rectLight.width = val;
 
-
 
-				} );
 
-
 
-				gui.add( param, 'height', 0.1, 20).onChange( function ( val ) {
 
-
 
-					rectLight.height = val;
 
-
 
-				} );
 
-
 
-				// gui.add( param, 'shape', shapeNames ).onChange( function ( val ) {
 
-                //
 
-				// 	rectLight.polygon = shapes[ val ].clone();
 
-                //
 
-				// } );
 
-
 
-				gui.addColor( param, 'light color' ).onChange( function ( val ) {
 
-
 
-					rectLight.color.setHex( val );
 
-
 
-				} );
 
-
 
-				gui.add( param, 'intensity', 0, 100 ).onChange( function ( val ) {
 
-
 
-					rectLight.intensity = val;
 
-
 
-				} );
 
-
 
-				gui.add( param, 'shininess', 0, 100000 ).onChange( function ( val ) {
 
-
 
-					matBox.shininess = val;
 
-					matFloor.shininess = val;
 
-
 
-				} );
 
-
 
-				// TODO (abelnation): shadow controls
 
-				// addGui( 'distance', rectLight.distance, function( val ) {
 
-				// rectLight.distance = val;
 
-				// render();
 
-				// }, false, 0, 1000 );
 
-
 
-				// addGui( 'penumbra', rectLight.penumbra, function( val ) {
 
-				// rectLight.penumbra = val;
 
-				// render();
 
-				// }, false, 0, 1 );
 
-
 
-				// addGui( 'decay', rectLight.decay, function( val ) {
 
-				// rectLight.decay = val;
 
-				// render();
 
-				// }, false, 0, 100 );
 
-
 
-			}
 
-
 
-			function onDocumentClick( event ) {
 
-
 
-				event.preventDefault();
 
-
 
-				var rndDom = rnd.domElement;
 
-
 
-				if ( event.type === 'mousedown' ) {
 
-
 
-					mouseDown.x = ( event.clientX / rndDom.clientWidth ) * 2 - 1;
 
-					mouseDown.y = - ( event.clientY / rndDom.clientHeight ) * 2 + 1;
 
-
 
-				} else {
 
-
 
-					mouse.x = ( event.clientX / rndDom.clientWidth ) * 2 - 1;
 
-					mouse.y = - ( event.clientY / rndDom.clientHeight ) * 2 + 1;
 
-
 
-					if ( mouseDown.distanceTo( mouse ) < 0.0075 ) {
 
-
 
-						ray.setFromCamera( mouse, cam );
 
-						var found = ray.intersectObjects( [ mshBox, mshFloor ] );
 
-
 
-						if ( found.length > 0 ) {
 
-
 
-							if ( event.ctrlKey === false ) randomColor( found[ 0 ].object );
 
-							else found[ 0 ].object.material.color.set( 0xffffff );
 
-
 
-							render();
 
-
 
-						}
 
-
 
-					}
 
-
 
-				}
 
-
 
-			}
 
-
 
-			function randomColor( target ) {
 
-
 
-				if ( target !== undefined ) {
 
-
 
-					if ( target.material !== undefined ) target = target.material;
 
-
 
-					if ( target.color !== undefined ) {
 
-
 
-						target.color.setHex( 0xffffff * Math.random() );
 
-
 
-					}
 
-
 
-				}
 
-
 
-			}
 
-
 
-			init();
 
-			buildGui();
 
-			tick();
 
-
 
-		</script>
 
-	</body>
 
-</html>

+ 48 - 46
examples/webgl_physics_convex_break.html
查看文件 

@@ -1,50 +1,52 @@
 
 <html lang="en">
 
 <html lang="en">
 
-    <head>
 
-        <title>Convex object breaking example</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 {
 
-                color: #61443e;
 
-                font-family:Monospace;
 
-                font-size:13px;
 
-                text-align:center;
 
-
 
-                background-color: #bfd1e5;
 
-                margin: 0px;
 
-                overflow: hidden;
 
-            }
 
-
 
-            #info {
 
-                position: absolute;
 
-                top: 0px; width: 100%;
 
-                padding: 5px;
 
-            }
 
-
 
-            a {
 
-                color: #a06851;
 
-            }
 
-
 
-        </style>
 
-    </head>
 
-    <body>
 
+	<head>
 
+		<title>Convex object breaking example</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 {
 
+				color: #61443e;
 
+				font-family:Monospace;
 
+				font-size:13px;
 
+				text-align:center;
 
+
 
+				background-color: #bfd1e5;
 
+				margin: 0px;
 
+				overflow: hidden;
 
+			}
 
+
 
+			#info {
 
+				position: absolute;
 
+				top: 0px; width: 100%;
 
+				padding: 5px;
 
+			}
 
+
 
+			a {
 
+				color: #a06851;
 
+			}
 
+
 
+		</style>
 
+	</head>
 
+	<body>
 
+
 
 	<div id="info">Physics threejs demo with convex objects breaking in real time<br />Press mouse to throw balls and move the camera.</div>
 
 	<div id="info">Physics threejs demo with convex objects breaking in real time<br />Press mouse to throw balls and move the camera.</div>
 
-        <div id="container"><br /><br /><br /><br /><br />Loading...</div>
 
+	<div id="container"><br /><br /><br /><br /><br />Loading...</div>
 
 
 
 	<script src="../build/three.js"></script>
 
 	<script src="../build/three.js"></script>
 
 	<script src="js/libs/ammo.js"></script>
 
 	<script src="js/libs/ammo.js"></script>
 
 	<script src="js/controls/OrbitControls.js"></script>
 
 	<script src="js/controls/OrbitControls.js"></script>
 
-        <script src="js/Detector.js"></script>
 
+	<script src="js/Detector.js"></script>
 
 	<script src="js/libs/stats.min.js"></script>
 
 	<script src="js/libs/stats.min.js"></script>
 
 	<script src="js/ConvexObjectBreaker.js"></script>
 
 	<script src="js/ConvexObjectBreaker.js"></script>
 
+	<script src="js/QuickHull.js"></script>
 
 	<script src="js/geometries/ConvexGeometry.js"></script>
 
 	<script src="js/geometries/ConvexGeometry.js"></script>
 
 
 
-        <script>
 
+		<script>
 
 
 
 		// Detects webgl
 
 		// Detects webgl
 
 		if ( ! Detector.webgl ) {
 
 		if ( ! Detector.webgl ) {
 
-		    Detector.addGetWebGLMessage();
 
-		    document.getElementById( 'container' ).innerHTML = "";
 
+			Detector.addGetWebGLMessage();
 
+			document.getElementById( 'container' ).innerHTML = "";
 
 		}
 
 		}
 
 
 
 		// - Global variables -
 
 		// - Global variables -
 
@@ -82,7 +84,7 @@
 
 
 
 		var objectsToRemove = [];
 
 		var objectsToRemove = [];
 
 		for ( var i = 0; i < 500; i++ ) {
 
 		for ( var i = 0; i < 500; i++ ) {
 
-		    objectsToRemove[ i ] = null;
 
+			objectsToRemove[ i ] = null;
 
 		}
 
 		}
 
 		var numObjectsToRemove = 0;
 
 		var numObjectsToRemove = 0;
 
 
 
@@ -232,9 +234,9 @@
 
 			quat.set( 0, 0, 0, 1 );
 
 			quat.set( 0, 0, 0, 1 );
 
 			for ( var i = 0; i < numStones; i++ ) {
 
 			for ( var i = 0; i < numStones; i++ ) {
 
 
 
-			    pos.set( 0, 2, 15 * ( 0.5 - i / ( numStones + 1 ) ) );
 
+				pos.set( 0, 2, 15 * ( 0.5 - i / ( numStones + 1 ) ) );
 
 
 
-			    createObject( stoneMass, stoneHalfExtents, pos, quat, createMaterial( 0xB0B0B0 ) );
 
+				createObject( stoneMass, stoneHalfExtents, pos, quat, createMaterial( 0xB0B0B0 ) );
 
 
 
 			}
 
 			}
 
 
 
@@ -312,16 +314,16 @@
 
 		function createRigidBody( object, physicsShape, mass, pos, quat, vel, angVel ) {
 
 		function createRigidBody( object, physicsShape, mass, pos, quat, vel, angVel ) {
 
 
 
 			if ( pos ) {
 
 			if ( pos ) {
 
-			    object.position.copy( pos );
 
+				object.position.copy( pos );
 
 			}
 
 			}
 
 			else {
 
 			else {
 
-			    pos = object.position;
 
+				pos = object.position;
 
 			}
 
 			}
 
 			if ( quat ) {
 
 			if ( quat ) {
 
-			    object.quaternion.copy( quat );
 
+				object.quaternion.copy( quat );
 
 			}
 
 			}
 
 			else {
 
 			else {
 
-			    quat = object.quaternion;
 
+				quat = object.quaternion;
 
 			}
 
 			}
 
 
 
 			var transform = new Ammo.btTransform();
 
 			var transform = new Ammo.btTransform();
 
@@ -339,10 +341,10 @@
 
 			body.setFriction( 0.5 );
 
 			body.setFriction( 0.5 );
 
 
 
 			if ( vel ) {
 
 			if ( vel ) {
 
-			    body.setLinearVelocity( new Ammo.btVector3( vel.x, vel.y, vel.z ) );
 
+				body.setLinearVelocity( new Ammo.btVector3( vel.x, vel.y, vel.z ) );
 
 			}
 
 			}
 
 			if ( angVel ) {
 
 			if ( angVel ) {
 
-			    body.setAngularVelocity( new Ammo.btVector3( angVel.x, angVel.y, angVel.z ) );
 
+				body.setAngularVelocity( new Ammo.btVector3( angVel.x, angVel.y, angVel.z ) );
 
 			}
 
 			}
 
 
 
 			object.userData.physicsBody = body;
 
 			object.userData.physicsBody = body;
 
@@ -548,14 +550,14 @@
 
 
 
 			for ( var i = 0; i < numObjectsToRemove; i++ ) {
 
 			for ( var i = 0; i < numObjectsToRemove; i++ ) {
 
 
 
-			    removeDebris( objectsToRemove[ i ] );
 
+				removeDebris( objectsToRemove[ i ] );
 
 
 
 			}
 
 			}
 
 			numObjectsToRemove = 0;
 
 			numObjectsToRemove = 0;
 
 
 
 		}
 
 		}
 
 
 
-        </script>
 
+		</script>
 
 
 
-    </body>
 
+	</body>
 
 </html>
 
 </html>