3DObjectView.js

/*
 * THREEDObjectView.js
 *
 */

var THREEDObjectView = Backbone.View.extend({
	'defaults': {
		'sceneWidth': 600,
		'sceneHeight': 600
	},
	'events': {},

	'initialize': function(options) {
		_.extend(this.defaults, this.options);
		_.bindAll(this, 'render', 'renderScene');
		this.render();

		log('Backbone : THREEDObjectView : Initialized');
	},

	'render': function() {
		var view = this;


		//set the scene size
		view.WIDTH = this.defaults.sceneWidth;
		view.HEIGHT = this.defaults.sceneHeight;

		//set some camera attributes
		view.VIEW_ANGLE = 60;
		view.ASPECT = view.WIDTH / view.HEIGHT;
		view.NEAR = 0.1;
		view.FAR = 10000;

		//create a WebGL renderer, camera
		//and a scene
		view.renderer = new THREE.WebGLRenderer();
		view.camera = new THREE.PerspectiveCamera(view.VIEW_ANGLE, view.ASPECT, view.NEAR, view.FAR);
		view.scene = new THREE.Scene();

		//add the camera to the scene
		view.scene.add(view.camera);

		//the camera starts at 0,0,0
		//so pull it back
		view.camera.position.x = 0;
		view.camera.position.y = 0;
		view.camera.position.z = 20;

		view.fps = new FPSView({ 'el': this.el });

		if (view.options.useRAF) {
			view.animate.call(view, true);
		} else {
			//setInterval(view.animate, 100);
		}

		//start the renderer
		view.renderer.setSize(view.WIDTH, view.HEIGHT);

		//attach the render-supplied DOM element
		this.$el.append(view.renderer.domElement);

		//load the 3D object
		view.jsonLoader = new THREE.JSONLoader();
		view.jsonLoader.load('files/elephant.js', view.renderScene);

	},
	'animate': function() {
		var view = this;
		log(this);
		//fps vars
		//view.fps.update();

		if (view.options.useRAF) {
			//requestAnimationFrame(view.animate);
		}
		//view.camera.position.x = (view.camera.position.x >= 20) ? 0 : (view.camera.position.x + 1);
		view.camera.position.z = (view.camera.position.z >= 40) ? 20 : (view.camera.position.z + 1);
		view.renderer.render(view.scene, view.camera);
	},
	'renderScene': function(geometry) {
		var view = this;

		view.mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial());

		//add the sphere to the scene
		view.scene.add(view.mesh);

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

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

		//add to the scene
		view.scene.add(view.pointLight);

		//render
		view.renderer.render(view.scene, view.camera);
	},
	'unrender': function() {
		log('todo');
	}

});