我使用的小精灵示例是ThreeJS
的标准示例我希望沿x和y方向移动对象,而不是示例中所示的旋转。这应该可以通过在init()函数中更改elf.position.x
和elf.position.y
来实现。
我面对的这个问题是我创建了一个创建elf的方法的对象(类),因此我可以创建多个方法。我还有一个功能,可以随着时间的推移移动对象。 var e
在移动功能中不可访问。当我将其更改为this.e
并将此e = collada.scene;
更改为this.e = collada.scene;
时,出现以下错误:Uncaught TypeError: Cannot set property 'e' of undefined
代码:
class DrawElf {
constructor(scene) {
var e;
this.loadingManager = {};
this.loader = {};
this.scene = scene;
// loading manager
this.loadingManager = new THREE.LoadingManager(function () {
scene.add(e);
});
// collada
this.loader = new THREE.ColladaLoader(this.loadingManager);
this.loader.load('./models/collada/elf/elf.dae', function (collada) {
e = collada.scene;
e.scale.set(30, 30, 30);
e.position.set(100, 10, 100);
e.name = "elf.dae" + 0 + 0;
e.traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.name = e.name;
ToIntersect.push(child);
}
});
});
}
move(time) {
// i want to move the object
}
}
希望有人可以提供帮助。
答案 0 :(得分:0)
我已经编辑了您的示例代码,以显示如何在move()
函数中访问elf模型,并在下面的注释中进行了更改。
class DrawElf {
constructor(scene) {
// Change 1: Place the `e` variable on `this` so it's accessible
// from member functions like `move`
this.e = null;
this.loadingManager = {};
this.loader = {};
this.scene = scene;
// Change 2: Use arrow functions instead so that the scope of the
// constructor is retained in the callback and `this` still references
// the new `DrawElf` instance
// collada
this.loader = new THREE.ColladaLoader();
this.loader.load('./models/collada/elf/elf.dae', (collada) => {
this.e = collada.scene;
this.e.scale.set(30, 30, 30);
this.e.position.set(100, 10, 100);
this.e.name = "elf.dae" + 0 + 0;
this.e.traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.name = this.e.name;
ToIntersect.push(child);
}
});
// Change 3: Remove the loading manager because it's not needed to
// add the elf to the scene and instead do so here
scene.add(this.e);
});
}
move(time) {
// Change 4: Check if the scene has been loaded before trying to move
// the model
if (this.e) {
// move the model here
}
}
}
这里最大的变化是使用箭头函数而不是原始的Javascript函数,因此this
仍引用正在构造的对象实例。 This SO answer应该在范围界定上多说明一些差异。
希望这会有所帮助!让我知道是否有任何不清楚的地方。