Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
  <head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.min.js"></script>
  <title>CreativeJS graphics playground</title>
  <style>
    canvas { border : 1px lightgray solid; }
    body { margin :0; }
  </style>
  </head>
  <body>
    <script src="http://code.seb.ly/js/creativejs.js"></script>
   
  </body>
</html>
  
 
document.addEventListener("mousemove", onMouseMove); 
var container, mouseX = 0, mouseY = 0;
var camera, scene, renderer;
var tree;
var material;
var Branch3D = function(len, angleZ, angleY, first) { 
    
    this.len = len; 
    this.angleZ = angleZ; 
    this.angleY = angleY; 
    this.counter = 0; 
    
    this.material = new THREE.MeshBasicMaterial( { color: 0x000000} );
  var geom = this.geom = new THREE.CubeGeometry(1, first?0:len, 1,1,1,1);       
    THREE.Mesh.call( this, this.geom, this.material );
    
    var verts = geom.vertices; 
    
    for(var i=0; i<verts.length; i++) { 
        var vert = verts[i]; 
    
        vert.y+=this.len/2; 
        
    }
   
    this.rotation.z = angleZ; 
    this.rotation.y = angleY; 
    
}
Branch3D.prototype = new THREE.Mesh();
Branch3D.prototype.constructor = Branch3D;
Branch3D.prototype.init = function(first) { 
    
    if(this.len>40) {
        var rot =  Math.PI/6;
        var child = new Branch3D(this.len*0.8,0,0 );
        if(!first)child.position.y+=this.len; 
        this.add(child); 
        child.init(); 
        
        child = new Branch3D(this.len*0.8,0, Math.PI*2/3);
        if(!first)child.position.y+=this.len; 
        this.add(child); 
        child.init(); 
      
        child = new Branch3D(this.len*0.8,0, Math.PI*4/3);
        if(!first)child.position.y+=this.len; 
        this.add(child); 
        child.init(); 
    
    }
    
};
Branch3D.prototype.updateRotation = function() { 
    
    this.counter+=0.01; 
    
    this.rotation.z = this.angleZ + this.counter;
    
    for(var i = 0; i<this.children.length; i++) { 
        this.children[i].updateRotation(); 
    }
    
    
}
function randomRange(min, max) { 
    return (Math.random() * (max-min)) + min; 
    
}
setInterval(loop, 1000/60);
init();
//loop();
function init() {
    container = document.createElement( 'div' );
    document.body.appendChild( container );
    camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
    camera.position.z = 500;
    
    scene = new THREE.Scene();
    scene.add(camera);
    tree = new Branch3D(100,0,0, true); 
    tree.init(true); 
    tree.position.y = -200; 
    
    
    scene.add( tree );
    renderer = new THREE.WebGLRenderer({antialias:true});
    renderer.setSize(  window.innerWidth, window.innerHeight );
    container.appendChild( renderer.domElement );
}
//
function loop() {
    tree.updateRotation(); 
    camera.position.x += ((mouseX-camera.position.x)*0.2); 
    camera.position.y += ((-mouseY-camera.position.y)*0.2); 
    camera.lookAt(scene.position);
    renderer.render(scene, camera);
    
    
}
function onMouseMove(e) { 
    mouseX = e.clientX - (window.innerWidth/2); 
    mouseY = e.clientY - (window.innerHeight/2); 
    
    
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
sebpro
0viewers