2050.earth 代碼分析-——第五部分（rays、points、particles、ring、bg）

	/*
	██████╗  █████╗ ██╗   ██╗███████╗
	██╔══██╗██╔══██╗╚██╗ ██╔╝██╔════╝
	██████╔╝███████║ ╚████╔╝ ███████╗
	██╔══██╗██╔══██║  ╚██╔╝  ╚════██║
	██║  ██║██║  ██║   ██║   ███████║
	╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝   ╚══════╝
	*/

	var _light_material = new THREE.MeshBasicMaterial({
	    transparent: true,
	    opacity: .9,
	   	blending: THREE.AdditiveBlending,
	    side: THREE.DoubleSide,
	    depthWrite: false,
	    fog: true
	});
	var m = _light_material;
    m.map = planet.textureLoader.load( PlanetData.textures_path + "lightray.jpg" );//,
	m.map.wrapT = THREE.ClampToEdgeWrapping;
   

    var _light_material_yellow = _light_material.clone();
    _light_material_yellow.map = planet.textureLoader.load( PlanetData.textures_path + "lightray_yellow.jpg" );//,

	function addLightRay( _pos, has_works ) {

		var h = Math.random()*2 + 1;
		var geometry = new THREE.PlaneBufferGeometry( .3, h, 1 );
		var plane = new THREE.Mesh( geometry, has_works ? _light_material_yellow : _light_material );
	    var m = new THREE.Matrix4();
	    m.makeRotationX( Math.PI/2 );
	    m.setPosition( new THREE.Vector3(0, 0, -h/2) );
	    geometry.applyMatrix(m);
	    // cross plane of ray
	    var plane2 = plane.clone();
	    plane.add( plane2 );
	    plane2.rotation.z = Math.PI/2;
	    plane2.matrixAutoUpdate = false;
	    plane2.updateMatrix();

	    // main ray plane
	    plane.position.copy( _pos );
	    plane.lookAt( planet.container.position );
	    plane.matrixAutoUpdate = false;
	    plane.updateMatrix();

	    return plane;
	}


	function showRays( t, d ){
		var val = _light_material.map.offset;
		TweenLite.to( val, t, {
			delay: d,
			y: 0,
			ease: Sine.easeInOut
		});
	}

	function hideRays( t ){
		var val = _light_material.map.offset;
		TweenLite.to( val, t, {
			y: -1,
			ease: Sine.easeInOut
		});
	}

	
}

/*
██████╗  ██████╗ ██╗███╗   ██╗████████╗███████╗
██╔══██╗██╔═══██╗██║████╗  ██║╚══██╔══╝██╔════╝
██████╔╝██║   ██║██║██╔██╗ ██║   ██║   ███████╗
██╔═══╝ ██║   ██║██║██║╚██╗██║   ██║   ╚════██║
██║     ╚██████╔╝██║██║ ╚████║   ██║   ███████║
╚═╝      ╚═════╝ ╚═╝╚═╝  ╚═══╝   ╚═╝   ╚══════╝
*/
// POINTS
Planet.prototype.drawPoints = function (radius) {
    this.grid_shpere = new THREE.Object3D();
    // XRAY EARTH
    var _geometry = new THREE.SphereGeometry( radius*1.1, 66, 44 );
    
    var _material = new THREE.XRayMaterial({
        map: this.textureLoader.load( PlanetData.textures_path+"clouds.jpg" ),
        alphaProportion: .5,
        color: new THREE.Color( 0xfb2f2c5 ),
        opacity: 1,
        gridOffsetSpeed: .6
    });

    var clouds_mesh = new THREE.Mesh(_geometry, _material);
    clouds_mesh.matrixAutoUpdate = false;
    this.container.add( clouds_mesh );

    var total = _geometry.vertices.length*3;
    var positions = new Float32Array( total );
    var colors = new Float32Array( total );
    var alphas = new Float32Array( total );
    var color = new THREE.Color( 0xffffff );

    for (var i = 0; i < _geometry.vertices.length; i++) {
        var v = _geometry.vertices[i];
        var ii = i*3;
        positions[ii] = v.x;
        positions[ii+1] = v.y;
        positions[ii+2] = v.z;
        colors[ii] = color.r ;
        colors[ii+1] = color.g ;
        colors[ii+2] = color.b ;
        alphas[ Math.floor(ii/3) ] = Math.random()*.3+.5;
    };
    
    
    
    var geometry = new THREE.BufferGeometry();
    geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
    geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
    geometry.addAttribute( 'alpha', new THREE.BufferAttribute( alphas, 1 ) );
    geometry.computeBoundingSphere();


    var shaderMaterial = new THREE.ShaderMaterial( THREE.AlphaColorShader );

    shaderMaterial.depthWrite = false;
    shaderMaterial.uniforms.fogNear.value = 10.0;
    shaderMaterial.uniforms.fogFar.value = 20.0;

    var points = new THREE.Points( geometry, shaderMaterial );
    points.matrixAutoUpdate = false;
    this.grid_shpere.add( points );
}



