Lesson 2

admin

Create a .html file ballistic.html.
Download and extract libs.zip to the same folder as your .html file.
libs.zip

admin

<!DOCTYPE html>

<html>

<head>
    <title>Ballistic</title>
    <script type="text/javascript" src="./libs/three.js"></script>

    <script type="text/javascript" src="./libs/stats.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>
<script type="text/javascript">
<!-- Javascript code that runs our Three.js examples -->

    // once everything is loaded, we run our Three.js stuff.
    function init() {
const tau=0.05, v0=200, k=0.09, Pi=3.14;
var alpha=4*Pi/16;
var vx=v0*Math.cos(alpha);
var vy=v0*Math.sin(alpha);
var v=0.0, ax=0.0, ay=0.0;
var i=0;
var kk=0;
var x = new Array();
var y = new Array();
var b1=true;
do{
            
			v=k*Math.sqrt(vx*vx+vy*vy);		
			ax=-vx*v;
			ay=-vy*v-1;			
			vx=vx+tau*ax;
			vy=vy+tau*ay;			
			if (i>0){
			x[i]=x[i-1]+vx*tau;
			y[i]=y[i-1]+vy*tau;
			}
			if (i==0){
			x[i]=vx*tau;
			y[i]=vy*tau;		
			}		
            i=i+1;		
			if (y[i-1]<0){b1=false;}
			} while (b1);
kk=i-1;
i=0;				
        var stats = initStats();

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a render and set the size
        var renderer = new THREE.WebGLRenderer();

        renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMapEnabled = true;
         
		 var axes = new THREE.AxisHelper(300);
          axes.position.set( 0,0,0 ); 
		  scene.add(axes);
		 
        var sphereGeometry = new THREE.SphereGeometry(1, 5, 5);
        var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

        // position the sphere
        sphere.position.x = 0;
        sphere.position.y = 0;
        sphere.position.z = 0;
       

        // add the sphere to the scene
        scene.add(sphere);

        // position and point the camera to the center of the scene
        camera.position.x = -20;
        camera.position.y = 0;
        camera.position.z = 20;
        camera.lookAt(scene.position);

        // add subtle ambient lighting
        var ambientLight = new THREE.AmbientLight(0x0c0c0c);
        scene.add(ambientLight);

        // add spotlight for the shadows
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40, 60, -10);
        spotLight.castShadow = true;
        scene.add(spotLight);

        // add the output of the renderer to the html element
        document.getElementById("WebGL-output").appendChild(renderer.domElement);

        // call the render function
        var step = 0;
        renderScene();

        function renderScene() {
            stats.update();
            if (i<=kk)
			{
            i=i+1;
			}
			if (i>kk)
			{
            i=0;
			}
            // bounce the sphere up and down
            sphere.position.x=x[i];
			sphere.position.y=y[i];
			
			//step += 0.04;
            //sphere.position.x = 20 + ( 10 * (Math.cos(step)));
            //sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));

            // render using requestAnimationFrame
            requestAnimationFrame(renderScene);
            renderer.render(scene, camera);
        }

        function initStats() {

            var stats = new Stats();

            stats.setMode(0); // 0: fps, 1: ms

            // Align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            document.getElementById("Stats-output").appendChild(stats.domElement);

            return stats;
        }
    }
    window.onload = init;

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

admin

The output of the program is a flying ball.
Ballistic

NodeBB

Lesson 2