Pure THREE.JS template
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js">
</script>
<div id="webgl"></div>
JavaScript
var scene,controls,camera,renderer;
var step = 500;
var a = 0;
var b;
var fs = [
[ [], [], [] ],
[ [], [], [] ],
[ [], [], [] ]
];
init();
animate();
function init()
{
var webglEl = document.getElementById('webgl');
var width = window.innerWidth,
height = window.innerHeight;
// Earth params
var radius = 0.5,
segments = 32,
rotation = 6;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, width / height, 0.01, 1000);
camera.position.z = 8;
renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
scene.add(new THREE.AmbientLight(0x333333));
scene.add(new THREE.AmbientLight(0xf000ff) );
scene.add( new THREE.AxisHelper(5,5,5) );
create();
console.clear();
console.log(fs[0][0]);
controls = new THREE.OrbitControls (camera, renderer.domElement);
webglEl.appendChild(renderer.domElement);
animate();
}
function create() {
for (var x = 0; x<3; x++ ) {
for (var y=0; y<3; y++ ) {
for (var z=0; z<3; z++ ) {
var p = new THREE.Mesh( new THREE.BoxGeometry(1,1,1), new THREE.MeshLambertMaterial({color: new THREE.Color((x+1)/4,(y+1)/4,(z+1)/4)}));
scene.add(p);
p.position.x = x - 1;
p.position.y = y - 1;
p.position.z = z - 1;
fs[0][x].push(p);
fs[1][y].push(p);
fs[2][z].push(p);
}
}
}
}
function animate(time)
{
if (a<step) {
b = a;
rotX(0, -4*b*2*Math.PI/step);
b += 1;
rotX(0, 4*b*2*Math.PI/step);
b = a;
rotX(1, -2*b*2*Math.PI/step);
b += 1;
rotX(1, 2*b*2*Math.PI/step);
b = a;
rotX(2, -1*b*2*Math.PI/step);
b += 1;
rotX(2, 1*b*2*Math.PI/step);
a++;
}
if (step<=a && a<2*step) {
b = a;
rotY(0, -4*b*2*Math.PI/step);
b += 1;
rotY(0, 4*b*2*Math.PI/step);
b = a;
...