Morning,
I'm doing some experiments to revise my JS knowledge, figure out what AngularJS can do/is for, and get a grip on ThreeJS - normally I write OpenGL/MFC in C++, but I've written a little php/js/html5 in the past.
I'm trying to wrap some ThreeJS in an AngularJS Controller's $scope object.
The error in the Chrome JS debugger is
'Uncaught TypeError: Failed to execute 'requestAnimationFrame' on 'Window': The callback provided as parameter 1 is not a function'
Here's some 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);
// 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>
..I get a static, non spinning cube - i.e. it renders only once.
I think the error is more related to my misunderstanding of the workings of Javascript than to do with anything much else.
Please help!
