具有同一视图的多个实例
Having multiple instances of the same view
我在不同的div 元素的同一视图中有多个实例时遇到问题。当我尝试初始化它们时,无论我将它们按什么顺序排列,都只会出现两个元素中的第二个。
这是我视图的代码。
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();
},
以下是我创建实例的方式
var morphableBody = new BodyShapeView({ el: $("#morphable-body") });
var bodyShapeView = new BodyShapeView({ el: $("#mean-body") });
任何帮助将不胜感激。
提前谢谢。
在 initialize
方法中,您可以访问全局变量而不是实例变量:scene = new THREE.Scene();
实际上将引用window.scene
。
检查此示例
var BodyShapeView = Backbone.View.extend({
scene:null,
initialize:function(opts) {
scene=opts.scene;
}
});
var s1=new BodyShapeView({scene:'s1'});
var s2=new BodyShapeView({scene:'s2'});
console.log(window.scene); //outputs s2
console.log(s1.scene); //outputs null
http://jsfiddle.net/K8tjJ/1/
将这些引用更改为 this.scene
、 this.camera
等。
var BodyShapeView = Backbone.View.extend({
scene:null,
initialize:function(opts) {
this.scene=opts.scene;
}
});
var s1=new BodyShapeView({scene:'s1'});
var s2=new BodyShapeView({scene:'s2'});
console.log(window.scene); //outputs undefined
console.log(s1.scene); //outputs s1
http://jsfiddle.net/K8tjJ/2/
此外,loader.load
使用回调来处理其结果,您将(可能)丢失对函数中this
的引用。尝试
var _this=this;
loader.load( "img/originalMeanModel.obj", function ( object ) {
...
_this.scene.add( _this.mesh ); // or _this.model if you prefer, but beware
});
请注意,this.model
是 Backbone.View 中的一个特殊变量,如果要将模型传递给视图,则应小心处理。
el
属性只需要一个 jQuery 样式选择器字符串。尝试:
var morphableBody = new BodyShapeView({ el: "#morphable-body" });
var bodyShapeView = new BodyShapeView({ el: "#mean-body" });
更新
此外,您的问题可能是您在定义 scene
、camera
和 renderer
时没有使用 this
关键字。结果可能是第二个视图覆盖了第一个视图。尝试:
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera( 15, 400 / 700, 1, 4000 );
...
// RENDERER
this.renderer = new THREE.WebGLRenderer();
this.renderer.setSize( 400, 700 );
$(this.el).find('.obj').append( this.renderer.domElement );
相关文章:
- UI5 路由不实例化视图
- 挖空视图模型函数仅影响最后一个实例
- 挖空.js:等待视图模型实例化完成
- 如何在Backbone中创建自实例化视图
- 计数或选择主干视图实例
- 为什么我在尝试实例化一个空的backbone.js视图时出现类型错误
- 主干视图实例未按预期工作
- Aurelia组件在其他视图模型中使用时不共享实例
- 使用ng repeat添加多个视图实例时的范围界定问题
- 主干选项卡内部使用的同一视图的多个实例
- backbone.js未捕获类型parentView尝试实例化子视图时出错
- 我们如何在 javascript 对象中使用字符串名称存储创建 Backbone 视图的实例
- 为下一次实例化设置的主干视图属性
- 具有同一视图的多个实例
- ExtJS 多视图实例
- 从实例获取主干视图的父类
- 主干 - 实例化视图包含旧数据
- 使用主干.js中的路由管理单页应用程序中的多个视图实例
- 如何在 Angularjs 视图中删除 dom 实例
- 从视图中访问另一个操作实例变量