ziqim/zhiqim_ui/src_extend/zhiqim_webgl_three.js

/*
 * 版权所有 (C) 2015 知启蒙(ZHIQIM) 保留所有权利。
 * 
 * 指定登记&发行网站： https://www.zhiqim.com/ 欢迎加盟知启蒙，[编程有你，知启蒙一路随行]。
 *
 * 本文采用《知启蒙登记发行许可证》，除非符合许可证，否则不可使用该文件！
 * 1、您可以免费使用、修改、合并、出版发行和分发，再授权软件、软件副本及衍生软件；
 * 2、您用于商业用途时，必须在原作者指定的登记网站，按原作者要求进行登记；
 * 3、您在使用、修改、合并、出版发行和分发时，必须包含版权声明、许可声明，及保留原作者的著作权、商标和专利等知识产权；
 * 4、您在互联网、移动互联网等大众网络下发行和分发再授权软件、软件副本及衍生软件时，必须在原作者指定的发行网站进行发行和分发；
 * 5、您可以在以下链接获取一个完整的许可证副本。
 * 
 * 许可证链接：http://zhiqim.org/licenses/zhiqim_register_publish_license.htm
 *
 * 除非法律需要或书面同意，软件由原始码方式提供，无任何明示或暗示的保证和条件。详见完整许可证的权限和限制。
 */
 
