Question

Sorry for asking what is probably a very simple noob question.

I have a view, which creates geometries within a Three.js renderer – the view renders successfully the first time around. However, subsequent calls to the render function fail with an unknown reference error.

I am trying to store a reference to the rendered geometry within the view rather than the model as the model is shared between multiple browsers (and indeed the server) – using Backboneio.js

The view looks like this:

StarSystem.hudContact = BackboneIO.View.extend({
  el: '',
  model: '',
  initialize: function(options) {
    var material = new THREE.LineBasicMaterial({
      color: 0xFFFFFF,
    });

    var geometry = new THREE.Geometry();
    geometry.vertices.push(new THREE.Vector3(0, 0, 0));
    geometry.vertices.push(new THREE.Vector3(0, 0, ((camera[0].position.z - this.model.get('zPos')) / 10000)));

    var line = new THREE.Line(geometry, material);
    line.position.x = ((camera[0].position.x - this.model.get('xPos')) / 10000);
    line.position.y = ((camera[0].position.y - this.model.get('yPos')) / 10000);
    line.position.z = 0;
    line.Name = this.model.get('Name');

    this._hudLine = hudScene.add(line);
    this.model.bind('update', this.render, this);
  },
  render: function(){
  console.log(this._sceneLine.position.x);
    this._hudLine.position.x = ((camera[0].position.x - this.model.get('xPos')) / 10000);
    this._hudLine.position.y = ((camera[0].position.y - this.model.get('yPos')) / 10000);
    this._hudLine.position.z = 0;

  }
});

So, as can be seen, I am trying to store a reference to the line (line) in this._hudLine – which is known on the first render (during the initialize call), but not thereafter (in the render call).

Any direction on how to handle this without having to rely on a global array or storing information within the model would be greatly appreciated…

Thanks!

Answer 1

This was solved with reference to the following article:

Private and public variables to a backbone view

However, I think the fundamental issue was with the original template which wrapped the view in a self executing function:

(function () {
  //view stuff
}).call(this);

rather than:

(function () {
  //view stuff
})();

A noob problem – many thanks for your help!