3d javascript environment rotate camera horizontally by keyboard want to at least walk left and right someone can help me?

Asked

Viewed 47 times

0

Project link running with changes

/* CSS Utility Functions
-------------------------------------------------- */

var CssUtils = (function() {	
	var s = document.documentElement.style;
 	var vendorPrefix = 
		(s.WebkitTransform !== undefined && "-webkit-") ||
		(s.MozTransform !== undefined && "-moz-") ||
		(s.OTransform !== undefined && "-o-") ||
		(s.msTransform !== undefined && "-ms-") || "";
	
	return {
		translate: function( x, y, z, rx, ry, rz ) {
			return vendorPrefix + "transform:" +
				"translate3d(" + x + "px," + y + "px," + z + "px)" +	
				"rotateX(" + rx + "deg)" +
				"rotateY("  +ry + "deg)" +
				"rotateZ(" + rz + "deg);"
		},
		origin: function( x, y, z ) {
			return vendorPrefix + "transform-origin:" + x + "px " + y + "px " + z + "px;";
		},
		texture: function( colour, rx, ry, rz ) {
			var a = Math.abs(-0.5+ry/180)/1.5;
			if (rz!==0) {
				a/=1.75;
			}
			return "background:"+vendorPrefix +"linear-gradient(rgba(0,0,0," + a + "),rgba(0,0,0," + a + "))," + colour + ";";
		}		
	}
}());


/* Triplet
-------------------------------------------------- */

function Triplet( x, y, z ) {
	this.x = x || 0;
	this.y = y || 0;
	this.z = z || 0;
}

/* Camera
-------------------------------------------------- */

function Camera( world, x, y, z, rx, ry, rz) {
	this.world = world;
	this.position = new Triplet(x, y, z);
	this.rotation = new Triplet(rx, ry, rz);	
	this.fov = 600;
}

Camera.prototype = {
	update: function() {
		if (this.world) {
			this.world.node.style.cssText=
				CssUtils.origin( -this.position.x, -this.position.y, -this.position.z) +
				CssUtils.translate( this.position.x, this.position.y, this.fov, this.rotation.x, this.rotation.y, this.rotation.z)
			}
		}
}

/* Plane
-------------------------------------------------- */

function Plane( colour, w,h,x,y,z,rx,ry,rz) {
	this.node = document.createElement("div")
	this.node.className="plane"
    var Id = h;
    this.node.id = Id++;
	this.colour = colour;
	this.width = w;
	this.height = h;
	this.position = new Triplet(x, y, z);
	this.rotation = new Triplet(rx, ry, rz);
	this.update();
}

Plane.prototype = {
	update: function() {
		this.node.style.cssText += 
			"width:" + this.width + "px;" +
			"height:" + this.height + "px;" +
			CssUtils.texture(this.colour, this.rotation.x, this.rotation.y, this.rotation.z) +
			CssUtils.translate( this.position.x, this.position.y, this.position.z, this.rotation.x, this.rotation.y, this.rotation.z)
	}
}

/* World
-------------------------------------------------- */

function World( viewport ) {
	this.node = document.createElement("div")
	this.node.className = "world"
	viewport.node.appendChild(this.node)
	viewport.camera.world = this;
}

World.prototype = {
	addPlane: function( plane ) {
		this.node.appendChild(plane.node)
	}
}

/* Viewport
-------------------------------------------------- */

function Viewport( node ) {
	this.node = document.createElement("div")
	this.node.className = "viewport"
	this.camera = new Camera()
	node.appendChild(this.node)
}

