Intro
These examples use three.js, ammo.js(ammo is a javascript port of the bullet physics engine) and socket.io for flask(python). The examples that use flask require you to run a local server using the server.py file in the examples directory. You'll need to have flask and flask-socketio python packages. For the client side the you'll just need to include socket.io javascript file which you can get here.
Note. Since creating this git it has become a catch all for other random javascript work. I try to keep the focus on the above mentioned, but there are a few other things that have worked their way in.
a few good refs:
JS Scope and Hoist
Example 1
View Example
This SUPER SIMPLE demo will make a cube and drop it into a world with nothing (not even ground!). You'll see gravity pull the cube down. The source code has loads of comments to explain each part. You can view the source javascript file which you can get HERE. The intent is just to show minimalist code for creating objects with ammo.js and three.js.
Example 2
View Example
This expands on Example 1. Adds ground for our cube to fall on as well as shadow to the world. The shadows come from adding a directional light source and enabling shadows in our renderer as well as on our objects. javascript source code with comments can be found HERE.
Example 3
View Example
This examples shows how to to select and move an object which has physics enabled. You can't just 'teleport' objects in bullet (ammo.js) you need to use the setWorldTramsform method of an object and update it's location in the world. Also, objects 'fall asleep'. There are 5 flags that bullet use to determine if objects can move. If a moveable object doesn't move for about 2 seconds it won't be able to move again unless an object in motion collides with it. That mean our select and reposition won't work right unless we update the flag to 'active'. javascript source code with comments can be found HERE.
Example 4
View Example
This example shows how to apply a force to an object. When the users holds down spacebar an upward force (think rocket engine) will be applied to our cube. It also has shows a nice way to embed one object in another for nice neat code. There is a 'flame' cone that you'll see coming from the cube as it blasts off. that is our embedded graphic only object. For the source code and comments go HERE.
Example 5
View Example
This example shows how to break an object apart based on an impact force, and remove it from the world. It continues from the previous examples except that now if our cube hits the world with a large force (drops from sky). It will break into rubble. The rubble also has a built in timer so it cleans up after a few seconds. Otherwise we would litter the world with rubble if we had many of these objects. The timer uses javascript promises if you don't know what they are look them up. It's a way to do asynchronous stuff. HERE.
Example 6
View Example
This example adds a button to add cubes to the world. It also adds a 'break force' to the objects. If they are struck with a force greater than their break force the object will fracture into rubble. The rubble has a random delay which causes to be removed from the world after a few seconds. This example also adds a new camera mode. You can follow the 'rocket block' by holding down the F key. HERE.
Example 7
View Example
This example introduces a gui using an overlaying second canvas element. It also supports touch and mouse events. Setup of the GUI becomes difficult because we need to manage click events now and really track where the users input (mouse or touch) is and respond differently depending. The gui buttons are javascript promises. there is a gui function that builds the frame and then new buttons are added. A few additional global variables are used to track the GUI. Going forward we'll need to clean up the global name space. One other thing is that the same click event handler is used for touch or mouse. we use a single flag to indicate if it's a touch device or not. then in the click functions events for touch events are converted to event[0] as touch events are in an array (you can have more than one finger touch the screen) while a mouse is a single object. There are lots of notes in the code that you can see HERE.
Example 8
View Example
This example uses the gamepad GUI (see below) to add a nice touch interface. you can create and smash the blocks. it also puts up some walls so because you can now use the dpad to drive around in addition to the thrust. when your main player breaks it will now regenerate. Note that the code uses Promises and CustomeEvent which are two newer ECMA technologies not supported by all browsers. For example IE on Windows < 10. To see the raw code with comments go HERE.
Example 9
View Example
Very simple example of layered canvas. Bottom layer is camera feed. Top layer is a canvas with a threejs webgl renderer. It puts a single red cube on the screen. There are physics enabled still and the ground is invisible. The effect is that a red cube drops and stops in the middle of the screen. Very similar to example 1. HERE.
Game 1
Play
work in progress. This is a simple physics game where you control a cube and shoot other cubes to break them. There is no score, life, powerups or really any point at all :). Loading the game on a touch device will cause a gameboy style gui interface to be displayed. Using on a desktop controls are arrows and the 1 and 2 number keys. Use A/1 to lift your cube into air. Use B/2 to shoot a little cube bullet (unlimited ammo). Use the dbad/arrow keys to move. Note that left and right rotate your cube forward and backwards apply force. to turn you need to rotate while applying force. Also, your cube has momentum so when you stop applying movement force it will continue to slide.View code HERE
Test Camera Access
TEST
WebRTC Is a relatively new (as of Aug 2016) tech that has good support on desktop browsers but not great for mobile. This is a test script to access the users camera using getUserMedia. The code for this test can be found HERE .
ColorTracking_basic
TRY
Click on a tennis ball as it rolls across the screen and begin to track it. This works by tracking a specific color in a video, in this case the green of the ball (or any color pixel you click). In the more advanced color tracking example the RGB and Threshold controls are exposed to the user. If you strip out comments and spaces in less than 100 lines. That's not too bad! The code for this can be found HERE .
ColorTracking
TRY
Track an object by it's color in your webcam. If you don't have a webcam then a stock video will be supplied (our friend the tennis ball again). To select the color you want to track simply click on it in the video stream. Also, you'll notice there are four sliders at the top. They control the color selection; from right to left they control RED, GREEN, BLUE and THRESHOLD. They will slide into place when you click an object, but you can also manually move them. For example when you click on a green object in the video feed the sliders will move so that the Red and Blue are low, and Green is high. The threshold will automatically go to a low level. The threshold controls how 'perfect' the match has to be between the color of the object you clicked on and the color that is tracked. If you move the threshold all the way right for example it wont track anything because you're saying: Don't be selective at all, track EVERY color. If you move the threshold all the way left you're saying only track this EXACT RGB value, which will probably be to selective so nothing will be tracked. The best is to move threshold to a low setting so that it tracks for example Greens that are relativity close to the exact green you clicked on. The code for this test can be found HERE .
ABUDLR (gamepad) GUI
View Example
ABUDLR ( A B Up Down Left Right) Is the standalone Gamepad GUI used in these examples. To use it simply imoprt the ABUDLR.js file into your main HTML.
<\script src="the/\file/\location/\ABUDLR.js">\<\/\script\>\
Then create an instance of the gamepad by doing:
var gamepad = new ABUDLR() .
By default you'll get two red buttons on the left and a black dpad on the right.
to pass custom options to the ABUDLR constructor they must be in the form of an object. By default the ABUDLR object
should be polled to get the state of the controller which is in bits (look at code here:. You can pass a callback function to the left
or the right controller which is called each time the controller state changes and the argument passed to your callback
function is the bit state of the controller. When evaluating the bit state of the controller use bit operators. For example if you have an ABUDLR object called GAMEPAD you would check if button1 on the left side is down by doing: if(GAMEPAD.leftGUI.bits & GAMEPAD.leftGUI.button1.bit){**do stuff when pressed**}
Here are some example configurations:
var GAMEPAD = new ABUDLR();
var GAMEPAD = new ABUDLR({left:{dpad:true}});
var GAMEPAD = new ABUDLR({left:{dpad:true},right:{buttons:2}});
var GAMEPAD = new ABUDLR({right:false});
var GAMEPAD = new ABUDLR({left:false});
var GAMEPAD = new ABUDLR({right:{buttons:4}});
var GAMEPAD = new ABUDLR({right:{buttons:3,button1:{color:'green'}}});
var GAMEPAD = new ABUDLR({right:{buttons:3,button1:{color:'#90C3D4'}}});
var GAMEPAD = new ABUDLR({left:{dpad:true},right:false});
var GAMEPAD = new ABUDLR({left:false,right:{buttons:1}});
var GAMEPAD = new ABUDLR({left:{callback:function()},right:{callback:function()}});
var GAMEPAD = new ABUDLR({right:{buttons:4,button1:{text:'A'},button2:{text:'B'},button3:{text:'C'},button4:{text:'D'}}});
var GAMEPAD = new ABUDLR({left:{GUILocationShift:20,callback:function()},right:{callback:function()}});
var GAMEPAD = new ABUDLR({left:{GUIsize:50,buttons:4,button1:{color:'#3699BA',textColor:'blue',text:'A'},callback:function()},right:{callback:function()}});
NEW keyUp, keyDown support now baked into ABUDLR.js dpad on the left uses W,A,S,D, dpad on the right uses arrows. Buttons on the left count from 1 up, buttons on the left count from 9 down. so A=1 on the left and A=9 on the right. Will add support to custom map. Eventually :)
you can see the raw code of the gamepad HERE In the comments at the top you will find more details about how to customize and use ABUDLR.
MultiPlayer
multi-player version of the block game deployed on Heroku HERE .
Video Peer-peer
multi-client video connection deployed on Heroku HERE .
you can find the code here: HERE .