Skip to content

Commit 91443d8

Browse files
brianarnbrianarn
committed
Adding Cube of Cubes toy
1 parent 7c531df commit 91443d8

File tree

2 files changed

+192
-0
lines changed

2 files changed

+192
-0
lines changed

‎threejs/cubeOfCubes.html

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Cube of Cubes</title>
6+
<style>
7+
body {
8+
margin: 0;
9+
}
10+
canvas {
11+
width: 100%;
12+
height: 100%
13+
}
14+
#controls {
15+
position: absolute;
16+
top: 0;
17+
right: 0;
18+
padding: 10px;
19+
background-color: white;
20+
border: 1px solid black;
21+
}
22+
.control {
23+
margin-top: 10px;
24+
}
25+
.control:first-child {
26+
margin-top: 0px;
27+
}
28+
29+
.control label {
30+
display: inline-block;
31+
width: 75px;
32+
}
33+
.control input {
34+
width: 40px;
35+
}
36+
</style>
37+
</head>
38+
<body>
39+
<div id="controls">
40+
<div class="control">
41+
<label for="rotate-cubes">Inner cube rotation:</label>
42+
<input id="rotate-cubes" name="rotate-cubes" type="number" min="0" max="1" step="0.01">
43+
</div>
44+
<div class="control">
45+
<label for="rotate-x">X rotation:</label>
46+
<input id="rotate-x" name="rotate-x" type="number" min="0" max="1" step="0.01">
47+
</div>
48+
<div class="control">
49+
<label for="rotate-y">Y rotation:</label>
50+
<input id="rotate-y" name="rotate-y" type="number" min="0" max="1" step="0.01">
51+
</div>
52+
<div class="control">
53+
<label for="rotate-z">Z rotation:</label>
54+
<input id="rotate-z" name="rotate-z" type="number" min="0" max="1" step="0.01">
55+
</div>
56+
</div>
57+
<div id="canvas"></div>
58+
<script src="three.min.r69.js"></script>
59+
<script src="cubeOfCubes.js"></script>
60+
</body>
61+
</html>

‎threejs/cubeOfCubes.js

+131
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
document.addEventListener('DOMContentLoaded', function () {
2+
// Baselines for cube rotation
3+
var rotations = {
4+
x : 0.01,
5+
y : 0.01,
6+
z : 0.01,
7+
cubes : 0.1
8+
};
9+
10+
['x', 'y', 'z', 'cubes'].forEach(function (axis) {
11+
var input = document.getElementById('rotate-' + axis);
12+
input.value = rotations[axis];
13+
14+
// Debounce, only changing after a short time
15+
var timer;
16+
input.addEventListener('change', function (e) {
17+
// If we're already pending, reset
18+
if (timer) { clearTimeout(timer); }
19+
20+
// Set our new timer to update axis rotation
21+
// in roughly a quarter-second, clearing out
22+
// the timer value when it happens.
23+
timer = setTimeout(function () {
24+
rotations[axis] = parseFloat(input.value);
25+
timer = null;
26+
}, 250);
27+
});
28+
});
29+
30+
// ThreeJS stuff
31+
var scene = new THREE.Scene();
32+
var camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000);
33+
34+
var renderer = new THREE.WebGLRenderer();
35+
renderer.setSize(window.innerWidth, window.innerHeight);
36+
document.getElementById('canvas').appendChild(renderer.domElement);
37+
38+
var x, y, z;
39+
var count = 5;
40+
var cubes = [];
41+
42+
// Magical ratios determined by dorking around in console
43+
camera.position.x = count * 0.8;
44+
camera.position.y = count * 0.8;
45+
camera.position.z = 4 * count;
46+
47+
var geometry, material, color, cube;
48+
49+
/*
50+
var axisHelper = new THREE.AxisHelper(10 * count);
51+
scene.add(axisHelper);
52+
*/
53+
54+
// Cube of Cubes!
55+
var cubeOfCubes = new THREE.Object3D();
56+
57+
// Eww
58+
for (x = 0; x < count; x++) {
59+
for (y = 0; y < count; y++) {
60+
for (z = 0; z < count; z++) {
61+
geometry = new THREE.BoxGeometry(1, 1, 1);
62+
color = new THREE.Color(x/count, y/count, z/count);
63+
material = new THREE.MeshLambertMaterial({
64+
color: color
65+
});
66+
67+
cube = new THREE.Mesh(geometry, material);
68+
cube.position.x = x * 2;
69+
cube.position.y = y * 2;
70+
cube.position.z = z * 2;
71+
72+
cubes.push(cube);
73+
74+
//scene.add(cube);
75+
cubeOfCubes.add(cube);
76+
}
77+
}
78+
}
79+
scene.add(cubeOfCubes);
80+
81+
// Light
82+
// All light are things I've seen used in other demos,
83+
// and I have no idea what I'm doing here.
84+
var ambientLight = new THREE.AmbientLight(0x404040);
85+
scene.add(ambientLight);
86+
87+
// directional lighting
88+
var directionalLight = new THREE.DirectionalLight(0xffffff);
89+
directionalLight.position.set(10, 10, 10).normalize();
90+
scene.add(directionalLight);
91+
92+
var directionalLight2 = new THREE.DirectionalLight(0xffffff);
93+
directionalLight2.position.set(-10, -10, -10).normalize();
94+
scene.add(directionalLight2);
95+
96+
/*
97+
var pointLight = new THREE.PointLight(0xffffff, 1, 100);
98+
scene.add(pointLight);
99+
100+
var spotLight = new THREE.SpotLight( 0xffffff );
101+
spotLight.position.set( -40, 60, -10 );
102+
scene.add( spotLight );
103+
*/
104+
105+
window.renderer = renderer;
106+
window.scene = scene;
107+
window.camera = camera;
108+
window.cubes = cubes;
109+
window.cubeOfCubes = cubeOfCubes;
110+
111+
var render = function () {
112+
requestAnimationFrame(render);
113+
114+
// Rotate the individuals
115+
var cube;
116+
for (var i = 0, l = cubes.length; i < l; i++) {
117+
cube = cubes[i];
118+
cube.rotation.x += rotations.cubes;
119+
cube.rotation.y += rotations.cubes;
120+
cube.rotation.z += rotations.cubes;
121+
}
122+
123+
cubeOfCubes.rotation.x += rotations.x;
124+
cubeOfCubes.rotation.y += rotations.y;
125+
cubeOfCubes.rotation.z += rotations.z;
126+
127+
renderer.render(scene, camera);
128+
};
129+
130+
render();
131+
});

0 commit comments

Comments
 (0)