window.onload = function() {
	//auteração na velocidade
	var maxSpeed = 10;
	var accel = 5;
	var speed = 0;
	var viewport = new Viewport( document.body );
	var world = new World( viewport );
	var keyState = {
		forward: false,
		backward: false,
		strafeLeft: false,
		strafeRight: false
	};
	var pointer = { x: 0, y: 0};

	function buildCube( colour, w, h, d, x, y, z, rx, ry, rz ) {

		world.addPlane( new Plane(colour, h, w, x, y, z, 0, 180, 90));		
		world.addPlane( new Plane(colour, w, d, x, y, z, 90, 0, 0));
		world.addPlane( new Plane(colour, d, h, x, y, z, 0, 270, 0));
		world.addPlane( new Plane(colour, d, h, x+w, y, z+d, 0, 90, 0));
		world.addPlane( new Plane(colour, w, d, x+w, y+h, z, 90, 180, 0));
		world.addPlane( new Plane(colour, w, h, x, y, z+d, 0, 0, 0));
	}
    // Teto
	world.addPlane( new Plane("url(imgs/tetos.png?3)", 800, 800, 400, 400, -447, -180, 180, 0));

	// Chão
	world.addPlane( new Plane("url(imgs/wood.jpg)", 800, 800, -400, 400, 53, 180, 0, 0));
	// Chão Externo
	world.addPlane( new Plane("url(imgs/txtchao.gif?1)", 3000, 3000, -1500, 1500, 54, 180, 0, 0));
	
	// Muro primario
	world.addPlane( new Plane("url(imgs/txtmuro.gif?1)", 3000, 400, -1500, 1500, 54, 180, 90, 90));
	
	// Muro secundario
	world.addPlane( new Plane("url(imgs/txtmuro.gif?1)", 3000, 400, 1500, -1500, 54, 360, 270, 90));
	
	// Muro ternario
	world.addPlane( new Plane("url(imgs/txtmuro.gif?1)", 3000, 400, 1500, 1500, 54, 270, -180, -360));
	
	// Muro Quaternario
	world.addPlane( new Plane("url(imgs/txtmuro.gif?1)", 3000, 400, 1500, -1500, -346, -270, 180, 360));
	
	
	// Paredas
	world.addPlane( new Plane("url(imgs/wall.jpg?3)", 800, 500, 400, -400, -447, 270, 0,180));   //parede 4
	world.addPlane( new Plane("url(imgs/wall.jpg?3)", 800, 500, -400, -400, -447, -270, 0,0));   //parede 4 fora
	
	world.addPlane( new Plane("url(imgs/wall2.jpg?3)", 800, 500, -400, -400, -447, 270, 90, 180)); //parede 2 
	world.addPlane( new Plane("url(imgs/wall.jpg?3)", 800, 500, -400, 400, -447, -360, -90, -90));   //parede 2 fora
	
	world.addPlane( new Plane("url(imgs/wall1.jpg?3)", 800, 500, -400, 400, -447, 90, 00, 0,0)); //parede 1 
	world.addPlane( new Plane("url(imgs/wall.jpg?3)", 800, 500, 400, 400, -447, 270, 0, 180));   //parede 1 fora
	
	world.addPlane( new Plane("url(imgs/wall3.jpg?3)", 800, 500, 400, 400, -447, 90, 270, 0));   // Parede 3
	world.addPlane( new Plane("url(imgs/wall3f.jpg)", 800, 500, 400, -400, -446, 270, -270, 180));   //3fora

	// Tapete
	world.addPlane( new Plane("url(imgs/rug.jpg)", 200, 340, 100, -170, 52,0,180,0));

	// Mesa
	buildCube("url(imgs/desk.jpg)", 10, 10, 100, -50, -100, -49);
	buildCube("url(imgs/desk.jpg)", 10, 10, 100, 50, -100, -49);
	buildCube("url(imgs/desk.jpg)", 10, 10, 100, -50, 100, -49);
	buildCube("url(imgs/desk.jpg)", 10, 10, 100, 50, 100, -49);
	buildCube("url(imgs/desk.jpg)", 130, 250, 15, -60, -120, -65);

	// Cadeira
	buildCube("url(imgs/desk.jpg)", 10, 10, 55, 135, -30, -4);
	buildCube("url(imgs/desk.jpg)", 10, 10, 55, 135, 30, -4);
	buildCube("url(imgs/desk.jpg)", 10, 10, 55, 75, -30, -4);
	buildCube("url(imgs/desk.jpg)", 10, 10, 55, 75, 30, -4);
	buildCube("#333", 60, 70, 15, 75, -30, -20);
	buildCube("#333", 10, 70, 95, 135, -30, -100);

	// Computador
	buildCube("#eee", 10, 120, 85, -30, -60, -170);
	buildCube("#fff", 40, 50, 2, -50, -25, -67);
	world.addPlane( new Plane("url(imgs/tela.png)", 110, 65,-19,-55,-165,90,90,0));
	//buildCube("#333", 2, 50, 50, -50, -25, -118);
	world.addPlane( new Plane("#bbb", 2, 50,-33,-25,-115,90,0,20));
	world.addPlane( new Plane("#999", 50, 50,-33,-25,-115,0,250,0));
	world.addPlane( new Plane("#bbb", 2, 50,-31,25,-115,90,180,340));
	world.addPlane( new Plane("#eee", 50, 50,-48,-25,-68,0,70,0));
	world.addPlane( new Plane("#ddd", 2, 50,-30,-25,-115,0,160,0));

	// Teclado
	buildCube("url(imgs/mac-keybd.png)", 31, 70, 2, 10, -35, -67);

	// mouse
	buildCube("url(imgs/mouse.jpg)", 18, 10, 4, 20, 60, -69); 
	
	//  base-mouse
	buildCube("url(imgs/base.jpg); border-radius:10px;", 40, 40, -1, 10, 52, -67);
	
	// Biblia
	buildCube("url(imgs/bib.png)", 40, 25, 5, -40, 90, -69);
	
	// revista
	buildCube("url(imgs/revista.jpg); border-radius:2px;", 50, 35, 1, 30, -120, -69);
	// celular
	buildCube("url(imgs/celular.jpg); border-radius:2px;", 28, 15, 2, 37, -70, -69);
 
    //------> Caixa de papelão
	buildCube("url(imgs/fcx.jpg)", 70, 60, 1, 15, -200, 52);// fundo da caixa
	
	buildCube("url(imgs/lixo1.jpg)", 40, 25, 1, 23, -190, 50);// lixo1 na caixa
	buildCube("url(imgs/lixo2.jpg)", 38, 23, 1, 32, -170, 50);// lixo2 na caixa
	
	buildCube("url(imgs/pcx1.jpg)", 1, 60, 60, 15, -200, 0);// parede1 da caixa
	buildCube("url(imgs/pcx2.jpg)", 1, 60, 60, 85, -200, 0);// parede2 da caixa
	buildCube("url(imgs/pcx1.jpg)", 70, 1, 60, 15, -200, 0);// parede3 da caixa
	buildCube("url(imgs/pcx2.jpg)", 70, 1, 60, 15, -140, 0);// parede4 da caixa
	//------> Caixa de papelão
	
	// ---- > copo de lapis
	buildCube("#000030", 1, 10, 25, 15, -80, -94);//orizontal cima//
	buildCube("#000040", 1, 10, 25, 25, -80, -94);//orizontal baixo//
	buildCube("#333", 10, 10, -1, 15, -80, -69);//fundo//
	buildCube("#000020", 10, 1, 25, 15, -80, -94);//lateral esquerda//
	buildCube("#000050", 10, 1, 25, 15, -71, -94);//lateral direita//
	//< ----copo de lapis
	
	// ----- > Lapis
	buildCube("#ddd", 1, 1, 30, 20, -76, -100);
	buildCube("#111", 1, 1, 30, 18, -78, -100);
	buildCube("blue", 1, 1, 30, 16, -75, -100);
	buildCube("red", 1, 1, 30, 17, -72, -100);
	buildCube("yellow", 1, 1, 30, 19, -74, -100);
	buildCube("green", 1, 1, 30, 21, -77, -100);
	//< ---- Lapis
	
	//---- > Estante
	buildCube("url(imgs/desk1.jpg)", 10, 50, 300, -350, 345, -250);//Pé esquerdo 
	buildCube("url(imgs/desk1.jpg)", 10, 50, 300, -150, 345, -250);//Pé direito
	buildCube("url(imgs/desk1.jpg)", 190, 50, 10, -340, 345, -250); // parte1
	//------------> partilheira  2 com seus livros
	buildCube("url(imgs/desk1.jpg)", 190, 50, 10, -340, 345, -160); // parte2 
	buildCube("url(imgs/txtl1.jpg)", 6, 25, 40, -339, 352, -200); // Livro1-corpo
	buildCube("#ddd", 4, 24, 40, -338, 352, -200); // Livro1-folhas
	
	buildCube("url(imgs/txtl2.jpg)", 6, 25, 40, -332, 357, -200); // Livro2-corpo
	buildCube("#ddd", 4, 24, 40, -331, 357, -200); // Livro2-folhas
	// -------------- > partilheira com seus livros
	
	buildCube("url(imgs/desk1.jpg)", 190, 50, 10, -340, 345, -65); // parte2
	buildCube("url(imgs/desk1.jpg)", 190, 50, 10, -340, 345, 30); // parte2
    //< ----- Estante
	
	viewport.camera.position.x=-250
	viewport.camera.position.y=180
	viewport.camera.position.z=150
	viewport.camera.rotation.x=270
	viewport.camera.rotation.y=0
	viewport.camera.rotation.z=-60
	viewport.camera.update();

	window.addEventListener("devicemotion", function(ev) {
		keyState.forward = ev.accelerationIncludingGravity.z<-6;
		keyState.backward = ev.accelerationIncludingGravity.z>3;
	
	}, false);
	
	document.addEventListener("touchstart", function(ev) {
		pointer.x = ev.targetTouches[0].pageX;
		pointer.y = ev.targetTouches[0].pageY;
		ev.preventDefault();
	}, false);
	
	document.addEventListener("touchmove", function(ev) {
		viewport.camera.rotation.x -= (ev.targetTouches[0].pageY - pointer.y)/2;
		viewport.camera.rotation.z += (ev.targetTouches[0].pageX - pointer.x)/2;
		pointer.x = ev.targetTouches[0].pageX;
		pointer.y = ev.targetTouches[0].pageY;
		ev.preventDefault();
	}, false);

	document.addEventListener("mouseover", function(ev) {
		pointer.x = ev.pageX;
		pointer.y = ev.pageY;	
		document.removeEventListener("mouseover", arguments.callee)
	}, false);
	
	document.addEventListener("mousemove", function(ev) {
		viewport.camera.rotation.x -= (ev.pageY - pointer.y)/3;
		viewport.camera.rotation.z += (ev.pageX - pointer.x)/3;
		pointer.x = ev.pageX;
		pointer.y = ev.pageY;
	}, false);

	document.addEventListener("keydown", function(e) {
		//console.log(e.keyCode);
		switch (e.keyCode) {
			case 87:
				keyState.forward = true;
				break;	
			case 83:
				keyState.backward = true;
				break;
			case 65:
				keyState.strafeLeft = true;
				break;
			case 68:
				keyState.strafeRight = true;
				break;		
			
		}
	}, false);

	document.addEventListener("keyup", function(e) {
		switch (e.keyCode) {
			case 87:
				keyState.forward = false;
				break;	
			case 83:
				keyState.backward = false;
				break;	
			case 65:
				keyState.strafeLeft = false;
				break;
			case 68:
				keyState.strafeRight = false;
				break;		
				
		    case 37: // Left
               if (cursor.x > 0) cursor.x--;
               break;
            case 38: // Top
               if (cursor.y > 0) cursor.y--;
               break;
            case 39: // Right
               if (cursor.x < 7) cursor.x++;
               break;
            case 40: // Bottom
               if (cursor.y < 7) cursor.y++;
               break;
			  
		}
	}, false);
	
	
					
	// Loop

	(function() {
		if (keyState.backward) {
			if (speed > -maxSpeed) speed -= accel;
		} else if (keyState.forward) {
			if (speed < maxSpeed) speed += accel;	
		} else if (speed > 0) {
			speed = Math.max( speed - accel, 0);
		} else if (speed < 0) {
			speed = Math.max( speed + accel, 0);
		} else {
			speed = 0;
		}
		var xo = Math.sin(viewport.camera.rotation.z * 0.0174532925);
		var yo = Math.cos(viewport.camera.rotation.z * 0.0174532925);
		viewport.camera.position.x -= xo * speed;
		viewport.camera.position.y -= yo * speed;
		viewport.camera.update();
		
		setTimeout( arguments.callee, 15);
        
	})();
}
body,html{height:100%;margin:0;overflow:hidden}
.viewport{position:relative;float:left;overflow:hidden;
width:100%;height:100%;background-image: url(imgs/ceu.jpg); background-attachment: fixed, scroll; background-size:100% 100%;
-webkit-perspective:600px;
-moz-perspective:600px;
-ms-perspective:600px;
perspective:600px; -webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d }

