threejs/jelly-balls.html

﻿<!DOCTYPE html>

<html>
	<head>
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<script src="three.min.js"></script>
		<link rel="stylesheet" href="../etudes.css">
	</head>
	
	<body>
		<h1>Jelly balls <a href="https://boytchev.github.io/etudes/">&larr;</a></h1>
		
		<script>
		
			// construct and setup the scene
			
			var renderer = new THREE.WebGLRenderer( {antialias:true} );
				renderer.setAnimationLoop( animate );
				renderer.shadowMap.enabled = true;
				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
				document.body.appendChild( renderer.domElement );
				document.body.style.margin = 0;
				document.body.style.overflow = 'hidden';

			var scene = new THREE.Scene();
				scene.background = new THREE.Color( 'skyblue' );
				
			var camera = new THREE.PerspectiveCamera( 40, 1, 0.1, 1000 );
				camera.position.set( 0, 60, 300 );
				camera.lookAt( new THREE.Vector3( 0, -10, 0 ) );

			var light = new THREE.PointLight( 'white', 0.5 );
				light.position.set( 0, 0, 0 );
				light.castShadow = false;
				scene.add( light );

			var light = new THREE.PointLight();
				light.position.set( 0, 100, 0 );
				light.castShadow = true;
				scene.add( light );

			
			// create the balls
			
			var n = 3, // number of balls
				r = 15, // size of balls
				balls = [];
				colors = [ 0x907000, 0x2040A0, 0xA02040 ],
				geometry = new THREE.SphereBufferGeometry( r, 32, 32 );

			for (var i=0; i<n; i++)
			{
				balls[i] = new THREE.Mesh(
					geometry,
					new THREE.MeshPhongMaterial({
						shininess: 100,
						color: colors[i],
						emissive: colors[i],
					})
				);
				
				balls[i].castShadow = true;
				balls[i].position.set( -50+50*i, 0, 0 );
				balls[i].v = THREE.Math.randFloat( 1.5, 2.5 ); // velocity
				balls[i].o = THREE.Math.randFloat( 0, 2*Math.PI ); // offset
			}
			
			scene.add( ...balls );
				
				
			// create the box
			
			var ground = new THREE.Mesh(
				new THREE.BoxGeometry( 160.2, 2.2, 100.2 ),
				new THREE.MeshPhongMaterial({ color:'slateblue', shininess: 2, specular: 0xffffff})
			);
			ground.position.y = -51;
			ground.receiveShadow = true;
			scene.add( ground );
		
			var glass = new THREE.Mesh(
				new THREE.BoxGeometry( 160, 100, 100 ),
				new THREE.MeshPhongMaterial({color:'lightcyan', opacity:0.3,transparent:true, shininess: 0, specular: 0xffffff, side:THREE.BackSide})
			);
			glass.receiveShadow = true;
			scene.add( glass );
			
			var frame = new THREE.BoxHelper( glass );
			frame.material.color.set( 'white' );
			scene.add( frame );
		

			
			// maintain full screen
			
			window.addEventListener( 'resize', onWindowResize, false );
			onWindowResize();
			
			function onWindowResize( event )
			{
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

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

			
			
			var clock = new THREE.Clock();
			
			var t, y, k, topY;
			
			function animate()
			{
				t = clock.getElapsedTime();

			
				scene.rotation.y = t/2;
			
				
				for (var i=0; i<n; i++)
				{
					y = -55+90*Math.abs( Math.sin( balls[i].v*t+balls[i].o ) );
					
					if ( y-r < -50 )
					{
						topY = y+r;
						y = (topY+(-50))/2;
						k = (topY-y)/r;
					}
					else
					{
						k = 1;
					}
					
					balls[i].scale.set( 2-k, k, 2-k );
					balls[i].position.y = y;
				}
				
				renderer.render( scene, camera );
			}
		</script>
	</body>
</html>