Question

我想在＆＃34; Scenemanager＆＃34;中使用THREE JSONLoader。处理所有对象和模型的添加和删除的对象，主要用于学习OOP，JS和Threejs。

我创建App3D（管理场景）并加载调用应该使用相应路径加载资源的App3D函数，并将其添加到构造函数中定义的场景和对象数组中。当我使用this.scene时，我总是得到一个未定义的，我想我错过了一个关于外壳如何工作的基本OOP / JS概念。任何帮助都会被激活。

app.js

window.onload = () => {

  let app = new App3D(); 
  app.loadModel('/assets/models/model.json');

}

在app3D中我做了所有初始化的Threejs，添加场景，灯光，相机和渲染器以及存储所有添加对象的数组actor

app3D.js

class App3D{
  constructor() {
    this.loader = new THREE.JSONLoader();
    this.scene = new THREE.Scene();
    this.objects = [];

    this.createScene();
  }

  createScene(){
    // does all the camera and renderer initialzation etc
  }

  loadModel(model){
    this.loader.load(model, function(geometry, materials){
      let material = new THREE.MultiMaterial( materials );
      let mesh = new THREE.Mesh( geometry, material );
      this.scene.add(mesh);
      this.objects.push(mesh);
    });
  }

  render() {
   // request animation frame render etc
}

Answer 1

由于您同时使用了箭头函数() => { ... }和经典函数function () { ... }，因此您想要了解它们之间的差异，尤其是this被关注到。 Further reading

使用箭头函数，this来自定义函数的上下文：

class Foo {
  constructor (el) {
    var foo = this;
    el.addEventListener('click', () => {
      // foo === this
    });
  }
}

使用经典函数，this来自调用对象，因此对于事件侦听器，您通常需要绑定函数或将this存储在外部作用域中。

class Foo {
  constructor (el) {
    var foo = this;
    el.addEventListener('click', function () {
      // foo !== this
    });
  }
}

-

class Foo {
  constructor (el) {
    var foo = this;
    el.addEventListener('click', function () {
      // foo === this
    }.bind(this));
  }
}

在loadModel函数中，您需要以上述方式之一存储或绑定this。

Threejs JSONLoader和OOP，如何将模型附加到场景（来自加载器回调）

1 个答案: