JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<body ng-app="new">
<div id="container1" ng-controller="mainCtrl"></div>
</body>
JavaScript
var newApp = angular.module('new', []);
newApp.controller('mainCtrl', ['$scope', 'renderFactory', function ($scope, renderFactory) {
$scope.text = 'Hello';
console.log('in');
init();
function init() {
renderFactory.createCamera();
renderFactory.createCube();
renderFactory.setup();
renderFactory.paint();
}
}]);
newApp.factory('renderFactory', function renderFactory() {
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;
return {
createCube: function () {
// set up the cube vars
var length = 50;
var segments = 16;
// create the cube's material
var sphereMaterial = new THREE.MeshLambertMaterial({
color: 0xFFFFFF
});
// create a new mesh with cube geometry -
cube = new THREE.Mesh(new THREE.BoxGeometry(15, 15, 15), sphereMaterial);
//Set Cube Rotation
cube.rotation.x += 0.2;
cube.rotation.y += 0.3;
cube.rotation.z += 0.1;
scene.add(new THREE.AmbientLight(0xFF0000));
scene.add(cube);
},
createCamera: function () {
// set some 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 pull it back
camera.position.z = 250;
// and the camera
scene.add(camera);
},
paint: function () {
// draw!
renderer.render(scene, camera);
},
setup: function () {
//...