Lesson 2

Post Reply
admin
Site Admin
Posts: 3121
Joined: Wed Dec 11, 2019 8:31 am
Has thanked: 4 times

Lesson 2

Post by admin »

Create a .html file ballistic.html.
Download and extract libs.zip to the same folder as your .html file.
https://easy-english-study.com/java-script/libs.zip
admin
Site Admin
Posts: 3121
Joined: Wed Dec 11, 2019 8:31 am
Has thanked: 4 times

Re: Lesson 2

Post by admin »

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Ballistic</title>
  5. <script type="text/javascript" src="./libs/three.js"></script>
  6. <script type="text/javascript" src="./libs/stats.js"></script>
  7. <style>
  8. body {
  9. /* set margin to 0 and overflow to hidden, to go fullscreen */
  10. margin: 0;
  11. overflow: hidden;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <div id="Stats-output">
  17. </div>
  18. <!-- Div which will hold the Output -->
  19. <div id="WebGL-output">
  20. </div>
  21. <script type="text/javascript">
  22. <!-- Javascript code that runs our Three.js examples -->
  23. // once everything is loaded, we run our Three.js stuff.
  24. function init() {
  25. const tau=0.05, v0=200, k=0.09, Pi=3.14;
  26. var alpha=4*Pi/16;
  27. var vx=v0*Math.cos(alpha);
  28. var vy=v0*Math.sin(alpha);
  29. var v=0.0, ax=0.0, ay=0.0;
  30. var i=0;
  31. var kk=0;
  32. var x = new Array();
  33. var y = new Array();
  34. var b1=true;
  35. do{
  36. v=k*Math.sqrt(vx*vx+vy*vy);
  37. ax=-vx*v;
  38. ay=-vy*v-1;
  39. vx=vx+tau*ax;
  40. vy=vy+tau*ay;
  41. if (i>0){
  42. x=x[i-1]+vx*tau;
  43. y=y[i-1]+vy*tau;
  44. }
  45. if (i==0){
  46. x=vx*tau;
  47. y=vy*tau;
  48. }
  49. i=i+1;
  50. if (y[i-1]<0){b1=false;}
  51. } while (b1);
  52. kk=i-1;
  53. i=0;
  54. var stats = initStats();

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

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

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

  61. renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
  62. renderer.setSize(window.innerWidth, window.innerHeight);
  63. renderer.shadowMapEnabled = true;

  64. var axes = new THREE.AxisHelper(300);"
  65. axes.position.set( 0,0,0 );
  66. scene.add(axes);"

  67. var sphereGeometry = new THREE.SphereGeometry(1, 5, 5);
  68. var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
  69. var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

  70. // position the sphere
  71. sphere.position.x = 0;
  72. sphere.position.y = 0;
  73. sphere.position.z = 0;


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

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

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

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

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

  91. // call the render function
  92. var step = 0;
  93. renderScene();

  94. function renderScene() {
  95. stats.update();
  96. if (i<=kk)
  97. {
  98. i=i+1;
  99. }
  100. if (i>kk)
  101. {
  102. i=0;
  103. }
  104. // bounce the sphere up and down
  105. sphere.position.x=x;
  106. sphere.position.y=y;"

  107. //step += 0.04;
  108. //sphere.position.x = 20 + ( 10 * (Math.cos(step)));
  109. //sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));

  110. // render using requestAnimationFrame
  111. requestAnimationFrame(renderScene);
  112. renderer.render(scene, camera);
  113. }

  114. function initStats() {

  115. var stats = new Stats();

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

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

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

  122. return stats;
  123. }
  124. }
  125. window.onload = init;

  126. </script>
  127. </body>
  128. </html>
admin
Site Admin
Posts: 3121
Joined: Wed Dec 11, 2019 8:31 am
Has thanked: 4 times

Re: Lesson 2

Post by admin »

Code: Select all

<!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
Site Admin
Posts: 3121
Joined: Wed Dec 11, 2019 8:31 am
Has thanked: 4 times

Re: Lesson 2

Post by admin »

The output of the program is a flying ball.
Ballistic
Post Reply