+(function(Z)
{
//BEGIN

/**
 * WebGL+three.js 3D动画，当前有波浪和光线球两种
*/
Z.WebGLThree = Z.Class.newInstance();
Z.WebGLThree.prototype = 
{
    defaults:
    {
        //常量
        SEPARATION: 125, 
        AMOUNTX: 35,
        AMOUNTY: 35, 
        
        //传入参数
        threePath: null,
        target: null,
        
        //内部对象
        camera: null, 
        scene: null, 
        renderer: null, 
        particles_ware: [], 
        particles_globe: [], 
        
        //运行时
        count: 0, 
        mouseX: 0, 
        mouseY: 0, 
        windowHalfX: window.innerWidth / 2, 
        windowHalfY: window.innerHeight / 2, 
        rotation_speed: .002, 
        timeout: null
    },
    
    execute: function()
    {
        if (Z.B.mobile || Z.B.msieVer <= 9)
        {//移动端和IE9以下不支持
            return;
        }
        
        if (this.threePath == null || this.target == null)
        {//两个参数必须
            return;
        }
        
        if (Z.Types.isString(this.target))
            this.target = Z("#"+this.target);
        else if (Z.Types.isElement(this.target))
            this.target = Z(this.target);
        else
            return;
            
        //先加载three.js，再初始化init
        Z.loads(this.threePath, Z.bind(this.initWebGL, this));
    },
    
    initWebGL: function()
    {
        var animationType = Math.floor(2 * Math.random());
        if (animationType == 0)
        {//波浪
            this.initWave(); 
            this.animateWave();
        }
        else
        {//光球
            this.initGlobe(); 
            this.animateGlobe();
        }
        
        //增加事件处理
        Z(document).mousemove(this.onDocumentMouseMove, this)
                   .on("touchstart", this.onDocumentTouchStart, this)
                   .on("touchmove", this.onDocumentTouchMove, this);
        Z(window).resize(this.onWindowResize, this);
    },

    /******************************************************************************************/
    //光球
    /******************************************************************************************/
    initGlobe: function initGlobe() 
    {
        this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1e4), 
        this.camera.position.z = 500, 
        this.scene = new THREE.Scene;
        
        for (var t = 2 * Math.PI, i = function (e) {e.beginPath(), e.arc(0, 0, 25, 0, t, true), e.fill()}, t = 2 * Math.PI, n = 0; 500 > n; n++) 
        {
            var o = new THREE.SpriteCanvasMaterial({color: 16777215, 
                                                     transparent: true, 
                                                     program: function (e) {e.beginPath(), e.arc(0, 0, .5, 0, t, true), e.fill()}});
            var particle = new THREE.Sprite(o);
            particle.position.x = 2 * Math.random() - 1;
            particle.position.y = 2 * Math.random() - 1;
            particle.position.z = 2 * Math.random() - 1;
            particle.position.normalize();
            particle.position.multiplyScalar(10 * Math.random() + 450);
            particle.scale.multiplyScalar(4 + 2 * Math.random());
            particle.material.opacity = .1;
            this.scene.add(particle);
            this.particles_globe.push(particle);
        }
        for (var n = 0; 500 > n; n++) 
        {
            var s = new THREE.Geometry;
            var r = new THREE.Vector3(2 * Math.random() - 1, 2 * Math.random() - 1, 2 * Math.random() - 1);
            r.normalize();
            r.multiplyScalar(450);
            s.vertices.push(r);
            
            var a = r.clone();
            a.multiplyScalar(.3 * Math.random() + 1), s.vertices.push(a);
            var l = new THREE.Line(s, new THREE.LineBasicMaterial({color: 16777215, opacity: .3}));
            this.scene.add(l)
        }
        this.renderer = new THREE.CanvasRenderer({alpha: true});
        this.renderer.setClearColor(0, 0);
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        this.target.append(this.renderer.domElement)
    },
    
    animateGlobe: function() 
    {
        requestAnimationFrame(Z.bind(this.animateGlobe, this));
        this.renderGlobe();
    },
    
    renderGlobe: function() 
    {
        var e = Z("body:hover"), t = this.camera.position.x, i = this.camera.position.y, n = this.camera.position.z;
        if (e.length != 0 && this.timeout != null)
        {
            this.camera.position.x += .05 * (this.mouseX - this.camera.position.x);
        }
        else
        {
            this.camera.position.x = t * Math.cos(this.rotation_speed) - n * Math.sin(this.rotation_speed);
            this.camera.position.z = n * Math.cos(this.rotation_speed) + t * Math.sin(this.rotation_speed);
        }
                                          
        this.camera.position.y += .05 * (-this.mouseY + 200 - this.camera.position.y);
        this.camera.lookAt(this.scene.position);
        
        Z(document).mousemove(function () {
            this.timeout !== null && clearTimeout(this.timeout), this.timeout = setTimeout(function () {this.timeout = null}, 600)
        });
        
        for (var o = 0; o < this.particles_globe.length; o++)
        {
            var particle = this.particles_globe[o++];
            temp = 50 * Math.sin(.3 * (o + this.count)) + .5 * Math.sin(.5 * (o + this.count));
            opacity = Math.abs(temp) / 50 + .1;
            opacity > 1 && (opacity = 1);
            particle.material.opacity = opacity;
        }
        
        this.renderer.render(this.scene, this.camera);
        this.count += .1;
    },
    
    /******************************************************************************************/
    //波浪
    /******************************************************************************************/
    initWave: function() 
    {
        this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1e4);
        this.camera.position.z = 1e3;
        this.camera.position.y = 100; 
        this.camera.position.y = 1e3; 
        
        this.scene = new THREE.Scene;
        for (var t = 2 * Math.PI, i = 0, n = 0; this.AMOUNTX > n; n++)for (var o = 0; this.AMOUNTY > o; o++)
        {
            var s = new THREE.SpriteCanvasMaterial({color: 16777215, 
                                                     transparent: true, 
                                                     program: function (e) {e.beginPath(), e.arc(0, 0, .5, 0, t, true), e.fill()}});
                                                     
            var particle = this.particles_ware[i++] = new THREE.Sprite(s);
            particle.position.x = n * this.SEPARATION - this.AMOUNTX * this.SEPARATION / 2;
            particle.position.z = o * this.SEPARATION - this.AMOUNTY * this.SEPARATION / 2;
            this.scene.add(particle), particle.material.opacity = .4;
        }
        
        this.renderer = new THREE.CanvasRenderer({alpha: true});
        this.renderer.setClearColor(0, 0);
        this.renderer.setSize(window.innerWidth, window.innerHeight); 
        this.target.append(this.renderer.domElement);
    },
    
    animateWave: function() 
    {
        requestAnimationFrame(Z.bind(this.animateWave, this));
        this.renderWave();
    },
    
    renderWave: function() 
    {
        this.camera.position.x += .01 * (this.mouseX - this.camera.position.x), 
        this.camera.position.y += .005 * (this.mouseY - this.camera.position.y), 
        this.camera.lookAt(this.scene.position);
        
        for (var e = 0, t = 0; this.AMOUNTX > t; t++)
        {
            for (var i = 0; this.AMOUNTY > i; i++)
            {
                var particle = this.particles_ware[e++];
                particle.position.y = 50 * Math.sin(.3 * (t + this.count)) + 50 * Math.sin(.5 * (i + this.count));
                particle.scale.x = particle.scale.y = 4 * (Math.sin(.3 * (t + this.count)) + 1) + 4 * (Math.sin(.5 * (i + this.count)) + 1);
                opacity = Math.abs(particle.position.y) / 100;
                opacity < .5 && (opacity = .5);
                opacity > 1 && (opacity = 1);
                particle.material.opacity = opacity;
            }
        }
        
        this.renderer.render(this.scene, this.camera);
        this.count += .03
    },
    
    /******************************************************************************************/
    //事件处理
    /******************************************************************************************/
    
    onWindowResize: function() 
    {//缩放
        this.windowHalfX = window.innerWidth / 2, 
        this.windowHalfY = window.innerHeight / 2, 
        this.camera.aspect = window.innerWidth / window.innerHeight, 
        this.camera.updateProjectionMatrix(), 
        this.renderer.setSize(window.innerWidth, window.innerHeight);
    },
    
    onDocumentMouseMove: function(e) 
    {//鼠标移动
        this.mouseX = e.clientX - this.windowHalfX, this.mouseY = e.clientY + 150;
    },
    
    onDocumentTouchStart: function(e) 
    {//iOS触摸开始
        1 === e.touches.length && (e.preventDefault(), this.mouseX = e.touches[0].pageX - this.windowHalfX, this.mouseY = -e.touches[0].pageY);
    },
    
    onDocumentTouchMove: function(e) 
    {//iOS触摸移动
        1 === e.touches.length && (e.preventDefault(), this.mouseX = e.touches[0].pageX - this.windowHalfX, this.mouseY = -e.touches[0].pageY);
    }
};

//END
})(zhiqim);