three.js test

_.md

[ Launch: three.js test ] 5321812 by enjalot
[ Launch: zeffii default ] 5075895 by zeffii
[ Launch: zeffii default ] 5033869 by zeffii

config.json

{"description":"three.js test","endpoint":"","display":"webgl","public":true,"require":[{"name":"three.js","url":"http://mrdoob.github.com/three.js/build/three.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":false,"restart":true,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/FVcpiH4.png"}

inlet.js

d3.select("body").style("background-color", d3.rgb(25,25,25))

// using three.js 
// http://mrdoob.github.com/three.js/build/three.min.js

var container, stats;
//var camera = tributary.camera;
var scene = tributary.scene;
var geometry, group;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

document.addEventListener( 'mousemove', onDocumentMouseMove, false );


tributary.init = function() {
  
  //container = d3.select("section#display").append("div")
  //    .attr({"height": 400, "width": 600});
  //document.body.appendChild( container );
  //container = document.createElement( 'div' );
  //document.body.appendChild( container );
  
  //camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
  //camera.position.z = 500;
  
  
  //scene = new THREE.Scene();
  scene.fog = new THREE.Fog( 0xffffff, 1, 10000 );
  
  var geometry = new THREE.CubeGeometry( 100, 100, 100 );
  var material = new THREE.MeshNormalMaterial();
  
  group = new THREE.Object3D();
  
  for ( var i = 0; i < 1000; i ++ ) {
    
    var mesh = new THREE.Mesh( geometry, material );
    mesh.position.x = Math.random() * 2000 - 1000;
    mesh.position.y = Math.random() * 2000 - 1000;
    mesh.position.z = Math.random() * 2000 - 1000;
    
    mesh.rotation.x = Math.random() * 2 * Math.PI;
    mesh.rotation.y = Math.random() * 2 * Math.PI;
    
    mesh.matrixAutoUpdate = false;
    mesh.updateMatrix();
    
    group.add( mesh );
    
  }
  
  scene.add( group );
  
  //renderer = new THREE.WebGLRenderer();
  //renderer.setSize( window.innerWidth, window.innerHeight );
  //renderer.sortObjects = false;
  
  //
  
  //window.addEventListener( 'resize', onWindowResize, false );
  
}

function onWindowResize() {
  
  windowHalfX = window.innerWidth / 2;
  windowHalfY = window.innerHeight / 2;
  
  //camera.aspect = window.innerWidth / window.innerHeight;
  //camera.updateProjectionMatrix();
  
  //renderer.setSize( window.innerWidth, window.innerHeight );
  
}

function onDocumentMouseMove(event) {
  
  mouseX = ( event.clientX - windowHalfX ) * 10;
  mouseY = ( event.clientY - windowHalfY ) * 10;
  
}


tributary.run = function() {
  
  var time = Date.now() * 0.001;
  
  var rx = Math.sin( time * 0.7 ) * 0.5,
      ry = Math.sin( time * 0.3 ) * 0.5,
      rz = Math.sin( time * 0.2 ) * 0.5;
  
  /*
  camera.position.x += ( mouseX - camera.position.x ) * 0.05;
  camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
  
  camera.lookAt( scene.position );
  */
  
  group.rotation.x = rx;
  group.rotation.y = ry;
  group.rotation.z = rz;
  
  //renderer.render( scene, camera );
  
}

style.css

.cm-s-lesser-dark.CodeMirror { background: #1e2426; color: #696969;  }
.cm-s-lesser-dark div.CodeMirror-selected {background: #064968 !important;} /* 33322B*/
.cm-s-lesser-dark span.cm-variable { color:#22EFFF; }
.cm-s-lesser-dark span.cm-variable-2 { color: #FFCCB4; }
.cm-s-lesser-dark span.cm-variable-3 { color: white; }
.cm-s-lesser-dark span.cm-string { color: Chartreuse; }
.cm-s-lesser-dark span.cm-string-2 {color: Chartreuse;}
.cm-s-lesser-dark span.cm-def {color: #FFCCB4; opacity: 1.0}
.cm-s-lesser-dark span.cm-bracket { color: #EBEFE7; }
.cm-s-lesser-dark pre { color:#FFF; }
.cm-s-lesser-dark span.cm-comment { color: #AFB4B4;}
.cm-s-lesser-dark span.cm-property {color: #FDA676;}
.cm-s-lesser-dark span.cm-number { color: #FF92EE;}
.cm-s-lesser-dark span.cm-keyword { color: #FFFF18; }
.cm-s-lesser-dark .CodeMirror-cursor { border-left: 1px solid white !important; }