Question

我在不同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") });

任何帮助都会非常感激。

提前致谢。

Answer 1

el属性只需要一个jQuery样式选择器字符串。尝试：

var morphableBody = new BodyShapeView({ el: "#morphable-body" });
var bodyShapeView = new BodyShapeView({ el: "#mean-body" });

<强>更新

此外，您的问题可能是您在定义this，scene和camera时未使用renderer关键字。可能是第二个视图正在覆盖第一个视图。尝试：

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 );

Answer 2

在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中的一个特殊变量，如果您想将模型传递给视图，则应小心处理。

backbone.js - 具有相同视图的多个实例

2 个答案: