LionMundo

where a web, vim, scifi hacker blogs

Three.js and Cannon.js: Basic Third Person Game

| Comments

THREE-BasicThirdPersonGame

THREE-BasicThirdPersonGame: tutorial. Really cool. Try it live.

I’m interested in three.js so I will learn this one. Later learn phaser engine.

  • THREE.js: docs
  • Cannon.js: this framework is a pure math and physics collection which can do complex calculations if you want a realistic simulation. Docs.
  • stats.js: JavaScript Performance Monitor. From this learnt how to write js in bookmarklet.
  • rawgit.com: RawGit serves raw files directly from GitHub with proper Content-Type headers.
  • Google Closure Compiler: To get the latest version of it, click here. Also can get it here.
  • ant: Apache Ant is a Java library and command-line tool that help building software.
  • emoji cheat sheet
  • highcharts

With rawgit.com, a new way to deploy my scripts to my pages: build js with closure, in html I use relative path, only in my post I use rawgit.com links. Then all the css, html, js should be automatically resolved. Actually if use my own server, I can have a cdn myself since the source code is available. :smiley:

Analysis

This is constructed as a tutorial. The code of all JavaScript files is fully commented. The whole game logic is placed in the game.core.js file.

To start, read the tutorial. With this it’s not difficult to understand the game.

So we start with demo1_simple.html, WebGL gets checked and then the game is initiated. Stats monitors the frame rate and the game goes into the loop().

I read the details and found some libs there. And I think it’s mostly variable definitions and functions which comply with physic laws. In this project, for now I think there is no game engine like phaser applied. So I think I will just examine the 3D part and write about it in my post and then I go to the phaser project.

In game.three.js, the render() function is defined, which turns out that it’s just a callback. The createModel() is the one I care about. It imports json data and deal with it. Ok, the model is imported by the code beginning at line 83 of game.core.demo1. The json data is stored in game.models.js. This file is really just a model, with lots of data. After importing, the script adds material and mesh to it.

Summary

From this repo I acquired better understanding of a common game frame: Init->Setup->Loop. Found some wonderful tools like rawgit.com, stats.js, emoji cheat sheet. From the details of code, I found that physics formulae are applied heavily. Maybe it’s time to check out how real game engines deal with these tasks.

Further Reading