backbone.js - Having multiple instances of the same view
- by TrueWheel
I am having problems having multiple instances in of the same view in different div elements. When I try to initialize them only the second of the two elements appear no matter what order I put them in.
Here is the code for my view.
var BodyShapeView = Backbone.View.extend({
thingiview: null,
scene: null,
renderer: null,
model: null,
mouseX: 0,
mouseY: 0,
events:{
'click button#front' : 'front',
'click button#diag' : 'diag',
'click button#in' : 'zoomIn',
'click button#out' : 'zoomOut',
'click button#on' : 'rotateOn',
'click button#off' : 'rotateOff',
'click button#wireframeOn' : 'wireOn',
'click button#wireframeOff' : 'wireOff',
'click button#distance' : 'dijkstra'
},
initialize: function(name){
_.bindAll(this, 'render', 'animate');
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 15, 400 / 700, 1, 4000 );
camera.position.z = 3;
scene.add( camera );
camera.position.y = -5;
var ambient = new THREE.AmbientLight( 0x202020 );
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.75 );
directionalLight.position.set( 0, 0, 1 );
scene.add( directionalLight );
var pointLight = new THREE.PointLight( 0xffffff, 5, 29 );
pointLight.position.set( 0, -25, 10 );
scene.add( pointLight );
var loader = new THREE.OBJLoader();
loader.load( "img/originalMeanModel.obj", function ( object ) {
object.children[0].geometry.computeFaceNormals();
var geometry = object.children[0].geometry;
console.log(geometry);
THREE.GeometryUtils.center(geometry);
geometry.dynamic = true;
var material = new THREE.MeshLambertMaterial({color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors });
mesh = new THREE.Mesh(geometry, material);
model = mesh;
// model = object;
scene.add( model );
} );
// RENDERER
renderer = new THREE.WebGLRenderer();
renderer.setSize( 400, 700 );
$(this.el).find('.obj').append( renderer.domElement );
this.animate();
},
Here is how I create the instances
var morphableBody = new BodyShapeView({ el: $("#morphable-body") });
var bodyShapeView = new BodyShapeView({ el: $("#mean-body") });
Any help would be really appreciated.
Thanks in advance.
