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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401
							<!doctype html>
<html lang="en">
	<head>
		<title>three.js webgl - cloth simulation</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: #000;
				color: #000;
				margin: 0px;
				overflow: hidden;
			}

			#info {
				text-align: center;
				padding: 10px;
				z-index: 10;
				width: 100%;
				position: absolute;
			}

			a {
				text-decoration: underline;
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		<div id="info">Simple Cloth Simulation #3<br/>
			Verlet based 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>
		</div>

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

		<script src="js/Detector.js"></script>
		<script src="js/Stats.js"></script>

		<script src="js/ParametricGeometries.js"></script>
		<script src="js/Cloth.js"></script>

		<script type="x-shader/x-fragment" id="fragmentShaderDepth">

			uniform sampler2D texture;
			varying vec2 vUV;

			vec4 pack_depth( const in float depth ) {

				const vec4 bit_shift = vec4( 256.0 * 256.0 * 256.0, 256.0 * 256.0, 256.0, 1.0 );
				const vec4 bit_mask  = vec4( 0.0, 1.0 / 256.0, 1.0 / 256.0, 1.0 / 256.0 );
				vec4 res = fract( depth * bit_shift );
				res -= res.xxyz * bit_mask;
				return res;

			}

			void main() {

				vec4 pixel = texture2D( texture, vUV );

				if ( pixel.a < 0.5 ) discard;

				gl_FragData[ 0 ] = pack_depth( gl_FragCoord.z );

			}
		</script>

		<script type="x-shader/x-vertex" id="vertexShaderDepth">

			varying vec2 vUV;

			void main() {

				vUV = 0.75 * uv;

				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );

				gl_Position = projectionMatrix * mvPosition;

			}

		</script>

		<script>

			/* testing cloth simulation */

			var pinsFormation = [];
			var pins = [];

			pins[6] = true;
			pinsFormation.push( pins );

			pins = [ true, true, true, true, true, true, true, true, true, true, true, true ];
			pinsFormation.push( pins );

			pins = [ true ];
			pinsFormation.push( pins );

			pins = []; // cut the rope ;)
			pinsFormation.push( pins );

			pins = [ true ]; // classic 2 pins
			pins[ cloth.w ] = true;
			pinsFormation.push( pins );

			pins = pinsFormation[ 1 ];


			function togglePins() {

				pins = pinsFormation[ ~~( Math.random() * pinsFormation.length ) ];

			}

			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

			var container, stats;
			var camera, scene, renderer;

			var clothGeometry;
			var sphere;
			var object, arrow;

			var rotate = true;

			init();
			animate();

			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				// scene

				scene = new THREE.Scene();

				scene.fog = new THREE.Fog( 0x000000, 500, 10000 );
				scene.fog.color.setHSV( 0.6, 0.2, 1 );

				// camera

				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
				camera.position.y = 50;
				camera.position.z = 1500;
				scene.add( camera );

				// lights

				var light, materials;

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

				light = new THREE.DirectionalLight( 0xffffff, 1.75 );
				light.color.setHSV( 0.6, 0.125, 1 );
				light.position.set( 50, 200, 100 );
				light.position.multiplyScalar( 1.3 );

				light.castShadow = true;
				//light.shadowCameraVisible = true;

				light.shadowMapWidth = 2048;
				light.shadowMapHeight = 2048;

				var d = 300;

				light.shadowCameraLeft = -d;
				light.shadowCameraRight = d;
				light.shadowCameraTop = d;
				light.shadowCameraBottom = -d;

				light.shadowCameraFar = 1000;
				light.shadowDarkness = 0.5;

				scene.add( light );

				light = new THREE.DirectionalLight( 0xffffff, 0.35 );
				light.color.setHSV( 0.3, 0.95, 1 );
				light.position.set( 0, -1, 0 );

				scene.add( light );

				// cloth material

				var clothTexture = THREE.ImageUtils.loadTexture( 'textures/patterns/circuit_pattern.png' );
				clothTexture.wrapS = clothTexture.wrapT = THREE.RepeatWrapping;
				clothTexture.anisotropy = 16;

				materials = [
					new THREE.MeshPhongMaterial( { alphaTest: 0.5, ambient: 0xffffff, color: 0xffffff, specular: 0x030303, emissive: 0x111111, shiness: 10, perPixel: true, metal: false, map: clothTexture, side: THREE.DoubleSide } ),
					new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true, transparent: true, opacity: 0.9 } )
				];

				// cloth geometry

				clothGeometry = new THREE.ParametricGeometry( THREE.ParametricGeometries.plane( 200, 200 ), cloth.w, cloth.h, true );
				clothGeometry.dynamic = true;
				clothGeometry.computeFaceNormals();

				var uniforms = { texture:  { type: "t", value: 0, texture: clothTexture } };
				var vertexShader = document.getElementById( 'vertexShaderDepth' ).textContent;
				var fragmentShader = document.getElementById( 'fragmentShaderDepth' ).textContent;

				// cloth mesh

				object = new THREE.Mesh( clothGeometry, materials[ 0 ] );
				object.position.set( 0, 0, 0 );
				object.castShadow = true;
				object.receiveShadow = true;
				scene.add( object );

				object.customDepthMaterial = new THREE.ShaderMaterial( { uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader } );

				// sphere

				var ballGeo = new THREE.SphereGeometry( ballSize, 20, 20 );
				var ballMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff } );

				sphere = new THREE.Mesh( ballGeo, ballMaterial );
				sphere.castShadow = true;
				sphere.receiveShadow = true;
				scene.add( sphere );

				// arrow

				arrow = new THREE.ArrowHelper( new THREE.Vector3( 0, 1, 0 ), new THREE.Vector3( 0, 0, 0 ), 50, 0xff0000 );
				arrow.position.set( -200, 0, -200 );
				//scene.add( arrow );

				var axis;
				axis = new THREE.AxisHelper();
				axis.position.set( 200, 0, -200 );
				axis.scale.x = axis.scale.y = axis.scale.z = 0.5;
				//scene.add( axis );

				// ground

				var initColor = new THREE.Color( 0x00ff00 );
				initColor.setHSV( 0.25, 0.85, 0.5 );
				var initTexture = THREE.ImageUtils.generateDataTexture( 1, 1, initColor );

				var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, map: initTexture, perPixel: true } );

				var groundTexture = THREE.ImageUtils.loadTexture( "textures/terrain/grasslight-big.jpg", undefined, function() { groundMaterial.map = groundTexture } );
				groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
				groundTexture.repeat.set( 25, 25 );
				groundTexture.anisotropy = 16;

				var mesh = new THREE.Mesh( new THREE.PlaneGeometry( 20000, 20000 ), groundMaterial );
				mesh.position.y = -250;
				mesh.rotation.x = - Math.PI / 2;
				mesh.receiveShadow = true;
				scene.add( mesh );

				// poles

				var poleGeo = new THREE.CubeGeometry( 5, 750, 5 );
				var poleMat = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shiness: 100, perPixel: true } );

				var mesh = new THREE.Mesh( poleGeo, poleMat );
				mesh.position.y = -250;
				mesh.position.x = -125;
				mesh.receiveShadow = true;
				mesh.castShadow = true;
				scene.add( mesh );

				var mesh = new THREE.Mesh( poleGeo, poleMat );
				mesh.position.y = -250;
				mesh.position.x = 125;
				mesh.receiveShadow = true;
				mesh.castShadow = true;
				scene.add( mesh );

				var mesh = new THREE.Mesh( new THREE.CubeGeometry( 255, 5, 5 ), poleMat );
				mesh.position.y = -250 + 750/2;
				mesh.position.x = 0;
				mesh.receiveShadow = true;
				mesh.castShadow = true;
				scene.add( mesh );

				var gg = new THREE.CubeGeometry( 10, 10, 10 );
				var mesh = new THREE.Mesh( gg, poleMat );
				mesh.position.y = -250;
				mesh.position.x = 125;
				mesh.receiveShadow = true;
				mesh.castShadow = true;
				scene.add( mesh );

				var mesh = new THREE.Mesh( gg, poleMat );
				mesh.position.y = -250;
				mesh.position.x = -125;
				mesh.receiveShadow = true;
				mesh.castShadow = true;
				scene.add( mesh );

				//

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.setClearColor( scene.fog.color );

				container.appendChild( renderer.domElement );

				renderer.gammaInput = true;
				renderer.gammaOutput = true;
				renderer.physicallyBasedShading = true;

				renderer.shadowMapEnabled = true;

				//

				stats = new Stats();
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.top = '0px';
				container.appendChild( stats.domElement );

				stats.domElement.children[ 0 ].children[ 0 ].style.color = "#aaa";
				stats.domElement.children[ 0 ].style.background = "transparent";
				stats.domElement.children[ 0 ].children[ 1 ].style.display = "none";

				//

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

				sphere.visible = !true

			}

			//

			function onWindowResize() {

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

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

			}

			//

			function animate() {

				requestAnimationFrame( animate );

				var time = Date.now();

				windStrength = Math.cos( time / 7000 ) * 20 + 40;
				windForce.set( Math.sin( time / 2000 ), Math.cos( time / 3000 ), Math.sin( time / 1000 ) ).normalize().multiplyScalar( windStrength );
				arrow.setLength( windStrength );
				arrow.setDirection( windForce );

				simulate();
				render();
				stats.update();

			}

			function render() {

				var timer = Date.now() * 0.0002;

				var p = cloth.particles;

				for ( var i = 0, il = p.length; i < il; i ++ ) {

					clothGeometry.vertices[ i ].copy( p[ i ].position );

				}

				clothGeometry.computeFaceNormals();
				clothGeometry.computeVertexNormals();

				clothGeometry.normalsNeedUpdate = true;
				clothGeometry.verticesNeedUpdate = true;

				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 );

			}

		</script>
	</body>
</html>