library logo


Module: Event

Provides the Events object to bind events to the canvas to interact with 3D objects. The first parameter of each event callback function is an event wrapper object that contains as properties:

Events Method: create

Creates a set of events for the given domElement that can be handled through a callback.


PhiloGL.Events.create(app, options);	


  1. app - (element) A PhiloGL application.
  2. options - (object) An object containing the following options:



You can also provide callback functions for the events you need to handle. The first parameter of the callback is the event object described here. If pick is set to true in the options, then the second parameter of the callback may be an O3D that is the target of the mouse event. If no target exists for the mouse event then a falsy value will be provided. The following callbacks are:


Even though the Events object is accessible via the PhiloGL function the events should be set in the PhiloGL constructor.


Setting rotation and zoom to a moon object with drag and drop and mousewheel events.

    var pos, camera, moon, app;
    //create and assign variables to objects...

    PhiloGL.Events.create(app, {
      onDragStart: function(e) {
        pos = {
          x: e.x,
          y: e.y
      onDragMove: function(e) {
        var z = camera.position.z,
            sign = Math.abs(z) / z;

        moon.rotation.y += -(pos.x - e.x) / 100;
        moon.rotation.x += sign * (pos.y - e.y) / 100;
        pos.x = e.x;
        pos.y = e.y;
      onMouseWheel: function(e) {
        camera.position.z += e.wheel;