JSFiddle - React, Tailwind, and code Playground

by Julian Rojas

HTML

<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script>
<!-- 

https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/three.min.js
https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js

-->

JavaScript

// Neslisah Torosdagli

var container, renderer, scene, camera, controls;

var branches = 3;
var levels = 2;
var linesDrawn = 0;

init();
animate();

function rotateAroundPoint3D(center, point, angle) 
{

	// cos(theta) and sin(theta)
  var s = Math.sin(angle);
  var c = Math.cos(angle);

	//old point
  point = point.sub(center);

	//new point (x', y')
  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) {

	// cos(theta) and sin(theta)
  var s = Math.sin(angle);
  var c = Math.cos(angle);

	//old point
  point = point.sub(center);

	//new point (x', y')

	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() {

	//initial blue line material
	//MATERIAL
  var material = new THREE.LineBasicMaterial({
    color: 0x0000ff
  });

  var length = 10;
	//POSITION
	//points where line starts and ends
  //var rootLineStart = new THREE.Vector3(0, 0,-length);
	var rootLineStart = new THREE.Vector3(0, -length, 0);
  var rootLineEnd = new THREE.Vector3(0, 0, 0);

	//push vertices from line
	//"MESH"
  var root = new THREE.Geometry();
  root.vertices.push(rootLineStart);
  root.vertices.push(rootLineEnd);
	//create line with geometry and material
  var line = new THREE.Line(root, material);
	//ADDING TO SCENE
  scene.add(line);

  var point = rootLineEnd.clone();
  var v1 = rootLineStart.clone();
  var v2 = rootLineEnd.clone();
  var dir = v2.clone().sub(v1).normalize();

	//array of colors
  var materials = [];

  var lineCount = 0;

	//each levels has their own color 'random'
  for (var l = 0; l < levels; l++) 
	{
    var c = randomColor();
    var m = new THREE.LineBasicMaterial({color: c});
//		pushing colors to...