Added fps meter to debug mode

jaks6 · Dec 15, 2015 · 0f527d6 · 0f527d6
1 parent 6d176cf
commit 0f527d6
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -11,6 +11,7 @@
     <!-- external js libs -->
     <script type="text/javascript" src="lib/three.js/build/three.min.js"></script>
     <script type="text/javascript" src="lib/cannon.min.js"></script>
+    <script type="text/javascript" src="lib/stats.min.js"></script>
     <script type="text/javascript" src="lib/OrbitControls.js"></script>
 
     <script type="text/javascript" src="js/CannonUtils.js"></script>
@@ -96,6 +97,7 @@ <h5>Player 2 (<span></span>)</h5>
         <div class="timer">
           30
         </div>
+        <div id="fps_stats_container"></div>
       </div>
 
       <div id="gameover" class="hide">

diff --git a/js/Gui.js b/js/Gui.js
@@ -3,7 +3,8 @@ var GameGui = function () {
   btn_ball.onclick = function () {
     eightballgame.hitButtonClicked(Number(document.getElementById('range_strength').value));
   };
-}
+  if (debug) document.getElementById('fps_stats_container').appendChild( stats.domElement );
+};
 
 GameGui.prototype.setupGameHud = function() {
   this.hide(document.getElementById('mainMenu'));

diff --git a/js/Table.js b/js/Table.js
@@ -25,7 +25,7 @@ var Table = function () {
     var mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({
       color: new THREE.Color(TABLE_COLORS.cloth),
       specular: 0x404040,
-      shininess: 20,
+      shininess: 10,
       shading: THREE.SmoothShading
     }));
 
@@ -42,7 +42,7 @@ var Table = function () {
     var mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({
       color: new THREE.Color(0x7a5230),
       specular: 0x404040,
-      shininess: 20,
+      shininess: 100,
       shading: THREE.SmoothShading
     }));
 

diff --git a/js/main.js b/js/main.js
@@ -7,6 +7,9 @@ var debug = false; // if true then collision wireframes are drawn
 
 var progressBar;
 
+var stats = new Stats();
+stats.setMode( 0 ); // 0: fps, 1: ms, 2: mb
+
 var textureLoader = new THREE.TextureLoader();
 THREE.DefaultLoadingManager.onProgress = function (item, loaded, total) {
   if (typeof progressBar !== 'undefined') {
@@ -123,8 +126,8 @@ function setCollisionBehaviour() {
 }
 
 function draw() {
-  requestAnimationFrame(draw);
-
+  stats.begin();
+  
   // Controls
   controls.target.copy(game.balls[0].mesh.position);
   controls.update();
@@ -136,6 +139,8 @@ function draw() {
   var dt = clock.getDelta();
   game.tick(dt);
 
+  stats.end();
+  requestAnimationFrame(draw);
   renderer.render(scene, camera); // We render our scene with our camera
 }
 

diff --git a/lib/stats.min.js b/lib/stats.min.js
diff --git a/styles.css b/styles.css
@@ -265,3 +265,11 @@
 .player.unknown span:before {
   content: '?';
 }
+
+
+#stats {
+    position: absolute;
+    top: 420px;
+    left: 810px;
+    z-index: 1;
+}