Greetings,
Currently, I am engaged in a series of experiments to refresh my JavaScript knowledge, explore the capabilities and purposes of AngularJS, and delve into ThreeJS. Normally, my programming involves OpenGL/MFC in C++, but I have dabbled in php/js/html5 in the past.
My current challenge is wrapping some ThreeJS within an AngularJS Controller's $scope object.
The error message displayed in the Chrome JS debugger reads:
'Uncaught TypeError: Failed to execute 'requestAnimationFrame' on 'Window': The callback provided as parameter 1 is not a function'
Below is a snippet of the code:
<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);
// Creating 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>
Right now, I am faced with a static, non-spinning cube - it only renders once.
I believe the root of the problem lies in my lack of understanding about how JavaScript functions rather than any specific coding issue.
Your guidance would be greatly appreciated!