ThreeJS 作为 AngularJS 范围对象 - requestAnimationFrame 无法识别回调

Question

早上好，

我正在做一些实验来复习我的 JS 知识，弄清楚 AngularJS 可以 do/is 做什么，并掌握 ThreeJS - 通常我用 C++ 编写 OpenGL/MFC ,不过我以前写过一点php/js/html5

我正在尝试将一些 ThreeJS 包装在 AngularJS 控制器的 $scope 对象中。

Chrome JS 调试器中的错误是

'Uncaught TypeError: Failed to execute 'requestAnimationFrame' on 'Window': The callback provided as parameter 1 is not a function'

这是一些代码。

<script type="text/javascript">
    var appMain = angular.module("myApp", []);

    appMain.controller("myCtrl", function($scope) {

        // WebGL via THREEJS
        $scope.threejs = {
            width:640,
            height:480,
            scene: null,
            camera: null,
            renderer: null,
            box:null,
            initialise: function()
            {
                this.scene = new THREE.Scene();
                this.camera = new THREE.PerspectiveCamera(75, this.width/this.height, 0.1, 100);
                this.renderer = new THREE.WebGLRenderer();

                this.renderer.setSize(this.width, this.height);

                document.body.appendChild(this.renderer.domElement);

                // Create a Spinning Cube
                var geom = new THREE.BoxGeometry(1,1,1);
                var material = new THREE.MeshLambertMaterial({color:'blue'});

                this.box = new THREE.Mesh(geom, material);

                this.scene.add(this.box);

                this.camera.position.z = 5;
            },
            render: function()
            {
                requestAnimationFrame(this.render);

                this.box.rotation.x += 0.1;
                this.box.rotation.y += 0.1;

                this.renderer.render(this.scene, this.camera);
            }
        };

        $scope.threejs.initialise();
        $scope.threejs.render();
    });



</script>

..我得到一个静态的、不旋转的立方体——即它只渲染一次。

我认为这个错误与我对 Javascript 的工作方式的误解有关，而不是其他任何事情。

请帮忙！

Answer 1

One of the related questions on the panel on the right suggested:

requestAnimationFrame(this.render.bind(这个));

现在我的立方体开始旋转了。我很高兴。现在我将围绕 bind().

做一些研究

ThreeJS 作为 AngularJS 范围对象 - requestAnimationFrame 无法识别回调

ThreeJS as AngularJS Scope Object - requestAnimationFrame doesn't recognize callback

javascript

three.js

requestanimationframe

angularjs

angularjs-scope