Skip to content

Instantly share code, notes, and snippets.

@Mparaiso

Mparaiso/main.js

Created Jul 24, 2012
Embed
What would you like to do?
three.js, TweenLite , Coordinates.js
var camera,
scene,
renderer,
group,
grid,
wave ,
mesh,
currentLayout,
container,
layoutNames,
layoutTransitioner,
INITIAL_TEXT_X,
INITIAL_TEXT_Z,
pointLights,layouts,
renderingDelta,
textGroup,
textLayout,
textLayoutCoordinates,
delta,now,
transitionInterval = 5000,
renderingInterval = 60,
NODE_NUMBER=64,
delay=0,
iter = 0,
VIEWPORT_HEIGHT = window.innerHeight * 0.75,
VIEWPORT_WIDTH = window.innerWidth * 0.75,
INITIAL_TEXT_LAYOUT_X = - 800,
INITIAL_TEXT_LAYOUT_Y = 500,
INITIAL_TEXT_LAYOUT_Z = - 500,
SELECTED_LAYOUT_COLOR = "#0BB",
UNSELECTED_LAYOUT_COLOR = "#CCC",
NODE_TRANSITION_SPEED=1.6,
verticalLayout;
function main(){
init();
animate();
displayScript();
}
function htmlEntities(str) {
return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}
function getCurrentLayout(){
return layouts[++iter % layouts.length];
}
function renderLayout(){
for(var i in this.nodes){
if(this.nodes[i].link==null)return;
this.nodes[i].link.position.x = this.nodes[i].x;
this.nodes[i].link.position.y = this.nodes[i].y;
if(this.nodes[i].z){
this.nodes[i].link.position.z = this.nodes[i].z;
}else{
this.nodes[i].link.position.z = 0;
}
if(this.nodes[i].rotationZ) this.nodes[i].link.rotation.z = this.nodes[i].rotationZ;
}
}
function validateObject(object){
return true;
}
function createHTMLTextGroup(rootElement,layouts){
var ul ;
var _rootElement = rootElement ;
var _layouts = layouts ;
var _length = _layouts.length;
var layoutNames=[];
textLayout = new Coordinates.layouts.twoodee.Grid(100,400,1,layouts.length);
textLayout.validateObject= validateObject;
textLayout.render = function(){
// le lien link est un élement du DOM
for(var i=0;i<this.nodes.length;i++){
if(this.nodes[i].link===null)continue;
this.nodes[i].link.style.left = this.nodes[i].x+"px";
this.nodes[i].link.style.top = this.nodes[i].y+"px";
//console.log(this.nodes[i].link);
}
}
rootElement.appendChild(ul = document.createElement("DIV"));
ul.style.position = "absolute" ;
ul.style.top = "0px";
ul.style.left= "0px";
for(var i=0;i<_length;i++){
layoutNames[i] = document.createElement("DIV");
layoutNames[i].innerHTML = layouts[i].toString();
layoutNames[i].style.position = 'absolute' ;
layoutNames[i]['class'] = "layout-name";
ul.appendChild(layoutNames[i]);
textLayout.addNode(layoutNames[i]);
}
textLayout.updateAndRender();
textGroup = ul ;
INITIAL_TEXT_LAYOUT_Y = textGroup.offsetParent.offsetTop;
return layoutNames;
}
function createCubeGroup(scene,layouts){
var group = new THREE.Object3D();
group.position.z = -500;
var meshes=[];
for(var i=0;i < NODE_NUMBER;i++){
var material = new THREE.MeshLambertMaterial( { color: Coordinates.getRandomColor(), wireframe: false } );
var geometry = new THREE.CubeGeometry( 100, 100, 100 );
meshes[i] = new THREE.Mesh( geometry, material );
group.add(meshes[i]);
for(var j=0;j<layouts.length;j++){
layouts[j].addNode(meshes[i],false);
}
}
return group;
}
function createLights(){
// create a point light
var pointLights = [];
pointLights[0] =new THREE.PointLight(0xFFFFFF);
// set its position
pointLights[0].position.x = 3000;
pointLights[0].position.y = -3000;
pointLights[0].position.z = 3000;
pointLights[1] =new THREE.PointLight(0xFFFFFF);
// set its position
pointLights[1].position.x = -1000;
pointLights[1].position.y = 1000;
pointLights[1].position.z = 1000;
return pointLights ;
}
function createLayouts(){
var layouts=[];
layouts.push(new Coordinates.layouts.threedee.Grid3d(1000,1000,1000,4,4,4));
layouts.push(new Coordinates.layouts.twodee.Spiral(150,.10));
layouts.push(new Coordinates.layouts.threedee.WaveEllipse3d(2000,2000,500,1,8,1));
layouts.push(new Coordinates.layouts.threedee.Scatter3d(3000,3000,3000));
layouts.push(new Coordinates.layouts.threedee.WaveEllipse3d(2000,2000,500,3,2,1));
layouts.push(new Coordinates.layouts.twodee.Lattice(3000,3000,16,4));
layouts.push(new Coordinates.layouts.threedee.WaveEllipse3d(2000,2000,500,2,1,2));
layouts.push(new Coordinates.layouts.threedee.Stack3d(45,200,200));
layouts.push(new Coordinates.layouts.threedee.Wave3d(3000,800,800,0,0,0,4));
layouts.push(new Coordinates.layouts.twodee.Ellipse(2500,2500));
for(var i=0;i < layouts.length;i++){
layouts[i].validateObject = validateObject;
layouts[i].render = renderLayout;
}
return layouts ;
}
function tweenFunction(node){
var link = node.link;
TweenLite.to(link.position,NODE_TRANSITION_SPEED,{x:node.x,y:node.y,z:(node.z||0),ease:Power4.easeInOut,delay:delay});
delay+=0.025;
}
function tweenY(target,value){
TweenLite.to(target.position,1,{y:value,ease:Power4.easeInOut});
}
function tweenTop(target,value){
TweenLite.to(target,1,{css:{top:value+"px"},ease:Power4.easeInOut});
}
function tweenColor(target,value){
TweenLite.to(target,0.5,{r:value.r,g:value.g,b:value.b});
}
function animate(now) {
if(now-delta>=transitionInterval){
currentLayout = getCurrentLayout();
if(currentLayout.distributeNodes)currentLayout.distributeNodes();
currentLayout.update();
layoutTransitioner.syncNodesTo(currentLayout);
if(layoutNames !== undefined ){
animateLayoutNames();
}
delay=0;
delta = Date.now();
}
// note: three.js includes requestAnimationFrame shim
requestAnimationFrame( animate );
if(now - renderingDelta >= renderingInterval ){
render();
renderingDelta = Date.now();
}
}
function animateLayoutNames(){
tweenTop(textGroup,-INITIAL_TEXT_LAYOUT_Y-textLayout.nodes[iter%textLayout.size].y);
for(var i=0;i<layoutNames.length;i++){
if(i == iter % layoutNames.length ){
TweenLite.to(
layoutNames[i],
1,
{css:{
"font-size":"25px",
opacity:1,
color:SELECTED_LAYOUT_COLOR,
ease:Power4.easeInOut
}
});
}else{
TweenLite.to(
layoutNames[i],
1,
{css:{
"font-size":"20px",
opacity:0.8,
color:UNSELECTED_LAYOUT_COLOR,
ease:Power4.easeInOut
}
});
}
}
}
function render() {
group.rotation.x += 0.01;
group.rotation.y += 0.03;
renderer.render( scene, camera );
}
function init() {
scene = new THREE.Scene();
layouts = createLayouts();
currentLayout = layouts[iter];
pointLights = createLights();
for(var i=0;i<pointLights.length;i++){
scene.add(pointLights[i]);
}
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 2000;
scene.add( camera );
group = createCubeGroup(scene,layouts);
scene.add(group);
//createTextGroup(scene,layouts);
layoutNames = createHTMLTextGroup(document.querySelector("#textContainer"),layouts);
renderer = new THREE.SVGRenderer({antialias : true,overdraw:false});
renderer.setSize( VIEWPORT_WIDTH, VIEWPORT_HEIGHT);
// insert the viewport in the DOM
document.querySelector("#target").appendChild( renderer.domElement );
layoutTransitioner = new Coordinates.utils.LayoutTransitioner(currentLayout,tweenFunction);
delta = renderingDelta = Date.now();
currentLayout.update();
layoutTransitioner.syncNodesTo(currentLayout);
container = document.querySelector("#container");
container.style.width = VIEWPORT_WIDTH+"px";
container.style.height = VIEWPORT_HEIGHT+"px";
animateLayoutNames();
}
function displayScript(){
var body = document.body;
var script = document.querySelector("#main-script").innerHTML;
var c = document.createElement("PRE");
c.innerHTML = htmlEntities(script);
body.appendChild(c);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment