Skip to content
Snippets Groups Projects
Commit 4ab3e9ad authored by sermigu's avatar sermigu
Browse files

Subir nuevo archivo

parent 1b23e8d9
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 597 additions and 0 deletions
barras.js 0 → 100644
+ 597
− 0
View file @ 4ab3e9ad
var scene, renderer, camera;
var controls, boxHelper, gui;
var animator = new Array();
var foto= new Array();
var clock = new THREE.Clock();
var datos,dimx,dimy;
var aliados,enemigos,obstaculos;
var ataques,casillasObstaculo,ataquesEnemigo;
var modosimple;
var canvas1, context1, texture1;
var projector, mouse = { x: 0, y: 0 }, INTERSECTED;
var raycaster,contenido;
function init() {
var oReq = new XMLHttpRequest();
oReq.open("GET", "https://firebasestorage.googleapis.com/v0/b/busbot-empc.appspot.com/o/capitulo5.txt?alt=media", false);
oReq.send();
datos=oReq.responseText;
THREE.Object3D.DefaultUp.set(0, 1, 0);
// create a scene, that will hold all our elements such as objects, cameras and lights.
scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
camera = new THREE.PerspectiveCamera(25, window.innerWidth / window.innerHeight, 0.1, 2000);
// create a render and set the size
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0x000000));
renderer.setSize(window.innerWidth, window.innerHeight);
// show axes in the screen
var axes = new THREE.AxesHelper(20);
scene.add(axes);
datos=datos.split("\n");
dimx=parseInt(datos[0]);
dimy=parseInt(datos[1]);
enemigos=parseInt(datos[2]);
var puntero=3;
aliados=parseInt(datos[puntero+enemigos]);
obstaculos=parseInt(datos[puntero+enemigos+aliados+1]);
var i=0;
ataques=new Array(dimx*dimy);
casillasObstaculo=new Array(dimx*dimy);
ataquesEnemigo=new Array(dimx*dimy);
for (i=0; i<ataques.length; i++){
ataques[i]=0;
casillasObstaculo[i]=0;
ataquesEnemigo[i]=0;
}
var texturet = new THREE.TextureLoader().load(
'https://firebasestorage.googleapis.com/v0/b/busbot-empc.appspot.com/o/skybox.jpg?alt=media',
() => {
var rt = new THREE.WebGLCubeRenderTarget(texturet.image.height);
rt.fromEquirectangularTexture(renderer, texturet);
scene.background = rt;
});
puntero=puntero+enemigos+aliados+2;
for (i=0; i<obstaculos; i++){
var obstaculo=datos[puntero];
obstaculo=obstaculo.split(" ");
var posx=parseInt(obstaculo[0]);
var posy=parseInt(obstaculo[1]);
casillasObstaculo[posx*dimy+posy]=1;
createCube(scene,posx+0.5,0.5*1,posy+0.5,1,1,1,0xffffff,0x000000,"Obstáculo");
puntero++;
}
puntero=3;
for (i=0; i<enemigos; i++){
var enemigo=datos[puntero];
enemigo=enemigo.split(" ");
var clase=enemigo[0];
var posx=parseInt(enemigo[1]);
var posy=parseInt(enemigo[2]);
var movimiento=parseInt(enemigo[3]);
var rango=parseInt(enemigo[4]);
var distancia=movimiento+rango;
calcularMovimiento(posx, posy, distancia, ataquesEnemigo, dimx, dimy,casillasObstaculo);
for (var j=0; j<ataques.length; j++){
ataques[j]=ataques[j]+ataquesEnemigo[j];
ataquesEnemigo[j]=0;
}
puntero++;
}
createFloor(dimx, dimy);
const gridHelper=new THREE.GridHelper(40, 40);
scene.add(gridHelper);
var texture, materialg, geometryg;
puntero=3+enemigos+1;
for (i=0; i<aliados; i++){
var aliado=datos[puntero];
aliado=aliado.split(" ");
var nombre=aliado[0];
var posx=parseInt(aliado[1]);
var posy=parseInt(aliado[2]);
var spriteDim=parseInt(aliado[3]);
if(ataques[posx*dimy+posy]!=0){
//createCube2(scene,posx+0.5,0.5*ataques[posx*dimy+posy],posy+0.5,1,ataques[posx*dimy+posy],1,0x1176c5,0x000000,0xff0000);
createCube(scene,posx+0.5,0.5*ataques[posx*dimy+posy],posy+0.5,1,ataques[posx*dimy+posy],1,0x00ff00,0x000000,"Enemigo");
createCube(scene,posx+0.5,0.5*1,posy+0.5,1,1,1,0x00ff00,0x000000,2);
var spriteDuration = spriteDim==6 ? 200 : 300;
texture=new THREE.TextureLoader().load('https://firebasestorage.googleapis.com/v0/b/busbot-empc.appspot.com/o/'+nombre+'.png?alt=media');
animator[i]=new TextureAnimator(texture, spriteDim, 1, spriteDim, spriteDuration); // texture, #horiz, #vert, #total, duration.
materialg=new THREE.SpriteMaterial({map: texture, transparent: true, side: THREE.DoubleSide});
foto[i]=new THREE.Sprite(materialg);
foto[i].position.set(posx+0.5,ataques[posx*dimy+posy]+0.5,posy+0.5);
foto[i].scale.set(1, 1, 1.0);
foto[i].name=nombre;
scene.add(foto[i]);
ataques[posx*dimy+posy]=0;
}
else{
var nombre2=nombre;
if(nombre.includes("-")){
nombre2=nombre.split("-");
nombre2=nombre2[0]+" "+nombre2[1];
}
createCube(scene,posx+0.5,0.5*1,posy+0.5,1,1,1,0x1176c5,0x000000,nombre2);
var spriteDuration = spriteDim==6 ? 200 : 300;
texture=new THREE.TextureLoader().load('https://firebasestorage.googleapis.com/v0/b/busbot-empc.appspot.com/o/'+nombre+'.png?alt=media');
animator[i]=new TextureAnimator(texture, spriteDim, 1, spriteDim, spriteDuration); // texture, #horiz, #vert, #total, duration.
materialg=new THREE.SpriteMaterial({map: texture, transparent: true, side: THREE.DoubleSide});
foto[i]=new THREE.Sprite(materialg);
foto[i].position.set(posx+0.5,1.5,posy+0.5);
foto[i].scale.set(1, 1, 1.0);
foto[i].name=nombre2;
scene.add(foto[i]);
}
puntero++;
}
for(i=0;i<dimx*dimy;i++){
if(ataques[i]==0){
continue;
}
createCube(scene,Math.floor(i/dimy)+0.5,0.5*ataques[i],i%dimy+0.5,1,ataques[i],1,0xff0000,0x000000,"Enemigo");
createCube(scene,Math.floor(i/dimy)+0.5,0.5*1,i%dimy+0.5,1,1,1,0xff0000,0x000000,"Simple");
}
puntero=3;
for (i=0; i<enemigos; i++){
var enemigo=datos[puntero];
enemigo=enemigo.split(" ");
var clase=enemigo[0];
var posx=parseInt(enemigo[1]);
var posy=parseInt(enemigo[2]);
puntero++;
texture=new THREE.TextureLoader().load('https://firebasestorage.googleapis.com/v0/b/busbot-empc.appspot.com/o/'+clase+'.png?alt=media');
animator[i+aliados]=new TextureAnimator(texture, 6, 1, 6, 200); // texture, #horiz, #vert, #total, duration.
materialg=new THREE.SpriteMaterial({map: texture, transparent: true, side: THREE.DoubleSide});
foto[i+aliados]=new THREE.Sprite(materialg);
foto[i+aliados].position.set(posx+0.5,ataques[posx*dimy+posy]+0.5,posy+0.5);
foto[i+aliados].scale.set(1, 1, 1.0);
if(clase.includes("-")){
clase=clase.split("-");
clase=clase[0]+" "+clase[1];
}
foto[i+aliados].name=clase;
scene.add(foto[i+aliados]);
}
gui = new dat.GUI();
var parameters =
{
simple: false, // boolean (checkbox)
contenido: ""
}
contenido=gui.add( parameters, 'contenido' ).name('Descripción').listen();
//gui.remove(contenido);
modosimple=false;
var animatec = gui.add( parameters, 'simple' ).name('Vista 2D').listen();
animatec.onChange(function(value)
{ cambiarEstilo(value);
});
gui.open();
//create light
createLight();
//position and point the camera to the center of the scene
camera.position.set(25, 20, 25);
camera.lookAt(scene.position);
//add the output of the renderer to the html element
document.getElementById("contenedor").appendChild(renderer.domElement);
raycaster = new THREE.Raycaster();
/*
// create a canvas element
canvas1 = document.createElement('canvas');
context1 = canvas1.getContext('2d');
context1.font = "Bold 20px Arial";
context1.fillStyle = "rgba(0,0,0,0.95)";
context1.fillText('Hello, world!', 0, 20);
// canvas contents will be used for a texture
texture1 = new THREE.Texture(canvas1)
texture1.needsUpdate = true;
////////////////////////////////////////
var spriteMaterial = new THREE.SpriteMaterial( { map: texture1 } );
sprite1 = new THREE.Sprite( spriteMaterial );
sprite1.scale.set(8,4,1.0);
sprite1.position.set( 25, 1, 25 );
scene.add( sprite1 );
// initialize object to perform world/screen calculations
//projector = new THREE.Projector();
*/
// when the mouse moves, call the given function
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
//controls
createControls();
//console.log(scene);
//render the scene
scene.translateX(-dimx/2);
scene.translateZ(-dimy/2);
renderer.render(scene, camera);
}
function calcularMovimiento(posx, posy, distancia, ataquesEnemigo, dimx, dimy, casillasObstaculo){
if(distancia==0){
return 0;
}
if(!(posx+1>=dimx)){
if(casillasObstaculo[(posx+1)*dimy+posy]!=1){
ataquesEnemigo[(posx+1)*dimy+posy]=1;
calcularMovimiento(posx+1, posy, distancia-1, ataquesEnemigo, dimx, dimy, casillasObstaculo);
}
}
if(!(posx-1<0)){
if(casillasObstaculo[(posx-1)*dimy+posy]!=1){
ataquesEnemigo[(posx-1)*dimy+posy]=1;
calcularMovimiento(posx-1, posy, distancia-1, ataquesEnemigo, dimx, dimy, casillasObstaculo);
}
}
if(!(posy+1>=dimy)){
if(casillasObstaculo[posx*dimy+posy+1]!=1){
ataquesEnemigo[posx*dimy+posy+1]=1;
calcularMovimiento(posx, posy+1, distancia-1, ataquesEnemigo, dimx, dimy, casillasObstaculo);
}
}
if(!(posy-1<0)){
if(casillasObstaculo[posx*dimy+posy-1]!=1){
ataquesEnemigo[posx*dimy+posy-1]=1;
calcularMovimiento(posx, posy-1, distancia-1, ataquesEnemigo, dimx, dimy, casillasObstaculo);
}
}
return ataquesEnemigo;
}
function createFloor(dimx,dimy) {
var planeGeometry = new THREE.PlaneGeometry(dimx, dimy);
var groundTexture = new THREE.TextureLoader().load('https://firebasestorage.googleapis.com/v0/b/busbot-empc.appspot.com/o/piedras.jpg?alt=media');
var planeMaterial = new THREE.MeshBasicMaterial({
map: groundTexture
});
groundTexture.wrapS = THREE.RepeatWrapping;
groundTexture.wrapT = THREE.RepeatWrapping;
groundTexture.repeat.set(4,4);
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
// rotate and position the plane
plane.rotation.x = -0.5 * Math.PI;
plane.position.set(dimx/2, 0, dimy/2);
// add the plane to the scene
scene.add(plane);
}
function createLight() {
var ambient = new THREE.AmbientLight(0x999999);
var spot = new THREE.SpotLight({
color: 0xffffff,
intensity: 0.1
});
spot.position.set(-50, 100, 100);
spot.castShadow = true;
//spot.shadowDarkness = 0.2;
scene.add(ambient, spot);
}
function createCube(scene,x,y,z,dimx,dimy,dimz,color,colorhelper,tipo) {
var cubeGeometry = new THREE.BoxGeometry(dimx, dimy, dimz);
var cubeMaterial = new THREE.MeshLambertMaterial({
color: color
});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;
// position the cube
cube.position.x = x;
cube.position.y = y;
cube.position.z = z;
cube.name=tipo;
if(tipo=="Simple")cube.visible=false;
scene.add(cube);
var helper = new THREE.BoxHelper(cube);
helper.material.color.set(colorhelper);
helper.name=tipo;
if(tipo=="Simple")helper.visible=false;
scene.add(helper);
}
//No funciona con esta version de three js
function createCube2(scene,x,y,z,dimx,dimy,dimz,color,colorhelper, colorface) {
var cubeGeometry = new THREE.BoxGeometry(dimx, dimy, dimz);
cubeGeometry.faces[0].color.setHex(color);
cubeGeometry.faces[1].color.setHex(colorface);
cubeGeometry.faces[2].color.setHex(colorface);
cubeGeometry.faces[3].color.setHex(color);
cubeGeometry.faces[4].color.setHex(color);
cubeGeometry.faces[5].color.setHex(color);
cubeGeometry.faces[6].color.setHex(color);
cubeGeometry.faces[7].color.setHex(color);
cubeGeometry.faces[8].color.setHex(colorface);
cubeGeometry.faces[9].color.setHex(color);
cubeGeometry.faces[10].color.setHex(colorface);
cubeGeometry.faces[11].color.setHex(color);
var cubeMaterial = new THREE.MeshLambertMaterial({
color: 0xffffff,
vertexColors: true
});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.geometry.colorsNeedUpdate = true;
cube.castShadow = true;
// position the cube
cube.position.x = x;
cube.position.y = y;
cube.position.z = z;
scene.add(cube);
var helper = new THREE.BoxHelper(cube);
helper.material.color.set(colorhelper);
scene.add(helper);
}
function cambiarEstilo(value){
/*var i=0.0;
var x,y,z;
y=foto[0].position.y;
z=foto[0].position.z;
for(i=0.0; i<=3.0; i=i+0.01){
x=foto[0].position.x;
foto[0].position.set(x+0.01,y,z);
//requestAnimationFrame( animate );
//var delta = clock.getDelta();
//animator[0].update(1000 * delta);
//animate();
//requestAnimationFrame(renderScene);
//renderer.render(scene, camera);
}
console.log(foto[0]);
console.log(scene)*/
//while(scene.children.length > 0){
//scene.remove(scene.children[0]);
//}
for (var i=0; i<scene.children.length;i++){
if(value==true){
if(scene.children[i].name=="Enemigo"){
scene.children[i].visible=false;
}
if(scene.children[i].name=="Simple"){
scene.children[i].visible=true;
}
}
else{
if(scene.children[i].name=="Enemigo"){
scene.children[i].visible=true;
}
if(scene.children[i].name=="Simple"){
scene.children[i].visible=false;
}
}
}
if(value==true){
var puntero=3;
for (i=0; i<enemigos; i++){
var enemigo=datos[puntero];
enemigo=enemigo.split(" ");
var clase=enemigo[0];
var posx=parseInt(enemigo[1]);
var posy=parseInt(enemigo[2]);
puntero++;
foto[i+aliados].position.set(posx+0.5,1+0.5,posy+0.5);
}
foto[aliados-1].position.set(7+0.5,1+0.5,1+0.5); //Unidad verde, puesta a mano
modosimple=true;
gui.remove(contenido);
camera.position.set(-0.005, 45, -1);
}
else{
var puntero=3;
for (i=0; i<enemigos; i++){
var enemigo=datos[puntero];
enemigo=enemigo.split(" ");
var clase=enemigo[0];
var posx=parseInt(enemigo[1]);
var posy=parseInt(enemigo[2]);
puntero++;
foto[i+aliados].position.set(posx+0.5,ataques[posx*dimy+posy]+0.5,posy+0.5);
}
foto[aliados-1].position.set(7+0.5,5+0.5,1+0.5); //Unidad verde, puesta a mano
modosimple=false;
var parameters =
{
contenido: ""
}
contenido=gui.add( parameters, 'contenido' ).name('Descripción').listen();
camera.position.set(25, 20, 25);
}
}
function createControls() {
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.keys = [ 65, 83, 68 ];
//controls.keys = { LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' };
}
function animate() {
requestAnimationFrame( animate );
render();
update();
}
function render() {
renderer.render( scene, camera );
}
function update(){
var delta = clock.getDelta();
for(var i=0;i<aliados+enemigos;i++){
animator[i].update(1000 * delta);
}
raycast();
//x=foto[0].position.x;
//y=foto[0].position.y;
//z=foto[0].position.z;
//foto[0].position.set(x+0.1,y,z);
controls.update();
}
function TextureAnimator(texture, tilesHoriz, tilesVert, numTiles, tileDispDuration){
// note: texture passed by reference, will be updated by the update function.
this.tilesHorizontal = tilesHoriz;
this.tilesVertical = tilesVert;
// how many images does this spritesheet contain?
// usually equals tilesHoriz * tilesVert, but not necessarily,
// if there at blank tiles at the bottom of the spritesheet.
this.numberOfTiles = numTiles;
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 1 / this.tilesHorizontal, 1 / this.tilesVertical );
// how long should each image be displayed?
this.tileDisplayDuration = tileDispDuration;
// how long has the current image been displayed?
this.currentDisplayTime = 0;
// which image is currently being displayed?
this.currentTile = 0;
this.update = function( milliSec )
{
this.currentDisplayTime += milliSec;
while (this.currentDisplayTime > this.tileDisplayDuration)
{
this.currentDisplayTime -= this.tileDisplayDuration;
this.currentTile++;
if (this.currentTile == this.numberOfTiles)
this.currentTile = 0;
var currentColumn = this.currentTile % this.tilesHorizontal;
texture.offset.x = currentColumn / this.tilesHorizontal;
var currentRow = Math.floor( this.currentTile / this.tilesHorizontal );
texture.offset.y = currentRow / this.tilesVertical;
}
};
}
function raycast(){
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( scene.children );
if ( intersects.length > 0 ) {
if ( INTERSECTED != intersects[ 0 ].object ) {
//if ( INTERSECTED )
//INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
INTERSECTED = intersects[ 0 ].object;
//INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
//INTERSECTED.material.emissive.setHex( 0xff0000 );
if ( intersects[ 0 ].object.name!="" && modosimple==false){
/*context1.clearRect(0,0,640,480);
var message = intersects[ 0 ].object.name;
var metrics = context1.measureText(message);
var width = metrics.width;
context1.fillStyle = "rgba(0,0,0,0.95)"; // black border
context1.fillRect( 0,0, width+8,20+8);
context1.fillStyle = "rgba(255,255,255,0.95)"; // white filler
context1.fillRect( 2,2, width+4,20+4 );
context1.fillStyle = "rgba(0,0,0,1)"; // text color
context1.fillText( message, 4,20 );
texture1.needsUpdate = true;*/
gui.remove(contenido);
if(intersects[ 0 ].object.name=="Enemigo"){
var parameters =
{
contenido: "Atacantes: "+intersects[ 0 ].object.object.geometry.parameters.height
}
}
else{
var parameters =
{
contenido: intersects[ 0 ].object.name
}
}
contenido=gui.add( parameters, 'contenido' ).name('Descripción').listen();
//console.log(intersects[ 0 ].object);
}
else{
if(modosimple==false){
gui.remove(contenido);
var parameters =
{
contenido: ""
}
contenido=gui.add( parameters, 'contenido' ).name('Descripción').listen();
}
//context1.clearRect(0,0,300,300);
//texture1.needsUpdate = true;
}
//console.log(INTERSECTED);
}
}
else{
//if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
INTERSECTED = null;
//context1.clearRect(0,0,300,300);
//texture1.needsUpdate = true;
}
}
function onDocumentMouseMove( event )
{
// the following line would stop any other event handler from firing
// (such as the mouse's TrackballControls)
// event.preventDefault();
// update sprite position
//sprite1.position.set( event.clientX, event.clientY - 20, 0 );
//sprite1.position.set( (event.clientX / window.innerWidth)* 2 - 1, (event.clientY / window.innerHeight) * 2 + 1, 5 );
//sprite1.position.set( 0, 0, 20 );
//console.log(event.clientX+" "+event.clientY+ " " + window.innerWidth + " " + window.innerHeight)
// update the mouse variable
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
//mouse.x = ( (event.clientX -renderer.domElement.offsetLeft) / renderer.domElement.width ) * 2 - 1;
//mouse.y = -( (event.clientY - renderer.domElement.offsetTop) / renderer.domElement.height ) * 2 + 1;
/*
var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);
vector.unproject( camera );
var dir = vector.sub( camera.position ).normalize();
var distance = - camera.position.z / dir.z;
//var distance = ( targetZ - camera.position.z ) / vec.z
var pos = camera.position.clone().add( dir.multiplyScalar( distance ) );
sprite1.position.set( pos.x, pos.y, 0 );
*/
//console.log(mouse.x + " " + mouse.y);
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment