simple threejs plugin for jquery.

gldev.jquery.js

// RequestAnimationFrame shim - Source: http://paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = ( function( callback ) {
	return window.requestAnimationFrame ||
	window.webkitRequestAnimationFrame ||
	window.mozRequestAnimationFrame ||
	window.oRequestAnimationFrame ||
	window.msRequestAnimationFrame ||
	function ( callback ) {
		window.setTimeout( callback, 1000 / 60 );
	};
})();

(function ( $ ) {

    $.widget( "gldev.greenbox", {

        options: {
            scene: null,
            renderer: null,
            cube: null,
            camera: null
        },


        _create: function() {

            console.log("_create scene");

            this.options.scene = new THREE.Scene();

            var geometry = new THREE.BoxGeometry(1,1,1);

            // create the sphere's material
            var material =
              new THREE.MeshLambertMaterial(
                {
                  color: 0x00ff00
                });

            this.options.cube = new THREE.Mesh( geometry, material );
            this.options.scene.add( this.options.cube );

            this.options.camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
            this.options.camera.position.z = 5;

            // create a point light
            var pointLight =
              new THREE.PointLight(0xFFFFFF);

            // set its position
            pointLight.position.x = 10;
            pointLight.position.y = 50;
            pointLight.position.z = 130;

            // add to the scene
            this.options.scene.add(pointLight);

            this.options.renderer = new THREE.WebGLRenderer({ alpha: false });
            this.options.renderer.setSize( window.innerWidth, window.innerHeight );
            this.element.append(this.options.renderer.domElement);

            this.animloop();

        },

        // Create a public method.
        scene: function( scene ) {
            // No value passed, act as a getter.
            if ( scene === undefined ) {
                return this.options.scene;
            // Value passed, act as a setter.
            } else {
                this.options.scene = scene;

            }
        },

        // Create a public method.
        renderer: function( renderer ) {
            // No value passed, act as a getter.
            if ( renderer === undefined ) {
                return this.options.renderer;
            // Value passed, act as a setter.
            } else {
                this.options.renderer = renderer;

            }
        },

         // Create a public method.
        cube: function( cube ) {
            // No value passed, act as a getter.
            if ( cube === undefined ) {
                return this.options.cube;
            // Value passed, act as a setter.
            } else {
                this.options.cube = cube;

            }
        },

         // Create a public method.
        camera: function( camera ) {
            // No value passed, act as a getter.
            if ( camera === undefined ) {
                return this.options.camera;
            // Value passed, act as a setter.
            } else {
                this.options.cube = camera;

            }
        },

        animloop: function() {
            // this is not obvious and it took alot of research
            // you need to bind to its self
            requestAnimFrame(this.animloop.bind(this));
            this.options.renderer.render(this.options.scene, this.options.camera);
            this.options.cube.rotation.x += 0.01;
            this.options.cube.rotation.y += 0.01;
        }

    });


}( jQuery ));