10-skyshpere-noimg.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"/>
    
    <!-- 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.min.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/controls/controls_path_v01.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>

$(document).ready(function () {

    $WORLD.init3D({}, function () {
        $WORLD.map = {
        "x":256,
        "z":256,
        "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":"",
            "topColor": 0x0055ff,
            "bottomColor": 0xffffff,
            "fogColor": 0xffffff,
            "fogNear":6,
            "fogFar":50
            }
        };
        $WORLD.drawGround();
        $WORLD.drawSky();
        var path=new THREE.CatmullRomCurve3([
            new THREE.Vector3(5, 2, 25),
            new THREE.Vector3(9, 2, 20),
            new THREE.Vector3(15, 2, 35),
            new THREE.Vector3(35, 2, 5),
            new THREE.Vector3(20, 2, 5),
            new THREE.Vector3(15, 2, 20),
            new THREE.Vector3(3, 2, 7),
            new THREE.Vector3(15, 2, 3),
            new THREE.Vector3(5, 2, 5)])
        $WORLD.controls = new $CONTROLS.PathControls ($WORLD.camera, path,{"velocity":2});
        $WORLD.controls.showPath();
        $WORLD.addToListUpdate ($WORLD.controls)
        $WORLD.showStats();
        $WORLD.startAnimation();
    });
})

</script> 
</head>
<body>
</body>
</html>

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/controls/controls_path_v01.js


var $CONTROLS = $CONTROLS || {};

$CONTROLS.PathControls = function (object, path, prop) {
    this.path=path;
    this._object=object;
    this._pos=0;
    this.velocity=1; //unidades por segundo
    if (prop && prop.velocity){
        this.velocity=prop.velocity;
    }
    this._factor=this.velocity/this.path.getLength();
};

$CONTROLS.PathControls.prototype.update = function ( delta ) {
    this._object.position.copy(this.path.getPointAt(this._pos));
    this._pos += (this._factor  * delta);
    if (this._pos > 1) {this._pos = 0;};
    this._object.lookAt(this.path.getPointAt(this._pos));
}

$CONTROLS.PathControls.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);
}

$CONTROLS.PathControls.prototype.getPosition = function ( ) {
    return this._object.position;
}