在 ThreeJS 中随时间改变 Collade 对象的位置

Question

我正在使用 elf 示例，它是 ThreeJS

的标准示例

我想在 x 和 y 方向上移动对象，而不是示例中所示的旋转。这应该可以通过更改 init() 函数中的 elf.position.x 和 elf.position.y 来实现。

我面临的这个问题是，我创建了一个创建小精灵的方法的对象 (class)，这样我就可以创建多个小精灵。我还有一个函数可以随时间移动对象。 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
    }
}

希望有人能帮忙。

Answer 1

我已经编辑了您的示例代码以展示如何在 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 仍然引用正在构造的对象实例。应该更多地解释范围界定的差异。

希望对您有所帮助！如果有任何不清楚的地方，请告诉我。

在 ThreeJS 中随时间改变 Collade 对象的位置

Change position of Collade object over time in ThreeJS

javascript

loader

collada

three.js