.world{position:absolute;left:50%;top:50%;-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d}
.plane{position:absolute;-webkit-transform-origin:0 0 0;
-webkit-backface-visibility:hidden;-moz-transform-origin:0 0 0;
-moz-backface-visibility:hidden;-ms-transform-origin:0 0 0;
-ms-backface-visibility:hidden;backface-visibility:hidden}

#gun{background:url(imgs/contr.png); background-size:100% 100%;
position:absolute;bottom:0;left:50%;
z-index:2000;height:280px;width:420px;z-index:50000;
-webkit-animation:gun 2.5s infinite;-moz-animation:gun 2.5s infinite;animation:gun 2.5s infinite}
.notice{font:12px/1.5 Tahoma,Arial;position:absolute;
background:rgba(0,0,0,.7);z-index:50001}

#update{bottom:20px;left:50%;width:360px;margin-left:-180px;
text-align:center;font-size:120%;border-radius:7px}

#about{top:0;width:100%}

p{margin:0;padding:15px 20px;color:#fff}#about p:first-child{float:left}#about p:last-child{float:right}

#update a{display:block}a{color:#fc0}

kbd{display:inline-block;padding:0 5px;background:#eee;color:#000;border-radius:4px;border:1px solid #bbb;border-bottom:3px solid #999;-webkit-box-shadow:0 0 3px #000;box-shadow:0 0 3px #000}
@-webkit-keyframes gun{50%{-webkit-transform:translateY(7px) scale(0.99)}}@-moz-keyframes gun{50%{-moz-transform:translateY(7px)}}@keyframes gun{50%{transform:translateY(7px)}}
<div id="gun"><kbd><a href="http://merotec32.000webhostapp.com/filmes.html" style=' font-size:14px; margin-left:30px; margin-right: 30px; padding:5px; min-height:32px; color:#333; text-decoration:none;'>CLIQUE PARA ASSISTIR FILMES</a></kbd></div>
<div id="about" class="notice">
<p>Use <kbd>W</kbd> + <kbd>S</kbd> para andar na sala</p>

</div>

javascript html5 css3

  • If anyone knows how to walk sideways I’d appreciate it.

  • I discovered what was missing and that was it, the same Code of the instance of the keys "W and S" to "A and D" with few changes.

  • If it has been solved, the solution must be in the answers, not in the question itself.

  • is that I’m blocked to answer and ask

No answers

Browser other questions tagged javascript html5 css3

You are not signed in. Login or sign up in order to post.