/*
██████╗  █████╗ ██████╗ ████████╗██╗ ██████╗██╗     ███████╗███████╗
██╔══██╗██╔══██╗██╔══██╗╚══██╔══╝██║██╔════╝██║     ██╔════╝██╔════╝
██████╔╝███████║██████╔╝   ██║   ██║██║     ██║     █████╗  ███████╗
██╔═══╝ ██╔══██║██╔══██╗   ██║   ██║██║     ██║     ██╔══╝  ╚════██║
██║     ██║  ██║██║  ██║   ██║   ██║╚██████╗███████╗███████╗███████║
╚═╝     ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝   ╚═╝ ╚═════╝╚══════╝╚══════╝╚══════╝
*/

Planet.prototype.drawParticles = function ( radius ) {

    var total = 600;
    var positions = new Float32Array( total*3 );
    var color = new THREE.Color( 0xfb2f2c5 );

    var spherical = new THREE.Spherical();
    var vec3 = new THREE.Vector3();  

    // ADDITIVE POINTS
    for (var i = 0; i < total; i++) {
        var ii = i*3;

        spherical.radius = radius * ( 1 + Math.random()*.6 );
        spherical.theta = Math.random()*8;
        spherical.phi = .3 + Math.random()*2.2;
        vec3.setFromSpherical( spherical );

        positions[ii] = vec3.x;
        positions[ii+1] = vec3.y;
        positions[ii+2] = vec3.z;
    };
    
    var geometry = new THREE.BufferGeometry();
    geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
    // geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
    // geometry.addAttribute( 'alpha', new THREE.BufferAttribute( alphas, 1 ) );
    geometry.computeBoundingSphere();

    // var material = new THREE.ShaderMaterial( THREE.AlphaColorShader );
    var material = new THREE.PointsMaterial();
    material.size = .1 / this.ratio;
    material.color = color;
    material.transparent = true;
    material.opacity = .6;
    material.blending = THREE.AdditiveBlending;
    // console.log("shaderMaterial: ", shaderMaterial);
    material.depthWrite = false;
    // shaderMaterial.uniforms.fogNear.value = 0.1;
    // shaderMaterial.uniforms.fogFar.value = 20.0;

    var points = new THREE.Points( geometry, material );
    points.matrixAutoUpdate = false;

    this.particles = new THREE.Object3D();
    this.scene.add( this.particles );
    this.particles.add( points );
}


/*
██████╗ ██╗███╗   ██╗ ██████╗ 
██╔══██╗██║████╗  ██║██╔════╝ 
██████╔╝██║██╔██╗ ██║██║  ███╗
██╔══██╗██║██║╚██╗██║██║   ██║
██║  ██║██║██║ ╚████║╚██████╔╝
╚═╝  ╚═╝╚═╝╚═╝  ╚═══╝ ╚═════╝ 
*/
// 
Planet.prototype.drawRing = function ( position, radius, width, rotation, dont_orient ) {
    
    var geometry = new THREE.RingGeometry( radius, radius + width, 64, 1 );
    var m = new THREE.Matrix4();
    if(!dont_orient){
        m.makeRotationX( Math.PI/2 );
    }else{
        // m.makeRotationY( Math.PI/2 );
        m.setPosition( new THREE.Vector3(0, 0, radius*.29) );
    }
    geometry.applyMatrix(m);

    var material = new THREE.MeshBasicMaterial( { color: this.planet_color, side: THREE.DoubleSide } );
    material.transparent = true;
    material.opacity = Math.random()*.2+.1;
    material.blending = THREE.AdditiveBlending;
    material.depthWrite = false;
    // material.fog = false;
    var cylinder = new THREE.Mesh( geometry, material );    
    cylinder.rotation.set( rotation.x, rotation.y, rotation.z );
    cylinder.position.set( position.x, position.y, position.z );

    // cylinder.matrixAutoUpdate = false;

    this.container.add( cylinder ); 
    return cylinder;
}


