Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Merge pull request #8475 from Mugen87/dev

webgl_animation_cloth: clean up and improvements
Mr.doob 9 years ago
parent
47e81a7405 ed58ca8a53
commit
3c83694329
2 changed files with 41 additions and 41 deletions
Split View Show Diff Stats
  1. 30 25
      examples/js/Cloth.js
  2. 11 16
      examples/webgl_animation_cloth.html

+ 30 - 25
examples/js/Cloth.js
View File 

@@ -12,18 +12,17 @@
 
 
 var DAMPING = 0.03;
 
 var DRAG = 1 - DAMPING;
 
-var MASS = .1;
 
+var MASS = 0.1;
 
 var restDistance = 25;
 
 
-
 
-var xSegs = 10; //
 
-var ySegs = 10; //
 
+var xSegs = 10;
 
+var ySegs = 10;
 
 
 var clothFunction = plane( restDistance * xSegs, restDistance * ySegs );
 
 
 var cloth = new Cloth( xSegs, ySegs );
 
 
-var GRAVITY = 981 * 1.4; // 
+var GRAVITY = 981 * 1.4;
 
 var gravity = new THREE.Vector3( 0, - GRAVITY, 0 ).multiplyScalar( MASS );
 
 
 
@@ -63,7 +62,7 @@ function Particle( x, y, z, mass ) {
 
 
 	this.position = clothFunction( x, y ); // position
 
 	this.previous = clothFunction( x, y ); // previous
 
-	this.original = clothFunction( x, y ); 
+	this.original = clothFunction( x, y );
 
 	this.a = new THREE.Vector3( 0, 0, 0 ); // acceleration
 
 	this.mass = mass;
 
 	this.invMass = 1 / mass;
 
@@ -73,6 +72,7 @@ function Particle( x, y, z, mass ) {
 
 }
 
 
 // Force -> Acceleration
 
+
 
 Particle.prototype.addForce = function( force ) {
 
 
 	this.a.add(
 
@@ -83,6 +83,7 @@ Particle.prototype.addForce = function( force ) {
 
 
 
 // Performs verlet integration
 
+
 
 Particle.prototype.integrate = function( timesq ) {
 
 
 	var newPos = this.tmp.subVectors( this.position, this.previous );
 
@@ -104,7 +105,7 @@ function satisifyConstrains( p1, p2, distance ) {
 
 
 	diff.subVectors( p2.position, p1.position );
 
 	var currentDist = diff.length();
 
-	if ( currentDist == 0 ) return; // prevents division by 0
 
+	if ( currentDist === 0 ) return; // prevents division by 0
 
 	var correction = diff.multiplyScalar( 1 - distance / currentDist );
 
 	var correctionHalf = correction.multiplyScalar( 0.5 );
 
 	p1.position.add( correctionHalf );
 
@@ -229,10 +230,11 @@ function simulate( time ) {
 
 		return;
 
 
 	}
 
-	
+
 
 	var i, il, particles, particle, pt, constrains, constrain;
 
 
 	// Aerodynamics forces
 
+
 
 	if ( wind ) {
 
 
 		var face, faces = clothGeometry.faces, normal;
 
@@ -252,9 +254,8 @@ function simulate( time ) {
 
 		}
 
 
 	}
 
-	
-	for ( particles = cloth.particles, i = 0, il = particles.length
 
-			; i < il; i ++ ) {
 
+
 
+	for ( particles = cloth.particles, i = 0, il = particles.length; i < il; i ++ ) {
 
 
 		particle = particles[ i ];
 
 		particle.addForce( gravity );
 
@@ -265,8 +266,9 @@ function simulate( time ) {
 
 
 	// Start Constrains
 
 
-	constrains = cloth.constrains,
 
+	constrains = cloth.constrains;
 
 	il = constrains.length;
 
+
 
 	for ( i = 0; i < il; i ++ ) {
 
 
 		constrain = constrains[ i ];
 
@@ -276,30 +278,32 @@ function simulate( time ) {
 
 
 	// Ball Constrains
 
 
-
 
 	ballPosition.z = - Math.sin( Date.now() / 600 ) * 90 ; //+ 40;
 
 	ballPosition.x = Math.cos( Date.now() / 400 ) * 70;
 
 
-	if ( sphere.visible )
 
-	for ( particles = cloth.particles, i = 0, il = particles.length
 
-			; i < il; i ++ ) {
 
+	if ( sphere.visible ) {
 
 
-		particle = particles[ i ];
 
-		pos = particle.position;
 
-		diff.subVectors( pos, ballPosition );
 
-		if ( diff.length() < ballSize ) {
 
+		for ( particles = cloth.particles, i = 0, il = particles.length; i < il; i ++ ) {
 
+
 
+			particle = particles[ i ];
 
+			pos = particle.position;
 
+			diff.subVectors( pos, ballPosition );
 
+			if ( diff.length() < ballSize ) {
 
+
 
+				// collided
 
+				diff.normalize().multiplyScalar( ballSize );
 
+				pos.copy( ballPosition ).add( diff );
 
 
-			// collided
 
-			diff.normalize().multiplyScalar( ballSize );
 
-			pos.copy( ballPosition ).add( diff );
 
+			}
 
 
 		}
 
 
 	}
 
 
+
 
 	// Floor Constains
 
-	for ( particles = cloth.particles, i = 0, il = particles.length
 
-			; i < il; i ++ ) {
 
+
 
+	for ( particles = cloth.particles, i = 0, il = particles.length; i < il; i ++ ) {
 
 
 		particle = particles[ i ];
 
 		pos = particle.position;
 
@@ -312,6 +316,7 @@ function simulate( time ) {
 
 	}
 
 
 	// Pin Constrains
 
+
 
 	for ( i = 0, il = pins.length; i < il; i ++ ) {
 
 
 		var xy = pins[ i ];

+ 11 - 16
examples/webgl_animation_cloth.html
View File 

@@ -31,7 +31,6 @@
 
 	<body>
 
 		<div id="info">Simple Cloth Simulation<br/>
 
 			Verlet integration with Constrains relaxation<br/>
 
-			Toggle: <a onclick="rotate = !rotate;">Camera</a> |
 
 			<a onclick="wind = !wind;">Wind</a> |
 
 			<a onclick="sphere.visible = !sphere.visible;">Ball</a> |
 
 			<a onclick="togglePins();">Pins</a>
 
@@ -40,6 +39,7 @@
 
 		<script src="../build/three.js"></script>
 
 
 		<script src="js/Detector.js"></script>
 
+		<script src="js/controls/OrbitControls.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
 
 
 		<script src="js/Cloth.js"></script>
 
@@ -125,8 +125,6 @@
 
 			var sphere;
 
 			var object;
 
 
-			var rotate = true;
 
-
 
 			init();
 
 			animate();
 
 
@@ -143,6 +141,7 @@
 
 				// camera
 
 
 				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
 
+				camera.position.x = 1000;
 
 				camera.position.y = 50;
 
 				camera.position.z = 1500;
 
 				scene.add( camera );
 
@@ -158,7 +157,6 @@
 
 				light.position.multiplyScalar( 1.3 );
 
 
 				light.castShadow = true;
 
-				// light.shadowCameraVisible = true;
 
 
 				light.shadow.mapSize.width = 1024;
 
 				light.shadow.mapSize.height = 1024;
 
@@ -222,7 +220,7 @@
 
 
 				// ground
 
 
-				var groundTexture = loader.load( "textures/terrain/grasslight-big.jpg" );
 
+				var groundTexture = loader.load( 'textures/terrain/grasslight-big.jpg' );
 
 				groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
 
 				groundTexture.repeat.set( 25, 25 );
 
 				groundTexture.anisotropy = 16;
 
@@ -276,7 +274,7 @@
 
 				mesh.castShadow = true;
 
 				scene.add( mesh );
 
 
-				//
 
+				// renderer
 
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
@@ -290,7 +288,13 @@
 
 
 				renderer.shadowMap.enabled = true;
 
 
-				//
 
+				// controls
 
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+				controls.maxPolarAngle = Math.PI * 0.5;
 
+				controls.minDistance = 1000;
 
+				controls.maxDistance = 7500;
 
+
 
+				// performance monitor
 
 
 				stats = new Stats();
 
 				stats.domElement.style.position = 'absolute';
 
@@ -335,8 +339,6 @@
 
 
 			function render() {
 
 
-				var timer = Date.now() * 0.0002;
 
-
 
 				var p = cloth.particles;
 
 
 				for ( var i = 0, il = p.length; i < il; i ++ ) {
 
@@ -353,13 +355,6 @@
 
 
 				sphere.position.copy( ballPosition );
 
 
-				if ( rotate ) {
 
-
 
-					camera.position.x = Math.cos( timer ) * 1500;
 
-					camera.position.z = Math.sin( timer ) * 1500;
 
-
 
-				}
 
-
 
 				camera.lookAt( scene.position );
 
 
 				renderer.render( scene, camera );