上午,
我正在做一些实验来修改我的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工作的误解有关,而不是与其他任何事情有关。
请帮忙!
答案 0 :(得分:3)
One of the related questions on the panel on the right suggested:
requestAnimationFrame(this.render.bind(本));
现在我的立方体旋转了。我很高兴。现在我将围绕bind()
进行一些研究。