Fractal Tree
by Julian Rojas
HTML
<script src="https://rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
JavaScript
// Neslisah Torosdagli
var container, renderer, scene, camera, controls;
var branches = 3;
var levels = 4;
var linesDrawn = 0;
//var linesDrawn3D = 0;
init();
animate();
function rotateAroundPoint3D(center, point, angle) {
var s = Math.sin(angle);
var c = Math.cos(angle);
point = point.sub(center);
var z = (point.z * c) - (point.y * s);
var y = (point.z * s) + (point.y * c);
z = z + center.z;
y = y + center.y;
var x = point.x + center.x;
return (new THREE.Vector3(x, y, z));
}
function rotateAroundPoint(center, point, angle) {
var s = Math.sin(angle);
var c = Math.cos(angle);
point = point.sub(center);
var x = (point.x * c) - (point.y * s);
var y = (point.x * s) + (point.y * c);
x = x + center.x;
y = y + center.y;
var z = point.z + center.z;
return (new THREE.Vector3(x, y, z));
}
function buildTree() {
var material = new THREE.LineBasicMaterial({
color: 0x0000ff
});
var length = 10;
var rootLineStart = new THREE.Vector3(0, -length, 0);
var rootLineEnd = new THREE.Vector3(0, 0, 0);
var root = new THREE.Geometry();
root.vertices.push(rootLineStart);
root.vertices.push(rootLineEnd);
var line = new THREE.Line(root, material);
scene.add(line);
var point = rootLineEnd.clone();
var v1 = rootLineStart.clone();
var v2 = rootLineEnd.clone();
var dir = v2.clone().sub(v1).normalize();
var materials = [];
var lineCount = 0;
//var lineCount3D = 0;
for (var l = 0; l < levels; l++)
{
var c = randomColor();
var m = new THREE.LineBasicMaterial(
{
color: c
});
materials.push(m);
if (l > 0) {
lineCount += ( ( Math.pow( (2 * branches ), l) ) );
//lineCount3D += ( ( Math.pow(branches, l) ) );
}
}
points = [];
points.push(rootLineEnd.clone());
points.push(dir);
points.push(length);
var startAngle = Math.PI / 2;
var stepAngle = Math.PI / (branches - 1);
while (points.length >= 2)
{
var centerPoint =...