12-game-pick.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Five Planets</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style>
body {
width:100%;
height:100%;
padding:0;
margin:0;
overflow:hidden;
}
</style>
<link rel="stylesheet" type="text/css" href="../css/screen.css"/>
<link rel="stylesheet" type="text/css" href="../css/ui.css"/>
<!-- LOAD JQUERY & REQUIERE -->
<script src="../frameworks/require.min.js"></script>
<script src="../frameworks/jquery-2.0.3.min.js"></script>
<!-- LOAD THREE.JS -->
<script src="../frameworks/three.js" defer></script>
<script src="../frameworks/renders/projector.js" defer></script>
<script src="../frameworks/loaders/DDSLoader.js" defer></script>
<script src="../frameworks/loaders/MTLLoader.js" defer></script>
<script src="../frameworks/loaders/OBJLoader.js" defer></script>
<script src="../frameworks/loaders/ColladaLoader.js" defer></script>
<script src="../frameworks/loaders/collada/Animation.js" defer></script>
<script src="../frameworks/loaders/collada/AnimationHandler.js" defer></script>
<script src="../frameworks/loaders/collada/KeyFrameAnimation.js" defer></script>
<!-- LOAD DAT.GUI & STATS-->
<script src="../frameworks/dat.gui.min.js" defer></script>
<script src="../frameworks/stats.js" defer></script>
<!-- GAME FILES-->
<script src="../core/ui/ui_v02.js" defer></script>
<script src="../core/controls/controls_v02.js" defer></script>
<script src="../core/world/world_v01.js" defer></script>
<script src="../core/world/ground_v01.js" defer></script>
<script src="../core/world/sky_v01.js" defer></script>
<script src="../core/world/nature_v01.js" defer></script>
<script src="../core/entities/template3D_v01.js" defer></script>
<script src="../core/entities/entity3D_v03.js" defer></script>
<script src="../core/ai/ai_path_v01.js" defer></script>
<script src="../core/ai/ai_random_v01.js" defer></script>
<script src="../core/api/api_v01.js" defer></script>
<script>
$(document).ready(function () {
$RG.baseDirectory="../";
$UI.drawloading();
$UI.loading.setValue(0);
$UI.loading.show();
$WORLD.distance = 130;
$WORLD.init3D({}, function () {
$UI.loading.setValue(0.05);//5%
$RG.templates={
"castle_wall_a": {"model" : "../data/models/castle/wall_a.obj"},
"castle_wall_b": {"model" : "../data/models/castle/wall_b.obj"},
"castle_wall_c": {"model" : "../data/models/castle/wall_c.obj"},
"castle_gate_wall": {"model" : "../data/models/castle/gate_wall.obj"},
"castle_metal_gate": {"model" : "../data/models/castle/metal_gate.obj"},
"castle_tower1": {"model" : "../data/models/castle/tower1.obj"},
"castle_tower2": {"model" : "../data/models/castle/tower2.obj"},
"castle_tower3": {"model" : "../data/models/castle/tower3.obj"},
"house1": {"model": "../data/models/houses01/house1-01.obj"},
"house2": {"model": "../data/models/houses01/house1-02.obj"},
"house3": {"model": "../data/models/houses01/house1-03.obj"},
"house4": {"model": "../data/models/houses01/house1-04.obj"},
"well1": {"model": "../data/models/houses01/well-01.obj"},
"bench1": {"model": "../data/models/houses01/bench-01.obj"},
"house17": {"model": "../data/models/houses05/house5-01.obj"},
"house18": {"model": "../data/models/houses05/house5-02.obj"},
"house19": {"model": "../data/models/houses05/house5-03.obj"},
"house20": {"model": "../data/models/houses05/house5-04.obj"},
"house21": {"model": "../data/models/houses05/house5-05.obj"},
"house22": {"model": "../data/models/houses06/house6-01.obj"},
"house23": {"model": "../data/models/houses06/house6-02.obj"},
"house25": {"model": "../data/models/houses06/house6-03.obj"},
"chest": {"model": "../data/models/objects/chest.obj", "scale":{"x":0.65,"y":0.65,"z":0.65}},
"money": {"model": "../data/models/objects/money.obj", "scale":{"x":0.5,"y":0.5,"z":0.5}},
"potion": {"model": "../data/models/objects/potion.obj", "scale":{"x":0.5,"y":0.5,"z":0.5}},
"tree": {"model": "../data/models/nature/Forest_A_FirTree_01.obj","scale":{"x":0.016,"y":0.016,"z":0.016}},
"villager01": {"model": "../data/models/people/aldeano01.dae", "type":1, "animation":true, "ai":"PathAI", "scale":{"x":1.5,"y":1.5,"z":1.5}, "rotate":{"x":-90,"y":0,"z":0}},
"aliendog": {"model": "../data/models/monsters/aliendog.dae", "type":1, "animation":true, "ai":"RandomAI", "scale":{"x":0.05,"y":0.05,"z":0.05}, "rotate":{"x":-90,"y":0,"z":-90}}
}
$WORLD.map = {
"x":256,
"z":256,
"startPosX":126,
"startPosZ":145,
"ground": {
"type":"basic",
"texture":"../data/graphics/textures/terrain/grass1.jpg",
"resX":2,
"resY":2
},
"sky": {
"type":"skysphere",
"colorAmbient" : "rgb(90, 90, 90)",
"intensityAmbient" : 0.5,
"sunlightcolor" : "rgb(255, 255, 255)",
"sunlightposition": {"x":10, "y":20, "z":0},
"sunlightintensity" : 1,
"texture":"../data/graphics/textures/sky/skydome.jpg",
"fogColor": "rgb(225, 225, 225)",
"fogNear":70,
"fogFar":130
},
"nature": {
"type":"basic",
"patterns": {
"bushes":{
"freqX":5,
"freqZ":5,
"elements":[
{"object":"../data/graphics/textures/vegetation/grass.png","width":1.5,"height":1.5},
{"object":"../data/graphics/textures/vegetation/struik.png","width":1.5,"height":1.5}
]
},
"hightTrees":{
"freqX":12,
"freqZ":12,
"elements":[
{"object":"../data/graphics/textures/vegetation/tree06.png","width":10,"height":20.68},
{"object":"../data/graphics/textures/vegetation/tree07.png","width":12,"height":22.43}
]
}
},
"zones": [
{"pattern":"hightTrees","minX":50,"minZ":60,"maxZ":260,"maxX":118},
{"pattern":"bushes","minX":20,"minZ":50,"maxZ":260,"maxX":117},
{"pattern":"hightTrees","minX":110,"minZ":40,"maxZ":110,"maxX":200},
{"pattern":"bushes","minX":110,"minZ":80,"maxZ":113,"maxX":140},
{"pattern":"hightTrees","minX":0,"minZ":217,"maxZ":280,"maxX":230}
]
},
"map3D": [
{ "template": "castle_wall_c", "x": 214, "z": 110, "rY": -90 , "coment":"Size X:120-230, z:110-215"},
{ "template": "castle_tower2", "x": 210, "z": 110 },
{ "template": "castle_wall_a", "x": 199, "z": 110, "rY": -90 },
{ "template": "castle_tower1", "x": 188, "z": 110, "rY": -90 },
{ "template": "castle_gate_wall", "x": 177, "z": 110, "rY": -90 },
{ "template": "castle_metal_gate", "x": 177, "z": 110, "rY": -90 },
{ "template": "castle_tower1", "x": 166, "z": 110, "rY": -90 },
{ "template": "castle_wall_a", "x": 155, "z": 110, "rY": -90 },
{ "template": "castle_tower2", "x": 143, "z": 110 },
{ "template": "castle_wall_c", "x": 120, "z": 129},
{ "template": "castle_tower1", "x": 120, "z": 134},
{ "template": "castle_gate_wall", "x": 120, "z": 145},
{ "template": "castle_metal_gate", "x": 120, "z": 145, "y":0},
{ "template": "castle_tower1", "x": 120, "z": 156},
{ "template": "castle_wall_b", "x": 120, "z": 173},
{ "template": "castle_tower3", "x": 120, "z": 192},
{ "template": "castle_wall_c", "x": 140, "z": 215, "rY": 90},
{ "template": "castle_tower2", "x": 144, "z": 215},
{ "template": "castle_wall_b", "x": 157, "z": 215, "rY": 90 },
{ "template": "castle_tower2", "x": 176, "z": 215},
{ "template": "castle_wall_b", "x": 190, "z": 215, "rY": 90 },
{ "template": "castle_tower2", "x": 210, "z": 215},
{ "template": "castle_wall_c", "x": 233, "z": 199, "rY": 180 },
{ "template": "castle_tower2", "x": 233, "z": 132},
{ "template": "castle_wall_b", "x": 233, "z": 150, "rY": 180 },
{ "template": "castle_tower2", "x": 233, "z": 165},
{ "template": "castle_wall_b", "x": 233, "z": 185, "rY": 180 },
{ "template": "castle_tower2", "x": 233, "z": 199},
{ "template": "house1", "x": 155, "z": 150, "rY": -25, "comment" : "houses01" },
{ "template": "well1", "x": 135, "z": 146, "rY": -45, "interact":"$RG.say('He encontrado una moneda!')" },
{ "template": "bench1", "x": 145, "z": 153, "rY": -25 },
{ "template": "house22", "x": 134, "z": 130,"rY": 110 },
{ "template": "house23", "x": 150, "z": 125,"rY": 45 },
{ "template": "house4", "x": 170, "z": 132, "rY": -25},
{ "template": "house17", "x": 135, "z": 162, "rY": -100, "comment" : "houses05" },
{ "template": "house18", "x": 154, "z": 172,"rY": -45},
{ "template": "house19", "x": 170, "z": 170,"rY": -55 },
{ "template": "house20", "x": 174, "z": 155,"rY": -35 },
{ "template": "house21", "x": 178, "z": 142,"rY": 45 },
{ "template": "house22", "x": 133, "z": 180,"rY": 200, "comment" : "houses06" },
{ "template": "house3", "x": 148, "z": 190, "rY": -15 },
{ "template": "house2", "x": 168, "z": 190, "rY": 20 },
{ "template": "house25", "x": 185, "z": 190, "rY": -5 },
{ "template": "tree", "x": 145, "z": 141 },
{ "template": "tree", "x": 146, "z": 166 },
{ "template": "villager01", "x": 139, "z": 144, "path":[[171,0,131],[164,0,130],[159,0,130],[156,0,134],[149,0,141],[145,0,145],[139,0,150],[129,0,149],[127,0,144]
,[133,0,140],[169,0,131],[140,0,138],[144,0,135],[145,0,131],[146,0,129],[147,0,128],[149,0,126],[148,0,128],[144,0,130],[142,0,126],[141,0,121],[149,0,117]
,[160,0,121],[136,0,129],[166,0,130],[169,0,131]]},
{ "template": "villager01", "x": 140, "z": 145, "path":[[135,0,133],[136,0,136],[131,0,142],[132,0,152],[141,0,152],[145,0,163],[144,0,173],[142,0,184],[138,0,190]
,[127,0,191.5],[120.5,0,191.5],[120.5,0,159],[121,0,156],[128,0,156],[133,0,150],[132,0,143],[137,0,138],[136,0,134]]},
{ "template": "villager01", "x": 140, "z": 145, "path":[[135,0,179],[136,0,179],[140,0,177],[152,0,181],[156,0,185],[157,0,190],[160,0,194],[163,0,192],[167,0,190]
,[172,0,189],[176,0,188],[179,0,190],[180,0,190],[183,0,190],[185,0,190]]},
{ "template": "aliendog", "x": 90, "z": 140, "minX":85,"maxX":111,"minZ":117,"maxZ":140},
{ "template": "aliendog", "x": 100, "z": 141, "minX":85,"maxX":111,"minZ":140,"maxZ":163},
{ "template": "aliendog", "x": 105, "z": 149, "minX":90,"maxX":110,"minZ":132,"maxZ":150},
{ "template": "chest", "x": 140, "y":0.65, "z": 160, "rY": 75, "interact":"$RG.say('El baúl está vacio!')" },
{ "template": "chest", "x": 132, "y":0.65, "z": 137, "rY": -75, "interact":"$RG.say('El baúl está vacio!')" },
{ "template": "money", "x": 152, "y":0.18, "z": 141, "interact":"$RG.say('He encontrado un montón de monedas!')" },
{ "template": "potion", "x": 155, "y":0.25, "z": 167, "interact":"$RG.say('He encontrado una poción')" }
]
};
$UI.draw();
$WORLD.showStats();
$WORLD.drawGround();
$WORLD.drawSky();
$WORLD.drawNature();
$RG.loadTemplates( function() {
var elements=$WORLD.map.map3D.length;
for (var i=0;i<elements;i++){
var props=$WORLD.map.map3D[i];
var ent=new $RG.Entity3D(props);
ent.addToWorld();
$UI.loading.setValue( ((i/elements)*0.20) +0.80);
}
var path=new THREE.CatmullRomCurve3([
new THREE.Vector3(0/2, 2, 100/2),
new THREE.Vector3(10/2, 2, 80/2),
new THREE.Vector3(30/2, 2, 110/2),
new THREE.Vector3(50, 2, 0/2),
new THREE.Vector3(60/2, 2, 0/2),
new THREE.Vector3(70/2, 2, 100/2),
new THREE.Vector3(85/2, 2, 55/2),
new THREE.Vector3(100/2, 2, 65/2),
new THREE.Vector3(0/2, 2, 100/2)])
$WORLD.camera.position.set(126,2,145);
$WORLD.controls = new $CONTROLS.FirstPersonControls ($WORLD.camera,document,"../data/graphics/ui/ico/spyhole.png");
$WORLD.controls.verticalMin = -30;
$WORLD.controls.verticalMax = +30;
$WORLD.controls.minX=124;
$WORLD.controls.minZ=117;
$WORLD.controls.maxX=226;
$WORLD.controls.maxZ=209;
$WORLD.controls.showPosition();
$WORLD.addToListUpdate ($WORLD.controls);
setTimeout(function() {
$WORLD.startAnimation();
$UI.loading.hide();
},500
)
},function () {
//error
},function (template,i,elements) {
//Calculo un 75% para la carga de las plantillas
$UI.loading.setValue( ((i/elements)*0.75) +0.05);
}
);
});
})
</script>
<link rel="stylesheet" href="../samples/css/sample.css">
<script src="../samples/js/sample.js"></script>
</head>
<body>
<div id="sample-info-panel">
Q/E:Movimiento hacia la izquierda/derecha. <br>
I/Botón derecho ratón: Interacturar con objeto. <br>
A/D o Flecha derecha/izquierda - Giro hacia la derecha/izquierda.<br>
Inicio/Fin: Giro cabeza hacia arriba o abajo.<br>
W/S/ o Flecha arriba/abajo: Adelante/Atras.<br>
SHIFT:Correr.<br>
GAMEPAD: Joystick izquierdo - Movimiento / Joystick derecho - Giro cabeza.<br>
GAMEPAD: Botón 4 - correr / Botón 5 - interactuar.<br>
</div>
<!-- butons -->
<div id="sample-info">
</div>
<div id="sample-buttons" class="sample-btn">
</div>
<div id="lyr_loading">
<div id="lyr_loading_background"></div>
<div id="lyr_loading_logo" class="ui_logo"></div>
</div>
</body>
</html>
core/controls/controls_v02.js
var $CONTROLS = $CONTROLS || {};
$CONTROLS.FirstPersonControls = function ( object, domElement, spyhole ) {
var self=this;
this.object = object;
this.target = new THREE.Vector3( 0, 0, 0 );
this.domElement = ( domElement !== undefined ) ? domElement : document;
this.container = ( this.domElement == document ) ? document.body : this.domElement;
this.spyhole=false;
if (spyhole) {
this.spyhole = new THREE.Vector2();
this.spyholeElem=document.createElement("img");
this.spyholeElem.src=spyhole;
this.spyholeElem.style.position="absolute";
this.spyholeElem.style.left="50%";
this.spyholeElem.style.top="50%";
this.spyholeElem.style.height="40px";
this.spyholeElem.style.width="40px";
this.spyholeElem.style.marginTop= "-20px";
this.spyholeElem.style.marginLeft= "-20px";
this.spyholeElem.style.display="none";
this.container.appendChild(this.spyholeElem);
}
this.enabled = true;
this.eyeY=2;
this.movementSpeed = 3.5;
this.movementSpeedRun = 6.0;
this.lookSpeed = 0.02;
this.mouse = new THREE.Vector2();
this.raycaster = new THREE.Raycaster();
this.raycaster.far=5;
this.mouseMovementX = 0;
this.mouseMovementY = 0;
this.lon = 0;
this.theta = 0;
this.lat = 0;
this.phi = 0;
this.moveForward = false;
this.moveBackward = false;
this.moveLeft = false;
this.moveRight = false;
this.turnLeft = false;
this.turnRight = false;
this.turnUp = false;
this.turnDown = false;
this.run = false;
this.jump = false;
this.showPosition=false;
this.verticalMin = -85;
this.verticalMax = +85;
this.minX=0;
this.maxX=256;
this.minZ=0;
this.maxZ=256;
this.viewHalfX = 0;
this.viewHalfY = 0;
this.hasAPIGamepad= ("getGamepads" in navigator);
this.haveEventsGamepad = ('ongamepadconnected' in window);
this.priorityControl = 0;//0 - Mouse, 1 - Gamepad
this.gamepad=null;
if ( this.domElement !== document ) {
this.domElement.setAttribute( 'tabindex', - 1 );
}
this.handleResize = function () {
if ( this.domElement === document ) {
this.viewHalfX = window.innerWidth / 2;
this.viewHalfY = window.innerHeight / 2;
} else {
this.viewHalfX = this.domElement.offsetWidth / 2;
this.viewHalfY = this.domElement.offsetHeight / 2;
}
};
this.getPosition = function ( ) {
return this.object.position;
}
this.showPosition = function () {
var o=document.createElement('div');
o.id="panelInfoControls";
document.body.appendChild(o);
this.panelInfo=o;
this.showPosition=true;
}
this.setEnabled = function(val) {
this.enabled = val;
}
this.onMouseDown= function ( event ) {
this.interact(this.mouse,this.object);
};
this.interact = function(oPointer,oCamara) {
this.raycaster.setFromCamera( oPointer, oCamara );
var intersects = this.raycaster.intersectObjects( $WORLD.entitiesInteract);
if ( intersects.length > 0 ) {
var mesh=intersects[ 0 ].object;
if ("entity3D" in mesh && "interact" in mesh.entity3D.prop) {
eval(mesh.entity3D.prop.interact);
}
}
};
this.onMouseMove = function ( event ) {
this.mouseMovementX = this.mouseMovementX + (event.movementX || 0);
this.mouseMovementY = this.mouseMovementY + (event.movementY || 0);
this.mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
this.mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
};
this.onEscape = function() {
return;
}
this.onKeyDown = function ( event ) {
switch ( event.keyCode ) {
case 27: /*escape*/
this.onEscape();
break;
case 73: /*I*/
this.interact(this.spyhole,this.object);
break;
case 36: /*Start*/ this.turnUp = true; break;
case 35: /*End*/ this.turnDown = true; break;
case 37: /*left*/
case 65: /*A*/ this.turnLeft = true; break;
case 39: /*right*/
case 68: /*D*/ this.turnRight = true; break;
case 81: /*Q*/ this.moveLeft = true; break;
case 69: /*E*/ this.moveRight = true; break;
case 38: /*up*/
case 87: /*W*/ this.moveForward = true; break;
case 40: /*down*/
case 83: /*S*/ this.moveBackward = true; break;
case 16: /*shift*/ this.run = true; break;
}
};
this.onKeyUp = function ( event ) {
switch ( event.keyCode ) {
case 36: /*Start*/ this.turnUp = false; break;
case 35: /*End*/ this.turnDown = false; break;
case 37: /*left*/
case 65: /*A*/ this.turnLeft = false; break;
case 39: /*right*/
case 68: /*D*/ this.turnRight = false; break;
case 81: /*Q*/ this.moveLeft = false; break;
case 69: /*E*/ this.moveRight = false; break;
case 38: /*up*/
case 87: /*W*/ this.moveForward = false; break;
case 40: /*down*/
case 83: /*S*/ this.moveBackward = false; break;
case 16: /*shift*/ this.run = false; break;
}
};
this.update = function( delta ) {
if ( this.enabled === false ) return;
var bMoveForward=this.moveForward;
var bMoveBackward=this.moveBackward;
var bMoveLeft=this.moveLeft;
var bMoveRight=this.moveRight;
var actualLookSpeed = delta * this.lookSpeed;
var nRotateX=0;
var nRotateY=0;
var bRun = this.run;
var bInteract = false;
if (this.turnLeft) {
nRotateX=-1500 * actualLookSpeed;
}
if (this.turnRight) {
nRotateX=1500 * actualLookSpeed;
}
if (this.turnUp) {
nRotateY=-1500 * actualLookSpeed;
}
if (this.turnDown) {
nRotateY=1500 * actualLookSpeed;
}
if (this.mouseMovementX > 0 || this.mouseMovementY>0) this.priorityControl=0;
this.mouseMovementX=0;
this.mouseMovementY=0;
//GAMEPAD CONTROLS
if (this.hasAPIGamepad) {
this.gamepad=navigator.getGamepads()[0];
if (this.gamepad!=null) {
if (this.spyholeElem.style.display="none") this.spyholeElem.style.display="block";
bMoveRight=bMoveRight || (this.gamepad.axes[0]>0.3);
bMoveLeft=bMoveLeft || (this.gamepad.axes[0]<-0.3);
bMoveBackward=bMoveBackward || (this.gamepad.axes[1]>0.3);
bMoveForward=bMoveForward || (this.gamepad.axes[1]<-0.3);
if (this.gamepad.axes.length>3){
if (this.gamepad.axes[2]<-0.3 || this.gamepad.axes[2]>0.3) {
nRotateX=this.gamepad.axes[2]*1500 * actualLookSpeed;
this.priorityControl=1;
} else {
if (this.priorityControl==1) nRotateX=0;
}
if (this.gamepad.axes[3]<-0.3 || this.gamepad.axes[3]>0.3) {
nRotateY=this.gamepad.axes[3]*1500 * actualLookSpeed;
this.priorityControl=1;
} else {
if (this.priorityControl==1) nRotateY=0;
}
}
bRun = bRun || this.gamepad.buttons[4].pressed;
bInteract = this.gamepad.buttons[5].pressed;
}
}
if (bInteract) {
this.interact(this.spyhole,this.object);
}
var actualMoveSpeed = delta * (bRun?this.movementSpeedRun:this.movementSpeed);
if ( bMoveForward) this.object.translateZ( - (actualMoveSpeed) );
if ( bMoveBackward) this.object.translateZ( actualMoveSpeed );
if ( bMoveLeft) this.object.translateX( - actualMoveSpeed );
if ( bMoveRight) this.object.translateX( actualMoveSpeed );
this.object.position.y=this.eyeY;
if (this.minX>this.object.position.x) {
this.object.position.x=this.minX;
} else if (this.maxX<this.object.position.x) {
this.object.position.x=this.maxX;
}
if (this.minZ>this.object.position.z) {
this.object.position.z=this.minZ;
} else if (this.maxZ<this.object.position.z) {
this.object.position.z=this.maxZ;
}
if (this.showPosition) {
this.panelInfo.innerHTML=" x: "+Math.round(this.object.position.x,0.1)+" z: "+Math.round(this.object.position.z,0.1)+" "+this.mouseMovementY;
}
this.lon += nRotateX;
this.theta = THREE.Math.degToRad( this.lon );
this.lat -= nRotateY
this.lat = Math.max( this.verticalMin, Math.min( this.verticalMax, this.lat ) );
this.phi = THREE.Math.degToRad( 90 - this.lat );
var targetPosition = this.target,
position = this.object.position;
targetPosition.x = position.x + 100 * Math.sin( this.phi ) * Math.cos( this.theta );
targetPosition.y = position.y + 100 * Math.cos( this.phi );
targetPosition.z = position.z + 100 * Math.sin( this.phi ) * Math.sin( this.theta );
this.object.lookAt( targetPosition );
};
this.dispose = function() {
this.domElement.removeEventListener( 'mousemove', _onMouseMove, false );
window.removeEventListener( 'keydown', _onKeyDown, false );
window.removeEventListener( 'keyup', _onKeyUp, false );
}
var _onMouseDown = bind( this, this.onMouseDown );
var _onMouseMove = bind( this, this.onMouseMove );
var _onKeyDown = bind( this, this.onKeyDown );
var _onKeyUp = bind( this, this.onKeyUp );
this.domElement.addEventListener( 'mousedown', _onMouseDown, false );
this.domElement.addEventListener( 'mousemove', _onMouseMove, false );
window.addEventListener( 'keydown', _onKeyDown, false );
window.addEventListener( 'keyup', _onKeyUp, false );
function bind( scope, fn ) {
return function () {
fn.apply( scope, arguments );
};
}
this.handleResize();
};
core/ai/ai_random_v01.js
var $AIS = $AIS || {};
$AIS.RandomAI = function (object, prop) {
this._object=object;
this.velocity=3; //unidades por segundo
if (prop.velocity){
this.velocity=prop.velocity;
}
this.minX=prop.minX;
this.maxX=prop.maxX;
this.minZ=prop.minZ;
this.maxZ=prop.maxZ;
this.directionWalk = new THREE.Vector3(0.5, 0, 0.5);
this.changeDirection();
};
$AIS.RandomAI.prototype.changeDirection = function () {
this._lastRandomX = Math.random();
this._lastRandomZ = 1 - this._lastRandomX;
if (Math.random() < 0.5) {
this._lastRandomX = this._lastRandomX * -1;
}
if (Math.random() < 0.5) {
this._lastRandomZ = this._lastRandomZ * -1;
}
this.directionWalk.x = this._lastRandomX;
this.directionWalk.z = this._lastRandomZ;
var pos = this.directionWalk.clone();
pos.add(this._object.position);
this._object.lookAt(pos);
}
$AIS.RandomAI.prototype.update = function ( delta ) {
var p=this._object.position;
var x=p.x+ this.directionWalk.x * this.velocity * delta;
var z=p.z+ this.directionWalk.z * this.velocity * delta;
var bChange=false;
if (x<this.minX) {
x=this.minX;bChange=true;
} else if (x>this.maxX) {
x=this.maxX;bChange=true;
};
if (z<this.minZ) {
z=this.minZ;bChange=true;
} else if (z>this.maxZ) {
z=this.maxZ;bChange=true;
};
if (bChange) {
this.changeDirection();
};
p.set(x, p.y, z)
}
$AIS.RandomAI.prototype.getPosition = function ( ) {
return this._object.position;
}
core/ai/ai_path_v01.js
var $AIS = $AIS || {};
$AIS.PathAI = function (object, prop) {
var vecs=[];
for (var i=0;i 1) {this._pos = 0;};
this._object.lookAt(this.path.getPointAt(this._pos));
}
$AIS.PathAI.prototype.showPath = function ( ) {
var geometry = new THREE.Geometry();
var points = this.path.getPoints(50);
var material = new THREE.LineBasicMaterial({
color: 0xff00f0
});
geometry.vertices = points;
var line = new THREE.Line(geometry, material);
line.position.set(0,0.25,0)
$WORLD.scene.add(line);
}
$AIS.PathAI.prototype.getPosition = function ( ) {
return this._object.position;
}
core/world/template3D_v01.js
var $RG = $RG || {};
$RG.templates=[];
$RG.Types = $RG.Types || {};
$RG.Types.type3D = { "OBJ": 0, "DAE":1, "JSON":2, "SPRITE":3 };
$RG.loadTemplates = function(fSuc, fFail, fProgress) {
var i=0;
var list=Object.keys($RG.templates);
var _load = function () {
if (list.length==i) {
fSuc();
return;
}
var ent=$RG.templates[list[i]].template3D=new $RG.Template3D(list[i]);
if (fProgress) {fProgress(list[i],i+1,list.length);}
i++;
ent.load({},_load, fFail);
}
_load();
};
//CLASSE: Template3D
$RG.Template3D = function (id) {
this.id = id;
this._template=$RG.templates[id];
this.isReady = false;
this.mesh = null;
};
$RG.Template3D.prototype.load = function (oPars, fSuc, fFail) {
var temp=this._template;
if (!("type" in temp)) temp.type = $RG.Types.type3D.OBJ;
if (temp.type == $RG.Types.type3D.OBJ) {
this._loadOBJ(oPars,fSuc,fFail);
} else if (temp.type == $RG.Types.type3D.DAE) {
this._loadDAE(oPars,fSuc,fFail);
} else if (temp.type == $RG.Types.type3D.SPRITE) {
this._loadSPRITE(oPars,fSuc,fFail);
} else {
fFail();
}
}
$RG.Template3D.prototype._loadOBJ = function (oPars, fSuc, fFail) {
var $O = this;
var onProgress = function (xhr) { };
var onError = function (xhr) { if (fFail) { fFail($O); } };
var mtlLoader = new THREE.MTLLoader();
var pathArray = $O._template.model.split('/');
var mP = '';
for (var i = 0; i < pathArray.length-1; i++) {
mP += pathArray[i];
mP += "/";
}
var model = pathArray[pathArray.length - 1];
mtlLoader.setPath(mP);
model=model.substr(0,model.length - 4)
mtlLoader.load(model + '.mtl', function (materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath(mP);
objLoader.load(model + '.obj', function (object) {
object.traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.castShadow = true;
}
});
$O.mesh = object;
$O.mesh.castShadow = true;
$O.isReady = true;
if (fSuc) { fSuc($O); }
}, onProgress, onError);
}, onProgress, onError);
};
$RG.Template3D.prototype._loadDAE = function (oPars, fSuc, fFail) {
var $O = this;
var temp=$O._template;
var loader = new THREE.ColladaLoader();
var onProgress = function (xhr) { };
var onError = function (xhr) { if (fFail) { fFail($O); } };
loader.load(temp.model, function (collada) {
var object = collada.scene;
var mesh=null;
object.traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.castShadow = true;
mesh=child;
}
});
if (temp.scale) {
mesh.scale.x = temp.scale.x;
mesh.scale.y = temp.scale.y;
mesh.scale.z = temp.scale.z; //Corregir escala
}
if (temp.rotate) {
if (temp.rotate.x) {
mesh.rotateX (temp.rotate.x * Math.PI / 180);
};
if (temp.rotate.y) {
mesh.rotateY (temp.rotate.y * Math.PI / 180);
};
if (temp.rotate.z) {
mesh.rotateZ (temp.rotate.z * Math.PI / 180);
}//Corregir rotación
}
$O.mesh = object;
$O.isReady = true;
fSuc(mesh);
}, onProgress, onError);
};
$RG.Template3D.prototype._loadSPRITE = function (oPars, fSuc, fFail) {
var $O = this;
var onProgress = function (xhr) { };
var onError = function (xhr) { if (fFail) { fFail($O); } };
$WORLD.textureLoader.load($O._template.model, function (texture) {
var mat = new THREE.SpriteMaterial( { map: texture, useScreenCoordinates: false, transparent: true,fog:true} );
var object =new THREE.Sprite(mat);
object.scale.y=$O._template.height;
object.scale.x=$O._template.width;
$O.mesh = object;
$O.isReady = true;
fSuc($O.mesh);
}, onProgress, onError);
};
core/world/entity3D_v03.js
var $RG = $RG || {};
$RG.entities=[];
$WORLD.entitiesInteract = $WORLD.entitiesInteract || [];
$RG.Entity3D = function (properties) {
this.template=properties.template
this.prop=properties;
this.mesh=null;
$RG.entities.push(this)
}
$RG.Entity3D.prototype.addToWorld = function () {
var self = this;
var prop=this.prop;
var templ=$RG.templates[prop.template];
//Clonar la figura 3D, posicionar y rotar
var mesh=templ.template3D.mesh.clone();
var y=0
mesh.position.set(prop.x, ((prop.y)?prop.y:0), prop.z);
if (!(prop.rY)) prop.rY=0;
if (templ.type==3) {
mesh.translateY(templ.height/2-0.05);
}
mesh.rotateY(prop.rY * Math.PI / 180);
this.mesh=mesh;
//Añadir logica objetos con interacción
if ("interact" in this.prop) {
mesh.traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.entity3D=self;
$WORLD.entitiesInteract.push(child);
}
});
};
//Animar el objeto si tienen una animación
if (templ.animation) {
mesh.traverse(function (child) {
if (child instanceof THREE.SkinnedMesh) {
var animation = new THREE.Animation(child, child.geometry.animation);
animation.play();
}
})
};
//Aplicar la inteligencia artificial si hay definida
if (templ.ai) {
this.ai=new $AIS[templ.ai](this.mesh, this.prop);
$WORLD.addToListUpdate (this.ai);
}
$WORLD.scene.add(mesh);
return mesh;
};
core/world/nature_v01.js
//****************************
// CREA LA NATURALEZA
//****************************
$WORLD.drawNature = function () {
var nat=$WORLD.map.nature;
//CARGAR EN MEMORIA TODOS LOS SPRITES
var list=Object.keys(nat.patterns);
for (var i=0;i<list.length;i++) {
var pat=nat.patterns[list[i]];
for (var n=0;n<pat.elements.length;n++) {
var el=pat.elements[n];
var mat = new THREE.SpriteMaterial( { map: $WORLD.textureLoader.load(el.object), useScreenCoordinates: false, transparent: true,fog:true} );
var obj =new THREE.Sprite(mat);
obj.scale.y=el.height;
obj.scale.x=el.width;
el._sprite = obj;
}
}
//PARA CADA ZONA AÑADIR LOSaerboles
for (var j=0;j<nat.zones.length;j++) {
var zon=nat.zones[j];
var pat=nat.patterns[zon.pattern];
for (var x=zon.minX;x<zon.maxX-pat.freqX;x+=pat.freqX) {
for (var z=zon.minZ;z<zon.maxZ-pat.freqZ;z+=pat.freqZ) {
var i=Math.round(Math.random()*(pat.elements.length-1));
var el=pat.elements[i];
var obj2=el._sprite.clone();z
obj2.position.set(x+(Math.random()*pat.freqX), el.height/2-0.05, z+(Math.random()*pat.freqZ));
$WORLD.scene.add(obj2);
}
}
}
};
core/world/sky_v01.js
//****************************
// CREA EL CIELO, Y LAS LUCES
//****************************
$WORLD.sky= {
update:function(delta){
var p = $WORLD.controls.getPosition();
$WORLD.sky.skyBox.position.set(p.x, 0, p.z);
}
};
$WORLD.drawSky = function () {
var sky = $WORLD.map.sky;
if (sky.type=="skybox"){
$WORLD.drawSkybox(sky);
} else if (sky.type=="skysphere" && sky.texture!="") {
$WORLD.drawSkysphere(sky);
} else {
$WORLD.drawSkysphereNoImg(sky);
}
//CREAR LA LUZ DE AMBIENTE
$WORLD.ambientLight.color = new THREE.Color(sky.colorAmbient);
$WORLD.ambientLight.intensity = sky.intensityAmbient;
//CREAR LA LUZ DEL SOL
var light = new THREE.DirectionalLight(sky.sunlightcolor, sky.sunlightintensity);
light.castShadow = true;
light.shadow.mapSize.width = 2 * 512;
light.shadow.mapSize.height = 2 * 512;
light.shadow.camera.near = 0;
light.shadow.camera.far = 50; //ALTURA DEL CUBO
//DES DEL PUNTO CENTRAL INDICAN EL CUADRADO.
light.shadow.camera.top = 25; //X
light.shadow.camera.right = 25;
light.shadow.camera.left = -25;
light.shadow.camera.bottom = -25;
light.shadow.camera.visible = true;
$WORLD.sky.skyBox.add(light);
light.position.set(sky.sunlightposition.x, sky.sunlightposition.y, sky.sunlightposition.z);
light.target = $WORLD.sky.skyBox;
$WORLD.scene.fog.near = sky.fogNear;
if (sky.fogFar > 0 && ($WORLD.distance - $WORLD.distance / 4) > sky.fogFar) {
$WORLD.scene.fog.far = sky.fogFar;
}
$WORLD.scene.fog.color = new THREE.Color(sky.fogColor);
$WORLD.renderer.setClearColor($WORLD.scene.fog.color, 1);
$WORLD.addToListUpdate ($WORLD.sky);
};
$WORLD.drawSkybox=function (sky){
var cubemap = new THREE.CubeTextureLoader().load( sky.texture );
cubemap.format = THREE.RGBFormat;
var shader = THREE.ShaderLib['cube'];
shader.uniforms['tCube'].value = cubemap;
var skyBoxMaterial = new THREE.ShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms,
depthWrite: false,
side: THREE.BackSide
});
var distance=($WORLD.distance*2-20);
var c = Math.pow ((distance*distance)/2,0.5);
var skyBox = new THREE.Mesh( new THREE.BoxGeometry(c, c, c), skyBoxMaterial);
$WORLD.scene.add(skyBox);
$WORLD.sky.skyBox = skyBox;
};
$WORLD.drawSkysphere=function (sky){
var skyTexture = $WORLD.textureLoader.load(sky.texture);
var geometry = new THREE.SphereGeometry($WORLD.distance - 10, 30, 20);
var uniforms = {
texture: { type: 't', value: skyTexture }
};
var material = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: "varying vec2 vUV;" +
"\n" +
"void main() { " +
" vUV = uv;" +
" vec4 pos = vec4(position, 1.0);" +
" gl_Position = projectionMatrix * modelViewMatrix * pos;" +
"}",
fragmentShader: "uniform sampler2D texture;" +
"varying vec2 vUV;" +
"" +
" void main() {" +
" vec4 sample = texture2D(texture, vUV);" +
" gl_FragColor = vec4(sample.xyz, sample.w);" +
" }"
});
var skyBox = new THREE.Mesh(geometry, material);
skyBox.scale.set(-1, 1, 1);
skyBox.rotation.order = 'XZY';
skyBox.renderDepth = $WORLD.distance;
$WORLD.scene.add(skyBox);
$WORLD.sky.skyBox = skyBox;
};
$WORLD.drawSkysphereNoImg=function (sky){
var vertexShader ="varying vec3 vWorldPosition;"+
" "+
"void main() {"+
" vec4 worldPosition = modelMatrix * vec4( position, 1.0 );"+
" vWorldPosition = worldPosition.xyz;"+ //xyz
" "+
" gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );"+
"}";
var fragmentShader ="uniform vec3 topColor;"+
"uniform vec3 bottomColor;"+
"uniform float offset;"+
"uniform float exponent;"+
" "+
"varying vec3 vWorldPosition;"+
" "+
"void main() {"+
" float h = normalize( vWorldPosition + offset ).y;"+
" gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( h, exponent ), 0.0 ) ), 1.0 );"+
"}";
var uniforms = {
topColor: {type: "c", value: new THREE.Color(sky.topColor)}, bottomColor: {type: "c", value: new THREE.Color(sky.bottomColor)},
offset: {type: "f", value: 0}, exponent: {type: "f", value: 0.5}
}
var skyMaterial = new THREE.ShaderMaterial({vertexShader: vertexShader, fragmentShader: fragmentShader, uniforms: uniforms, side: THREE.BackSide, fog: false});
var skyBox = new THREE.Mesh( new THREE.SphereGeometry($WORLD.distance - 10, 30, 20), skyMaterial);
skyBox.rotation.order = 'XZY';
skyBox.renderDepth = $WORLD.distance;
$WORLD.scene.add(skyBox);
$WORLD.sky.skyBox = skyBox;
}
core/world/ground_v01.js
//****************************
// CREA EL SUELO DEL MUNDO
//****************************
$WORLD.drawGround = function () {
var map = $WORLD.map;
var groundTexture = $WORLD.textureLoader.load(map.ground.texture);
var x = $WORLD.distance * 2.25 + map.x
var z = $WORLD.distance * 2.25 + map.z
groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
groundTexture.repeat.set(x / 2, z / 2);
groundTexture.anisotropy = 16;
var groundMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff, map: groundTexture });
var mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(x, z), groundMaterial);
mesh.position.y = 0;
mesh.position.x = map.x / 2;
mesh.position.z = map.z / 2;
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
$WORLD.scene.add(mesh);
}
core/world/world_v01.js
//*******************************
//DEFINIR EL MUNDO
//*******************************
var $WORLD = $WORLD || {};
$WORLD.distance = 80;
$WORLD.renderer = null;
$WORLD.scene = null;
$WORLD.clock = null;
$WORLD.map=null;
$WORLD.controls=null;
$WORLD._objUpdate = [];
$WORLD.init3D=function(oPars, fSuc, fFail) {
var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
$WORLD.renderer = renderer;
$WORLD.scene = new THREE.Scene();
$WORLD.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, $WORLD.distance);
$WORLD.camera.position.set(0, 2, 0);
$WORLD.camera.lookAt(new THREE.Vector3(0,2,0) );
$WORLD.clock = new THREE.Clock();
$WORLD.controls={
getPosition: function(){
return $WORLD.camera.position;
}
}
$WORLD.textureLoader = new THREE.TextureLoader();
$WORLD.ambientLight = new THREE.AmbientLight(0xffffff,1);
$WORLD.scene.add($WORLD.ambientLight);
$WORLD.scene.fog = new THREE.Fog(0xffffff, 5, ($WORLD.distance - $WORLD.distance / 4)); //niebla
$WORLD.renderer.setClearColor($WORLD.scene.fog.color, 1);
window.addEventListener('resize', onWindowResize, false);
THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader());
fSuc();
}
$WORLD.showStats=function() {
if (!($WORLD.stats)) {
$WORLD.stats = new Stats();
$WORLD.stats.setMode(0);
document.body.appendChild($WORLD.stats.domElement);
$WORLD.addToListUpdate($WORLD.stats);
};
}
$WORLD.startAnimation = function () {
$WORLD.animate();
}
$WORLD.pauseAnimation = function () {
window.cancelAnimationFrame( $WORLD.idAnim );
}
$WORLD.addToListUpdate = function (obj) {
$WORLD._objUpdate.push(obj);
}
$WORLD.animate = function () {
$WORLD.idAnim = requestAnimationFrame($WORLD.animate);
var delta = $WORLD.clock.getDelta();
for (var i = 0; i < $WORLD._objUpdate.length; i++) {
$WORLD._objUpdate[i].update(delta);
};
THREE.AnimationHandler.update(delta);
$WORLD.renderer.render($WORLD.scene, $WORLD.camera);
};
function onWindowResize() {
$WORLD.camera.aspect = window.innerWidth / window.innerHeight;
$WORLD.camera.updateProjectionMatrix();
$WORLD.renderer.setSize(window.innerWidth, window.innerHeight);
}
core/ui/ui_v02.js
var $UI = $UI || {};
//LOADING
$UI.drawloading = function () {
$UI.loading = new $UI.Loading("lyr_loading", { title: 'Cargando...' });
}
$UI.Loading = function (cId,oPars) {
this.id = cId;
this.vaule = 0;
$('#' + cId).append('<div id="' + cId + '_loadbar" class="ui_loadingbar"><div id="' + cId + '_loadbarfill" class="ui_barfill" style="width:0px"></div><div class="ui_text">'+oPars.title+'</div></div>');
}
$UI.Loading.prototype.show = function () { $('#' + this.id).fadeIn("fast"); };
$UI.Loading.prototype.hide = function () { $('#' + this.id).fadeOut("slow"); };
$UI.Loading.prototype.setValue = function (nPor) {
if (nPor < 0) (nPor = 0);
if (nPor > 1) (nPor = 1);
$('#' + this.id + '_loadbarfill').css('width', Math.round(nPor * 670));
$('#' + this.id + '_background').css('-webkit-filter', 'grayscale(' + (100 - (nPor * 100)) + '%)');
$('#' + this.id + '_background').css('filter', 'grayscale(' + (100 - (nPor * 100)) + '%)');
};
//MESSAGE FRAME
$UI.Timewindow = function (cId, oPar) {
this.id = cId;
var cVal = '';
cVal = '<div class="portrait"></div><div class="text_time_window"></div>';
$('body').append('<div id="' + cId + '" class="ui_time_window" style="display:none">' + cVal + '</div>')
};
$UI.Timewindow.prototype.show = function (msg,ch) {
var id = '#' + this.id;
if (!ch) {
ch={"img_face_big":"data/graphics/portraits/mr_who.png"};
}
$('#' + this.id).css('display', 'block').find('.portrait').css('background', "url('" +$RG.baseDirectory + ch.img_face_big + "') no-repeat").css('background-size','100%');
$('#' + this.id).find('.text_time_window').text(msg);
try { clearTimeout(this.time_win); } catch (e) { };
this.time_win=setTimeout(function () { $(id).css('display', 'none'); }, 3000);
};
$UI.Timewindow.prototype.hide = function () {
$('#' + this.id).css('display', 'none');
};
//DRAW
$UI.draw = function () {
$UI.timewindow = new $UI.Timewindow("lyr_timewindow");
}
core/api/api_v01.js
$RG.say = function (msg,ch) {
$UI.timewindow.show(msg,ch);
}