1

異なる div 要素の同じビューに複数のインスタンスがあるという問題があります。それらを初期化しようとすると、どの順序で配置しても、2 つの要素の 2 番目のみが表示されます。

これが私の見解のコードです。

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

どんな助けでも本当に感謝しています。

前もって感謝します。

4

2 に答える 2

1

このel属性には、jQuery スタイル セレクター文字列のみが必要です。試す：

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

アップデート

また、 、、および をthis定義するときにキーワードを使用していないことが問題である可能性があります。結果として、2 番目のビューが最初のビューを上書きしている可能性があります。試す：scenecamerarenderer

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 );
于 2012-06-27T15:14:11.437 に答える
1

あなたの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

});

は Backbone.View の特別な変数であり、ビューにモデルを渡したい場合は注意this.modelして扱う必要があります。

于 2012-06-27T15:29:23.970 に答える