Question

我正在使用3.js库，我正处于将对象/形状实际渲染到屏幕的阶段，呈现如下：

在我正在使用它的tutorial中有一些代码用于在x和y轴上旋转立方体：

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

如果我将它添加到渲染函数中，则可以这样工作：

var render = () => {
  requestAnimationFrame(render);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  this.renderer.render(this.scene, this.camera);
};

但是我希望在动画方法中保持灵活性，并将任何旋转或其他任何东西作为要在渲染函数内执行的函数传递。我试过这样做：

var render = (animation) => {
  requestAnimationFrame(render);
  animation();
  this.renderer.render(this.scene, this.camera);
};
render(this.animation(cube));

我可以看到，代码作为一个函数正确地执行一次，但随后每次都说它不是一个函数。

我在这里缺少什么，我怎样才能确保每次都将其作为一个函数执行？

由于

修改

来自Engineer和sdgluck的回答这是我认为他们的意思，但它仍然无效：

var render = (animation) => {
  requestAnimationFrame(render);
  animation();
  this.renderer.render(this.scene, this.camera);
};
render(() => this.animation(cube));

编辑2

这是创建多维数据集并尝试为其设置动画的服务中的所有代码：

export class ThreeService {

    constructor() {
        this.scene;
        this.aspect;
        this.camera;
        this.renderer;
    }

    /*
        Creates the scene, the camera and the renderer
    */
    setup() {
        this.createScene();
        this.createCamera();
        this.createRenderer();
    }

    createScene() {
        this.scene = new THREE.Scene();
    }

    createCamera() {
        // This is the viewpoint that the users are looking from
        this.camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight, 1,10000);
    }

    createRenderer() {
        this.renderer = new THREE.WebGLRenderer();
        this.renderer.setSize( window.innerWidth, window.innerHeight );
        document.getElementById('model').appendChild( this.renderer.domElement );
    }

    createCube() {
        // Creates the basic structure of the cube
        var geometry = new THREE.BoxGeometry(700, 700, 700, 10, 10, 10);

        // Adds colour to the cube using materials
        var material = new THREE.MeshBasicMaterial({color: 0xfffff, wireframe: true});

        // Cubes needs a geometry and a material to be rendered
        var cube = new THREE.Mesh(geometry, material);
        this.addObjToScene(cube);
        this.positionCamera(1000);

        var render = (animation) => {
            debugger
            requestAnimationFrame(render);
            animation();
            this.renderer.render(this.scene, this.camera);
      };
      render(() => {this.animation(cube)});
    }

    animation(obj) {
        obj.rotation.x += 0.01;
        obj.rotation.y += 0.01;
    }

    addObjToScene(obj) {
        // They then needed added to the scene
        if(!this.scene) 
            this.setup();
        // By default the add function adds the obj to the coordinates 0,0,0
        this.scene.add(obj);
    }

    positionCamera(zPos) {
        if(!this.camera)
            this.setup();
        this.camera.position.z = zPos;
    }

    rotateObj(obj,x,y) {
        obj.rotation.x += x;
        obj.rotation.y += y;
    }

}

这是出现的错误代码：

EXCEPTION: TypeError: animation is not a function
browser_adapter.js:84EXCEPTION: TypeError: animation is not a functionBrowserDomAdapter.logError @ browser_adapter.js:84
browser_adapter.js:84STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.js:84
browser_adapter.js:84TypeError: animation is not a function
    at render (three.service.js:49)
    at ZoneDelegate.invokeTask (zone.js:356)
    at Object.onInvokeTask (ng_zone_impl.js:44)
    at ZoneDelegate.invokeTask (zone.js:355)
    at Zone.runTask (zone.js:256)
    at ZoneTask.invoke (zone.js:423)
BrowserDomAdapter.logError @ browser_adapter.js:84
Subscriber.js:229
Uncaught TypeError: animation is not a function

Answer 1

我猜this.animation(cube)不会返回您希望在render内部调用的函数（animation();）。可能的解决方法可能是：

render(() => {
    this.animation(cube);
});

Answer 2

@Engineer提供了一个解决方案，但没有解释您的共享示例无法正常工作的原因是您正在调用this.animation ，而不是传递引用功能或包装它的功能（如@ Engineer的答案）。

传递给箭头函数时执行函数作为参数 - ES6

2 个答案: