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

时间:2015-04-17 08:18:35

标签: javascript angularjs three.js angularjs-scope requestanimationframe

上午,

我正在做一些实验来修改我的JS知识,弄清楚AngularJS可以做什么/是什么,并掌握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工作的误解有关,而不是与其他任何事情有关。

请帮忙!

1 个答案:

答案 0 :(得分:3)

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

requestAnimationFrame(this.render.bind(本));

现在我的立方体旋转了。我很高兴。现在我将围绕bind()进行一些研究。