three D code

World_Name Password

On the right is the code to make this world.Try your hand at making your own world.Or room, or spaceship, or whatever

learn javascript

View what others have created

Load tools (for example, spheres, cylinders,curves, lighting, transparency, fractals...)

Make Your Own 3d World

function line(xStart, yStart, zStart, xStart_, yStart_, zStart_, xEnd, yEnd, zEnd, xEnd_, yEnd_, zEnd_, red, green, blue){
  	this.vertices = function(){
    	return[[xStart,yStart,zStart,  xStart_, yStart_, zStart_, xEnd, yEnd, zEnd],[xEnd,yEnd,zEnd,  xStart_, yStart_, zStart_, xEnd_, yEnd_, zEnd_]];
    }
    this.colors = function(){
      
        return [[red,green,blue],[red,green,blue]];
    }
    this.render = function(){
      	
        glRender(this.vertices(),this.colors());
    };
}

function scene(x,y,z,angleX,angleY,angleZ){
    var vertices = [];
    var colors = [];
    this.add = function(obj){
        for(var i = 0 ; i< obj.vertices().length;i++){
            var temp = [];
            for(var j = 0; j<8; j=j+3){
                var x_ = (obj.vertices()[i][j]+x)*Math.cos(angleZ)*Math.cos(angleY)-(obj.vertices()[i][j+1]+y)*Math.sin(angleZ)*Math.cos(angleY)+(obj.vertices()[i][j+2]+z)*Math.sin(angleY);
               var y_ = (obj.vertices()[i][j]+x)*(Math.sin(angleZ)*Math.cos(angleX)+Math.cos(angleZ)*Math.sin(angleY)*Math.sin(angleX)) + (obj.vertices()[i][j+1]+y)*(Math.cos(angleZ)*Math.cos(angleX)-Math.sin(angleZ)*Math.sin(angleX)*Math.sin(angleY))-(obj.vertices()[i][j+2]+z)*Math.cos(angleY)*Math.sin(angleX);
                var z_ = (obj.vertices()[i][j]+x)*(Math.sin(angleZ)*Math.sin(angleX)-Math.cos(angleX)*Math.sin(angleY)*Math.cos(angleZ))+(obj.vertices()[i][j+1]+y)*(Math.cos(angleZ)*Math.sin(angleX)+Math.cos(angleX)*Math.sin(angleY)*Math.sin(angleZ))+(obj.vertices()[i][j+2]+z)*Math.cos(angleY)*Math.cos(angleX);
                temp.push(x_,y_,z_);
            }
        vertices.push(temp);    
        colors.push(obj.colors()[i]);
        } 
    };
    this.vertices = function(){
        return vertices;
    };
    this.colors = function(){
        return colors;
    };
    this.render = function(){
   
        glRender(vertices,colors);
    };
}

var player = {
    x: 5,
    y: 0,
    z: -3,
    angleX:0*1/2*Math.PI,
    angleY:1/4*Math.PI,
    angleZ:0
};
function sin(time){
  for(var i =-12;i<12.6;i++){
  	lineTest = new line(i,Math.sin(i+time),0, i,Math.sin(i+time),-1, i+1,Math.sin(i+1+time),0, i+1,Math.sin(i+1+time),-1, (i+12)/24,0,1);
	world.add(lineTest);
  }
  	
}

//this is the eventlistener, so that we can move the player 
var keys = [];
window.addEventListener("keydown", function (e) {
  keys[e.keyCode] = true;
});
window.addEventListener("keyup", function (e) {
  keys[e.keyCode] = false;
});

//and here is where we finally animate the world

var ticker = 0;
function tick(){
    
     if (keys[37]){player.angleY -= 0.05;}
    if (keys[39]){player.angleY += 0.05;}
    if (keys[40]) {
        player.x += 0.15*Math.sin(player.angleY);
        player.z -= 0.15*Math.cos(player.angleY);
    }
    if (keys[38]) {
        player.x -= 0.15*Math.sin(player.angleY);
        player.z += 0.15*Math.cos(player.angleY);
    }
     
   
    world = new scene(player.x, player.y, player.z, player.angleX, player.angleY, player.angleZ);
   ticker += 0.1;
    sin(ticker);
    
    world.render();
    //for stability reasons, requestAnimation is in the html
  	//with that said, if the graphics start to lag, you should save your world and then refresh the page
    request = requestAnimFrame(function(){tick();});
    
}
//and finally we call tick to start the animation
tick();