flag animate

by Alvin Chen

HTML

<div id="info">Simple Cloth Simulation<br/>
			Verlet integration with relaxed constraints<br/>
			<a onclick="wind = !wind;">Wind</a> |
			<a onclick="sphere.visible = !sphere.visible;">Ball</a> |
			<a onclick="togglePins();">Pins</a>
		</div>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r78/three.min.js"></script>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/Detect.js/2.2.2/detect.min.js"></script>
		<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
		<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

		<script src="https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/Cloth.js"></script>

		<script type="x-shader/x-fragment" id="fragmentShaderDepth">
			#include <packing>
			uniform sampler2D texture;
			varying vec2 vUV;
			void main() {
				vec4 pixel = texture2D( texture, vUV );
				if ( pixel.a < 0.5 ) discard;
				gl_FragData[ 0 ] = packDepthToRGBA( 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>

CSS

body {
				font-family: Monospace;
				background-color: #000;
				color: #000;
				margin: 0px;
				overflow: hidden;
			}
			#info {
				position: absolute;
				padding: 10px;
				width: 100%;
				text-align: center;
			}
			a {
				text-decoration: underline;
				cursor: pointer;
			}

JavaScript

/* testing cloth simulation */
			var pinsFormation = [];
			var pins = [ 6 ];
			pinsFormation.push( pins );
			pins = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
			pinsFormation.push( pins );
			pins = [ 0 ];
			pinsFormation.push( pins );
			pins = []; // cut the rope ;)
			pinsFormation.push( pins );
			pins = [ 0, cloth.w ]; // classic 2 pins
			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;
			init();
			animate();
			function init() {
				container = document.createElement( 'div' );
				document.body.appendChild( container );
				// scene
				scene = new THREE.Scene();
				scene.fog = new THREE.Fog( 0xcce0ff, 500, 10000 );
				// 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 );
				// lights
				var light, materials;
				scene.add( new THREE.AmbientLight( 0x666666 ) );
				light = new THREE.DirectionalLight( 0xdfebff, 1.75 );
				light.position.set( 50, 200, 100 );
				light.position.multiplyScalar( 1.3 );
				light.castShadow = true;
				light.shadow.mapSize.width = 1024;
				light.shadow.mapSize.height = 1024;
				var d = 300;
				light.shadow.camera.left = - d;
				light.shadow.camera.right = d;
				light.shadow.camera.top = d;
				light.shadow.camera.bottom = - d;
				light.shadow.camera.far = 1000;
				scene.add( light );
				// cloth material
				var loader = new THREE.TextureLoader();
				var clothTexture = loader.load( 'textures/patterns/circuit_pattern.png' );
				clothTexture.wrapS = clothTexture.wrapT = THREE.RepeatWrapping;
				clothTexture.anisotropy = 16;
				var clothMaterial = new...