// ORBITAS
Planet.prototype.drawOrbitas  = function() {
    // draw ORBITAS
    this.orbits = [];

    for (var i = 0; i < this.radius; i+=3) {
        // var position = new THREE.Vector3( 0, Math.random() * radius * 2 - radius , 0 );
        var position = new THREE.Vector3( 0, i  , 0 );
        var p = Math.cos( position.y / this.radius );
        // console.log( ">>>", position.y, p );
        p += Math.random()>.8 ? Math.random()*.7 : Math.random() * .2;
        var rotation = new THREE.Vector3( Math.random() * Math.PI, 0, Math.random() * Math.PI );
        // this.drawRing( position, radius * (Math.random()*.4 + .9), Math.random()*.1 + .02,  rotation );
        position.y = 0;
        var orbit = this.drawRing( position, this.radius*1.1, Math.random()*.05 + .02,  rotation );
        var speed_x = Utils.getRandSides( .002 );
        var speed_y = Utils.getRandSides( .002 );
        var speed_z = Utils.getRandSides( .002 );
        orbit._increment = new THREE.Vector3( speed_x, speed_y, speed_z );
        this.orbits.push(orbit);
    };
    // console.log("> ", this.orbits.length);
}

/*
██████╗  ██████╗ 
██╔══██╗██╔════╝ 
██████╔╝██║  ███╗
██╔══██╗██║   ██║
██████╔╝╚██████╔╝
╚═════╝  ╚═════╝ 
*/

Planet.prototype.drawBG  = function() {
    // draw BG
    var scope = this;

    var wo = 2560;
    var ho = 1440;
    var scale_coef = 590;

    // var w = this.radius*.5 / 9*16 *5;
    // var h = this.radius*.5 *5;
    var w = wo / scale_coef * this.radius;
    var h = ho / scale_coef * this.radius;
    
    var g = new THREE.PlaneGeometry( w, h, 1 );

    var m = createMaterial( "bg.jpg", function(){

        TweenLite.to( m, 3,{
            opacity: 1,
            ease: Sine.easeInOut
        })

    });
    
    var bg = this.bg = new THREE.Mesh( g, m );
    bg.matrixAutoUpdate = false;
    // bg.position.z = radius*1.5;
    this.static_container.add( bg );

    var patches = [];

    addPatch( "bg_fragment_left.jpg", 933, 1011, 219, 0, 0 );
    addPatch( "bg_fragment_left_1.jpg", 933, 1011, 219, 0, Math.PI );
    addPatch( "bg_fragment_right.jpg", 1074, 1133, 1516, 8, Math.PI/3 );
    addPatch( "bg_fragment_right_1.jpg", 1074, 1133, 1516, 8, Math.PI/3 + Math.PI );

    this.updateBg = function( delta ){
        
        for (var i = 0; i < patches.length; i++) {
            var m = patches[i];
            m.anim_offset += .03;
            m.opacity = Math.sin( m.anim_offset ) * .4 + .2;
        };

    }

    function addPatch( img, ww, hh, xx, yy, anim_offset ){

        ww = ww/wo*w;
        hh = hh/ho*h;

        var g = new THREE.PlaneGeometry( ww, hh, 1 );
        var m = createMaterial( img );
        // m.blending = 0;
        m.opacity = 1;
        m.anim_offset = anim_offset || 0;
        patches.push( m );

        var mesh = new THREE.Mesh( g, m );
        mesh.position.x = -w/2 + ww/2 + xx/wo*w;
        // console.log( -w/2, mesh.position.x );
        mesh.position.y = h/2 - hh/2 - yy/ho*h;
        mesh.position.z = .01;
        
        mesh.matrixAutoUpdate = false;
        mesh.updateMatrix();

        bg.add( mesh );

    }


    function createMaterial( img, onLoad ){
        var m = new THREE.MeshBasicMaterial();
        m.fog = !false;
        m.transparent = true;
        m.opacity = 0;
        m.blending = THREE.AdditiveBlending;
        m.depthWrite = false;
        // m.color = new THREE.Color( 0xff0000 );
        // m.wireframe = true;

        m.map = scope.textureLoader.load( PlanetData.textures_path+img, onLoad );
        m.map.generateMipalphaMaps = false;
        m.map.magFilter = THREE.LinearFilter;
        m.map.minFilter = THREE.LinearFilter;

        return m;
    }

}