webgl_animation_cloth: clean up and improvements

ed58ca8a · Mugen87 · 47e81a74 · ed58ca8a · ed58ca8a
隐藏空白更改
内联并排

Showing with 41 addition and 41 deletion

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

examples/webgl_animation_cloth.html examples/webgl_animation_cloth.html +11 -16

未找到文件。
--- a/examples/js/Cloth.js
+++ b/examples/js/Cloth.js
@@ -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 ];

--- a/examples/webgl_animation_cloth.html
+++ b/examples/webgl_animation_cloth.html
@@ -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 );