API: AB Physics 1.0

API Uses canvas Graphics libraries AB framework Worlds using this API Starter Worlds
AB Physics 1.0 Yes Three.js, Physijs Yes 55 Worlds Starter Worlds


This API is for Three.js Worlds with physics using Physijs. It comes with an Ancient Brain framework to make writing Worlds easier.

This API has the following features:


Related APIs



Global variables

This API defines the following global variables:
 

 ABWorld;       // instance of class ABWorldClass - basic functionality for this API
 ABHandler;     // instance of class ABHandlerClass - mouse and touch handling for this API
 
 Physijs;          // from Physijs library 


The "ABWorld" object

The "ABWorld" object has the following public data, shown with default values where possible:

 
 
   ABWorld.camera;       // Three.js camera: THREE.PerspectiveCamera                 
   ABWorld.renderer;     // Three.js renderer: THREE.WebGLRenderer

   ABWorld.scene;        
		// This is a Physijs scene: Physijs.Scene
		// This is NOT a normal Three.js scene: THREE.Scene 
	
	
 // draw camera control buttons (Track/Move/Normal) or not 
 
   ABWorld.drawCameraControls = true; 	 
		
		
 // change these points to control camera movement:
  
   ABWorld.follow;               // THREE.Vector3          
   ABWorld.lookat;               // THREE.Vector3        

	  // when camera is in "Track" mode, it will look at ABWorld.follow
	  // when camera is in "Move" mode, it will position at ABWorld.follow,
	  //   and look at ABWorld.lookat
	 


The "ABWorld" object has the following public methods:

 
	
// start a 3D or 2D scene with camera on the canvas:		

   ABWorld.init3d ( startRadius, maxRadius, color );   
   ABWorld.init2d ( startRadius, maxRadius, color );  

     // startRadius = start position of camera  
     // maxRadius = camera frustum far plane  
  
 
// change the mode of the camera to Track/Move With/Normal
 
   ABWorld.cameraTrack(); 
   ABWorld.cameraMove();
   ABWorld.cameraFixed();

   
// Useful functions for finding size of loaded 3D objects.
// Size of object along each dimension.

   ABWorld.objectXsize ( theobject );
   ABWorld.objectYsize ( theobject );
   ABWorld.objectZsize ( theobject );

   
// Useful "ray casting" function for mouse/touch control of objects.
// Returns if click/tap on that x,y screen position hits object in 3D World.

   ABWorld.hitsObject ( x, y, theobject );		 // boolean 


The "ABHandler" object

The "ABHandler" object implements mouse and touch event handling. The default is that mouse and touch control the camera, but this can be overridden.

The "ABHandler" object has the following public data. Default values are shown. These can be changed.

 
   
// multiply mouse scroll by some factor to increase/decrease how much camera zooms:

   ABHandler.SCROLLFACTOR = 1;          	 

// multiply touch pinch by some factor to increase/decrease how much camera zooms:

   ABHandler.PINCHFACTOR  = 1;           	 	
	
// for 2D worlds, multiply mouse (or touch) drag by some factor to increase/decrease how much camera moves:
 
   ABHandler.DRAGFACTOR   = 1;            	 

   
// maximum position of camera:

   ABHandler.MAXCAMERAPOS;    // given some sensible default depending on World   

   
// does a "ground" exist at altitude zero (that camera should not zoom below):

   ABHandler.GROUNDZERO = false;
	


The "ABHandler" object defines the following functions for mouse and touch events to move the camera by default. To override this, and do your own mouse and touch event handling, simply redefine these functions:

 

  ABHandler.initMouseDrag = function ( x, y )  { your code };    
    // start drag now, at screen position x,y   

  ABHandler.mouseDrag     = function ( x, y )  { your code };   
    // drag went to new screen position x, y  
 
  ABHandler.mouseZoom     = function ( delta ) { your code };
    // zoom in or out by some amount 
    // the amount is set up for camera zoom 
    // for other usage of zoom, maybe just ignore delta, or only look at its sign  

	
  ABHandler.initTouchDrag = function ( x, y )  { your code };
  ABHandler.touchDrag     = function ( x, y )  { your code };
  ABHandler.touchZoom     = function ( delta ) { your code };
    

Optional: Customising scene, camera, renderer

The functions init3d and init2d create default forms of scene, camera and renderer. If you want a customised form of these, define the variable before calling init3d or init2d, and then your version will be used, not the default. Example:
 
ABWorld.renderer = new THREE.WebGLRenderer ( { antialias: true } );
ABWorld.init3d ( startRadius, maxRadius, color ); 

Optional: With custom renderer, set preserveDrawingBuffer for performance

If you are not customising renderer, but rather using init3d and init2d, then ignore this section.

This API uses an edited version of Three.js with the THREE.WebGLRenderer property "preserveDrawingBuffer" set to true. This is needed to allow the site generate a World image screenshot from the canvas. This may lead to lower performance, though.

If you are not customising renderer, but rather using init3d and init2d, this issue is taken care of automatically - preserveDrawingBuffer is true on "generate image" runs and false on normal runs.

If you are customising renderer, you will need to manage preserveDrawingBuffer yourself. It will be true by default. You can set it to false:

 
ABWorld.renderer = new THREE.WebGLRenderer ( { preserveDrawingBuffer: false } );
But then your World cannot have a screenshot. So a better approach is to set it to true for "generate image" runs and false for normal runs, which can be done as follows:
 
if ( AB.isScreenshotRun() ) ABWorld.renderer = new THREE.WebGLRenderer ( { preserveDrawingBuffer : true } );
else                        ABWorld.renderer = new THREE.WebGLRenderer ( { preserveDrawingBuffer : false } );

Templates


Examples

Examples of Worlds that use this API:


Infinite World O...
By Enhanced  
Here is a code to get an infinite world that loop without object in it, without the sun
Bouncy Balls
By Starter user  
Demo of Physics API. Balls bounce under gravity and collide in low friction world. Splash screen...
Infinite World G...
By Enhanced  
Here is a code to get an infinite world that loop without object in it, and with the sun
First Person Con...
By Enhanced  
First person view with mouse controls. Use WASD or Arrows to move, mouse to look around and spac...
Collision World
By Starter user  
Demo of Physics API. Blocks fall under gravity and collide. Can modify gravity, friction, etc. S...

The background is a program, showing the JavaScript graphics used on this site.
 
Font:

© Ancient Brain Ltd. All rights reserved.

Ancient Brain ™ is a trademark of Ancient Brain Ltd.

Beta      Bug bounty      Contact      Stats      The name      Terms and conditions