(I found this example online, but it's not working as expected). I am attempting to incorporate AngularJS for implementing an MVC architecture for three.js files. Despite not encountering any errors during debugging, I am unable to see the rendered geometry (cube). Here is a snippet of my JS file...
var newApp = angular.module('new', ['ngRoute','newServices']);
newApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {templateUrl:"views/main.html", controller:'mainCtrl'});
$locationProvider.html5Mode(false);
}]);
newApp.controller('mainCtrl', ['$scope', 'renderFactory', function ($scope, renderFactory) {
$scope.text = 'Hello';
init();
function init() {
renderFactory.createCamera();
renderFactory.createCube();
renderFactory.setup();
renderFactory.paint();
}
} ]);
My factory file...
var xrotation;
var yrotation;
var zrotation;
var WIDTH = 800;
var HEIGHT = 600;
var ASPECT = WIDTH / HEIGHT;
var renderer = new THREE.WebGLRenderer();
var scene = new THREE.Scene();
var camera;
var cube;
var newServices = angular.module('newServices', []);
newServices.factory('renderFactory', function () {
return {
createCube: function () {
// define cube variables
var length = 50;
var segments = 16;
// create cube material
var sphereMaterial = new THREE.MeshLambertMaterial({ color: 0xFF0000 });
// create a new mesh with cube geometry -
cube = new THREE.Mesh(new THREE.CubeGeometry(15, 15, 15), sphereMaterial);
//Set Cube Rotation
//cube.rotation.x += 0.2;
//cube.rotation.y += 0.3;
//cube.rotation.z += 0.1;
scene.add(cube);
},
createCamera: function () {
// set camera attributes
var VIEW_ANGLE = 40;
var NEAR = 0.1;
var FAR = 10000;
// create a WebGL camera
camera = new THREE.PerspectiveCamera(VIEW_ANGLE,
ASPECT,
NEAR,
FAR);
// the camera starts at 0,0,0 so move it back
//camera.position.z = 250;
// add the camera to the scene
scene.add(camera);
},
paint: function () {
// render the scene
renderer.render(scene, camera);
},
setup: function () {
// initialize the renderer
renderer.setSize(WIDTH, HEIGHT);
document.getElementById('container1').appendChild(renderer.domElement);
}
};
});
What did I miss or where did I go wrong???