超炫的HTML5/WebGL虫洞特效

Three.js WormHole，可用于科幻电影的在线海报（移动营销页面）的制作。 2016年度webgl作品候选！

three, 动画特效

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 14408
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var ObjetoCanvas_Depurar = false;
var Banner_WormHole = function() {

// Llamo al constructor del ObjetoBanner
    if (ObjetoCanvas.call(this, {
            'Tipo': 'THREE',
            'Ancho': 'Auto',
            'Alto': 'Auto',
            'Entorno': 'Normal',
            'MostrarFPS': true,
            'ElementoRaiz': document.body
        }) === false) {
        return false;
    }

this.Escena = new THREE.Scene();

this.Camara = new THREE.PerspectiveCamera(75, this.Ancho / this.Alto, 0.5, 1000);
    // Preparo la camara
    //    this.Camara.position.y = (((this.Alto / 2) - 240) * 0.20);
    this.Camara.position.set(0, 0, 500);
    this.Escena.add(this.Camara);
    this.H = 0;
    this.H2 = 0.05;

this.TexturasCargadas = 0;
    this.TotalTexturas = 2;
    this.Tunel = []; // array de tuneles 
    this.Textura = []; // array de texturas

this.TexturaCargada = function(Num, Textura) {
        Textura.wrapT = Textura.wrapS = THREE.RepeatWrapping;
        Textura.repeat.set(1, 2);
        this.Tunel[Num] = new THREE.Mesh(
            new THREE.CylinderGeometry((Num * 10) + 50, (Num * 10) + 50, 1000, 16, 32, true),
            new THREE.MeshBasicMaterial({
                color: 0x666666,
                transparent: true,
                alphaMap: Textura,
                side: THREE.BackSide,
                opacity: (Num === 0) ? 0.3 : 1 // El primer tubo es translucido con humo, el segundo es solido con rayos
            })
        );
        this.Tunel[Num].rotation.x = 90 * (Math.PI / 180); // 45 grados
        this.Tunel[Num].position.z = 128 - Num; // Por alguna razón que no entiendo, si la Z del segundo tubo es mayor o igual que la Z del primer tubo, el segundo tubo no se ve...
        this.Escena.add(this.Tunel[Num]);
        this.Textura[Num] = Textura;

this.TexturasCargadas++;
        // La textura se ha cargado, retiro la ventana que avisa al usuario de la carga.
        if (this.TexturasCargadas === this.TotalTexturas) {
            this.Cargando(false);
        }
    };
    var Cargador = new THREE.TextureLoader();

///////////////////////////////  
    // NOT WORKING..... ///////////
    Cargador.crossOrigin = ''; //
    ///////////////////////////////
    // Using https://crossorigin.me/ to avoid access-control-allow-origin error....
    var T1 = new Cargador.load('https://crossorigin.me/http://devildrey33.es/Web/Graficos/Banner_WormHole11.jpg', this.TexturaCargada.bind(this, 0));
    var T2 = new Cargador.load('https://crossorigin.me/http://devildrey33.es/Web/Graficos/Banner_WormHole1.2.jpg', this.TexturaCargada.bind(this, 1));

this.Camara.lookAt(this.Escena.position);
};

Banner_WormHole.prototype = Object.assign(Object.create(ObjetoCanvas.prototype), {
    constructor: Banner_WormHole,
    // Datos de la animación [requerido]
    Nombre: "WormHole",
    IdeaOriginal: "devildrey33",
    URL: "/Lab/Ejemplos/BannerTest/WormHole.html",
    NombreURL: "Lab : WormHole",
    // Función que se llama al redimensionar el documento
    Redimensionar: function() {},
    // Función que se llama al hacer scroll en el documento    
    Scroll: function() {},
    // Función que se llama al mover el mouse por el canvas
    MouseMove: function(X, Y) {
        /*        var DestX = 0;
                var DestY = 0;
                if (X - (this.Ancho / 2) > 0)      {    DestX =  1;   }
                else if (X - (this.Ancho / 2) < 0) {    DestX = -1;   }
                if (Y - (this.Alto / 2) > 0)       {    DestY =  1;   }
                else if (Y - (this.Alto / 2) < 0)  {    DestY = -1;   }
                
                
                this.Camara.position.x = (((this.Ancho / 2) - X) * 0.040);
                this.Camara.position.y = (((this.Alto / 2) - Y) * 0.20);*/
        //        this.Camara.lookAt(this.Escena.position);
    },
    // Función que pinta cada frame de la animación
    Pintar: function() {
        if (typeof(this.Tunel[0]) !== 'undefined') {
            this.H += 0.001;
            if (this.H > 1) {
                this.H = 0;
            }
            this.Tunel[0].material.color.setHSL(this.H, 0.7, 0.7);

// Rotación del tunel
            this.Tunel[0].rotation.y += 0.02;
            // Textura infinita avanzando y rotando
            //            this.Textura.offset.z += 0.01;
            this.Textura[0].offset.y -= 0.014;
        }

if (typeof(this.Tunel[1]) !== 'undefined') {
            // Color del tunel
            this.H2 += 0.001;
            if (this.H2 > 1) {
                this.H2 = 0;
            }
            this.Tunel[1].material.color.setHSL(this.H2, 0.7, 0.7);

// Rotación del tunel
            this.Tunel[1].rotation.y -= 0.017;
            // Textura infinita avanzando y rotando
            //            this.Textura2.offset.z += 0.005;
            this.Textura[1].offset.y -= 0.019;
        }
        this.Context.render(this.Escena, this.Camara);
    }
});
var Canvas = null;
window.addEventListener('load', function() {
    Canvas = new Banner_WormHole;
});

编译

CSS

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 05-ago-2016, 23:38:27
    Author     : devildrey33
*/
/* Fuente del logo */

@import url('http://fonts.googleapis.com/css?family=Architects+Daughter|Orbitron');
body {
    margin: 0px;
    padding: 0px;
}
/* Estilos para los marcos informativos */

#Cabecera {
    margin: 0px;
    height: 100vh;
    border-top: none;
    color: #FFFFFF;
    background: rgba(49, 46, 53, 1);
    z-index: 10;
    width: 100%;
    overflow: hidden;
    /*position: fixed;*/
    
    top: 0px;
    bottom: 0px;
}
#Cabecera > #Cabecera_Canvas {
    width: 100%;
    height: 100%;
}
#Cabecera > #Cabecera_Cargando,
#Cabecera > #Cabecera_PausaAni,
#Cabecera > #Cabecera_Stats {
    transition: 0.3s cubic-bezier(.33, .05, .69, 1.59);
    z-index: 13;
    padding: 10px;
    margin: 5px;
    background-color: rgba(37, 35, 40, 0.6);
    color: #FFF;
    text-shadow: 1px 1px 1px #000;
    position: absolute;
    border: 1px solid #353338;
}
#Cabecera > #Cabecera_Cargando {
    top: 0px;
    left: 50%;
    transform: perspective(600px) rotateX(-90deg) translateX(-50%);
}
#Cabecera > #Cabecera_Stats {
    transform-origin: top center;
    transform: perspective(600px) rotateX(-90deg);
    right: 0px;
}
#Cabecera > #Cabecera_PausaAni {
    transform-origin: top center;
    transform: perspective(600px) rotateX(-90deg);
    top: 0px;
    right: 0px;
}
/* Solo se muestra la información de la animación si la animación está activa (puede estar visible pero inactiva si la web no tiene el foco) */

#Cabecera[animar=true]:hover > #Cabecera_Stats {
    transform: perspective(600px) rotateX(0deg);
}
/* Solo se muestra la información de la animación si la animación está activa (puede estar visible pero inactiva si la web no tiene el foco) */

#Cabecera[animar=false] > #Cabecera_PausaAni {
    transform: perspective(600px) rotateX(0deg);
}
/* Solo se muestra el texto cargando mientras el atributo cargando sea true (necesario para advertir de la carga de texturas) */

#Cabecera[cargando=true] > #Cabecera_Cargando {
    transform: perspective(600px) rotateX(0deg) translateX(-50%);
}
/* Fuente del logo */

#Logo_devildrey33 {
    position: fixed;
    right: 10px;
    bottom: 10px;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    border: 2px solid #000;
    background-image: radial-gradient(rgba(35, 35, 35, 0.5), rgba(0, 0, 0, 0.95));
    cursor: pointer;
    transition: 0.4s cubic-bezier(.33, .05, .69, 1.59);
    overflow: hidden;
    padding: 10px;
    font-family: 'Orbitron', sans-serif;
    font-size: 26px;
    text-shadow: 1px 1px 1px #000;
    z-index: 1000;
}
#Logo_devildrey33:hover {
    width: 280px;
    border: 2px solid rgb(234, 80, 78);
    /*                border-radius:10px;*/
}
#Logo_devildrey33 > img {
    position: absolute;
    right: 6px;
    width: 48px;
    height: 48px;
    top: 6px;
}
#Logo_devildrey33 > div {
    bottom: 0px;
    margin-top: 3px;
    transition: 0.4s;
    width: 4800px;
    /* 12 caracters * 400px */
}
#Logo_devildrey33:hover > div {
    bottom: inherit;
}
#Logo_devildrey33:hover > div > span {
    position: relative;
    opacity: 1;
    left: 400px;
    animation: AnimacionLogo 0.5s 1 cubic-bezier(.17, -0.42, 0, 1.15);
    animation-fill-mode: forwards;
}
#Logo_devildrey33 > div > span {
    transition: 0.5s cubic-bezier(.17, -0.42, 0, 1.15);
    opacity: 0;
    position: relative;
    display: inline-block;
    color: #FFF;
}
/* Color rojo del 33 */

#Logo_devildrey33 > div > span:nth-child(11),
#Logo_devildrey33 > div > span:nth-child(12) {
    color: rgb(234, 80, 78);
}
#Logo_devildrey33:hover > div > span:nth-child(1) {
    animation-delay: 0.55s;
}
#Logo_devildrey33:hover > div > span:nth-child(2) {
    animation-delay: 0.50s;
}
#Logo_devildrey33:hover > div > span:nth-child(3) {
    animation-delay: 0.45s;
}
#Logo_devildrey33:hover > div > span:nth-child(4) {
    animation-delay: 0.40s;
}
#Logo_devildrey33:hover > div > span:nth-child(5) {
    animation-delay: 0.35s;
}
#Logo_devildrey33:hover > div > span:nth-child(6) {
    animation-delay: 0.30s;
}
#Logo_devildrey33:hover > div > span:nth-child(7) {
    animation-delay: 0.25s;
}
#Logo_devildrey33:hover > div > span:nth-child(8) {
    animation-delay: 0.20s;
}
#Logo_devildrey33:hover > div > span:nth-child(9) {
    animation-delay: 0.15s;
}
#Logo_devildrey33:hover > div > span:nth-child(10) {
    animation-delay: 0.10s;
}
#Logo_devildrey33:hover > div > span:nth-child(11) {
    animation-delay: 0.05s;
}
#Logo_devildrey33:hover > div > span:nth-child(12) {
    animation-delay: 0.0s;
}
@keyframes AnimacionLogo {
    0% {
        left: 500px;
    }
    100% {
        left: 5px;
    }
}
#Logo_devildrey33 > img {
    transition: 0.4s;
}
#Logo_devildrey33:hover > img {
    transform: scale(1.5, 1.5);
}

HTML

if (this.OpcionesCanvas['Entorno'] === 'Normal') {
            // Creo la cabecera vacia
            var PreCabecera = document.createElement('header');
            PreCabecera.id = "Cabecera";
            this.OpcionesCanvas['ElementoRaiz'].appendChild(PreCabecera);

this.Cabecera = document.getElementById("Cabecera");
            this.Cabecera.innerHTML = '<div id="Cabecera_Cargando">Cargando animación...</div>' +
                "<div id='Cabecera_Stats'>0 FPS</div>" +
                "<canvas id='Cabecera_Canvas'></canvas>" +
                '<div id="Cabecera_PausaAni">El canvas está en segundo plano, animación en pausa.</div>';
        }

if (this.OpcionesCanvas['Entorno'] === 'Banner') {
            this.Cabecera = document.getElementById("Cabecera");

if (document.getElementById('Cabecera_Canvas')) {
                this.Cabecera.removeChild(document.getElementById('Cabecera_Canvas'));
            }
            this.Cabecera.innerHTML = this.Cabecera.innerHTML + "<canvas id='Cabecera_Canvas'></canvas>";

document.getElementById("CabeceraAutorAni_HTML").innerHTML = "<div>" + this.Nombre + "</div>" +
                "<div><span style='color:#AAA;'>Concepto original : </span><b>" + this.IdeaOriginal + "</b></div>" +
                "<a href='" + this.URL + "' target='_blank'>" + this.NombreURL + "</a>";
        }

this.Cabecera.setAttribute("cargando", true);
        this.Cabecera.setAttribute("animar", true);

this.Canvas = document.getElementById("Cabecera_Canvas");

this.Ancho = 0;
        this.Alto = 0;

if (this.OpcionesCanvas.Ancho !== "Auto") {
            this.Ancho = this.OpcionesCanvas.Ancho;
        }
        if (this.OpcionesCanvas.Alto !== "Auto") {
            this.Alto = this.OpcionesCanvas.Alto;
        }
        // Si el canvas es de ancho fijo, añado el css para centrar-lo
        if (this.OpcionesCanvas.Ancho !== "Auto") {
            this.Canvas.style.width = this.Ancho + "px";
            this.Canvas.style.left = "calc(50% - (" + this.Ancho + "px / 2))";
        }
        if (this.OpcionesCanvas.Alto !== "Auto") {
            this.Canvas.style.height = this.Alto + "px";
            this.Canvas.style.top = "calc(50% - (" + this.Ancho + "px / 2))";
        }

try {
            if (this.OpcionesCanvas.Tipo.toLowerCase() === '2d') {
                this.Context = this.Canvas.getContext("2d"); // Contexto 2D
                console.log("ObjetoCanvas iniciado en modo 2d");
            } else if (this.OpcionesCanvas.Tipo.toLowerCase() === 'three') {
                if (this.PixelRatio() > 1) { // El antialias no va con el samsung galaxy alpha...
                    this.Context = new THREE.WebGLRenderer({
                        canvas: this.Canvas
                    }); // Contexto THREE.JS
                    console.log("ObjetoCanvas iniciado en modo THREE sin antialias");
                } else {
                    this.Context = new THREE.WebGLRenderer({
                        canvas: this.Canvas,
                        antialias: true
                    }); // Contexto THREE.JS
                    console.log("ObjetoCanvas iniciado en modo THREE con antialias");
                }
                this.Context.setClearColor(this.OpcionesCanvas.ColorFondo, 1); // Color del fondo
            }
        } catch (error) {
            document.getElementById("Cabecera_Cargando").innerHTML = "Error iniciando WebGL : " + error;
            return false;
        }

this.RAFID = 0; // Request Animation Frame ID
        this.FPS_UltimoTick = Date.now() + 1000;
        this.FPS_Contador = 0;
        this.FocoWeb = true;
        this.Tick = 0;
        this.EventoRedimensionar();

this.RAFID = window.requestAnimationFrame(this.Actualizar.bind(this));
        this.EnlazarEventos();

this.Cargando(true);

if (this.OpcionesCanvas.MostrarFPS === false) {
            document.getElementById("Cabecera_Stats").style.display = "none";
        }

return true;
    };

ObjetoCanvas.prototype.Terminar = function() {
        if (this.RAFID !== 0) {
            window.cancelAnimationFrame(this.RAFID);
        }

if (this.OpcionesCanvas.Entorno === "Normal") {
            this.Cabecera.removeEventListener('mousedown', this.hEventoMousePresionado);
            this.Cabecera.removeEventListener('mouseup', this.hEventoMouseSoltado);
            window.removeEventListener('keydown', this.hEventoTeclaPresionada);
            window.removeEventListener('keyup', this.hEventoTeclaSoltada);
        }

this.Cabecera.removeEventListener('mousemove', this.hEventoMouseMove);
        this.Cabecera.removeEventListener('mouseenter', this.hEventoMouseEnter);
        this.Cabecera.removeEventListener('mouseleave', this.hEventoMouseLeave);
        window.removeEventListener('resize', this.hEventoRedimensionar);
        window.removeEventListener('scroll', this.hEventoScroll);
        window.removeEventListener('blur', this.hEventoFocoPerdido);
        window.removeEventListener('focus', this.hEventoFocoRecibido);
        console.log("ObjetoCanvas.Terminar");
    };

ObjetoCanvas.prototype.EnlazarEventos = function() {

if (this.OpcionesCanvas.Entorno === "Normal") {
            this.hEventoMousePresionado = this.EventoMousePresionado.bind(this);
            this.hEventoMouseSoltado = this.EventoMouseSoltado.bind(this);
            this.hEventoTeclaPresionada = this.EventoTeclaPresionada.bind(this);
            this.hEventoTeclaSoltada = this.EventoTeclaSoltada.bind(this);
            this.Cabecera.addEventListener('mousedown', this.hEventoMousePresionado);
            this.Cabecera.addEventListener('mouseup', this.hEventoMouseSoltado);
            window.addEventListener('keydown', this.hEventoTeclaPresionada);
            window.addEventListener('keyup', this.hEventoTeclaSoltada);
        }
        this.hEventoMouseMove = this.EventoMouseMove.bind(this);
        this.hEventoMouseEnter = this.EventoMouseEnter.bind(this);
        this.hEventoMouseLeave = this.EventoMouseLeave.bind(this);
        this.hEventoRedimensionar = this.EventoRedimensionar.bind(this);
        this.hEventoScroll = this.EventoScroll.bind(this);
        this.hEventoFocoPerdido = this.EventoFocoPerdido.bind(this);
        this.hEventoFocoRecibido = this.EventoFocoRecibido.bind(this);

this.Cabecera.addEventListener('mousemove', this.hEventoMouseMove);
        this.Cabecera.addEventListener('mouseenter', this.hEventoMouseEnter);
        this.Cabecera.addEventListener('mouseleave', this.hEventoMouseLeave);

window.addEventListener('resize', this.hEventoRedimensionar);
        window.addEventListener('scroll', this.hEventoScroll);
        window.addEventListener('blur', this.hEventoFocoPerdido);
        window.addEventListener('focus', this.hEventoFocoRecibido);
    };

ObjetoCanvas.prototype.EventoFocoRecibido = function() {
        console.log("Foco de la ventana recibido");
        this.FocoWeb = true;
        if (this.OpcionesCanvas.Entorno === "Normal") {
            this.EventoReanudar();
        } else if (this.OpcionesCanvas.Entorno === "Banner" && window.scrollX < 190) {
            this.EventoReanudar();
        }
    };

ObjetoCanvas.prototype.EventoFocoPerdido = function() {
        console.log("Foco de la ventana perdido");
        this.FocoWeb = false;
        this.EventoPausa();
    };

ObjetoCanvas.prototype.PixelRatio = function() {
        var ratio = 1;
        // To account for zoom, change to use deviceXDPI instead of systemXDPI
        if (window.screen.systemXDPI !== undefined && window.screen.logicalXDPI !== undefined && window.screen.systemXDPI > window.screen.logicalXDPI) {
            // Only allow for values > 1
            ratio = window.screen.systemXDPI / window.screen.logicalXDPI;
        } else if (window.devicePixelRatio !== undefined) {
            ratio = window.devicePixelRatio;
        }
        return ratio;
    };

ObjetoCanvas.prototype.Cargando = function(carga) {
        document.getElementById("Cabecera").setAttribute("cargando", carga);
    };

ObjetoCanvas.prototype.Actualizar = function() {
        this.Tick = Date.now();
        this.FPS();
        this.RAFID = window.requestAnimationFrame(this.Actualizar.bind(this));
        this.Pintar.apply(this);
    };

ObjetoCanvas.prototype.EventoTeclaPresionada = function(event) {
        if (typeof(this.TeclaPresionada) !== "undefined") {
            this.TeclaPresionada.apply(this, [event]);
        }
    };

ObjetoCanvas.prototype.EventoTeclaSoltada = function(event) {
        if (typeof(this.TeclaSoltada) !== "undefined") {
            this.TeclaSoltada.apply(this, [event]);
        }
    };

ObjetoCanvas.prototype.EventoMouseMove = function(event) {
        if (typeof(this.MouseMove) !== "undefined") {
            this.MouseMove.apply(this, [event]);
        }
    };

ObjetoCanvas.prototype.EventoMousePresionado = function(event) {
        if (typeof(this.MousePresionado) !== "undefined") {
            this.MousePresionado.apply(this, [event]);
        }
    };
    ObjetoCanvas.prototype.EventoMouseSoltado = function(event) {
        if (typeof(this.MouseSoltado) !== "undefined") {
            this.MouseSoltado.apply(this, [event]);
        }
    };

ObjetoCanvas.prototype.EventoMouseEnter = function(event) {
        console.log("ObjetoCanvas.EventoMouseEnter");
        if (typeof(this.MouseEnter) !== "undefined") {
            this.MouseEnter.apply(this, [event]);
        }
    };

ObjetoCanvas.prototype.EventoMouseLeave = function(event) {
        console.log("ObjetoCanvas.EventoMouseLeave");
        if (typeof(this.MouseLeave) !== "undefined") {
            this.MouseLeave.apply(this, [event]);
        }
    };

ObjetoCanvas.prototype.EventoRedimensionar = function() {

if (this.OpcionesCanvas.Ancho === "Auto") {
            this.Ancho = document.getElementById("Cabecera").offsetWidth;
        }
        if (this.OpcionesCanvas.Alto === "Auto") {
            this.Alto = document.getElementById("Cabecera").offsetHeight;
        }

this.Canvas.setAttribute("width", this.Ancho);
        this.Canvas.setAttribute("height", this.Alto);
        if (this.OpcionesCanvas.Tipo.toLowerCase() === "three") {
            this.Context.setSize(this.Ancho, this.Alto);
            if (this.Camara !== null && typeof(this.Camara) !== 'undefined') {
                this.Camara.aspect = this.Ancho / this.Alto;
                this.Camara.updateProjectionMatrix();
            }
        }
        // 
        if (typeof(this.Redimensionar) !== "undefined") {
            this.Redimensionar.apply(this);
        }
    };

ObjetoCanvas.prototype.EventoPausa = function() {
        if (this.RAFID !== 0 && this.OpcionesCanvas.Pausar === true) {
            document.getElementById("Cabecera").setAttribute("animar", false);
            console.log("ObjetoCanvas.Pausa");
            window.cancelAnimationFrame(this.RAFID);
            this.RAFID = 0;
            if (typeof this.Pausa !== 'undefined') {
                this.Pausa();
            }
        }
    };

ObjetoCanvas.prototype.EventoReanudar = function() {
        if (this.RAFID === 0 && this.FocoWeb === true) {
            document.getElementById("Cabecera").setAttribute("animar", true);
            this.RAFID = window.requestAnimationFrame(this.Actualizar.bind(this));
            console.log("ObjetoCanvas.Reanudar RAFID = " + this.RAFID);
            if (typeof this.Pausa !== 'undefined') {
                this.Reanudar();
            }
        }
    };

ObjetoCanvas.prototype.EventoScroll = function() {
        // Llamo a la función Scroll del NuevoObjeto (si existe)
        if (this.OpcionesCanvas.Entorno === "Banner") {
            //        if (this.Cabecera.length > 0) { // Hay páginas que no tienen la cabecera
            var PS = $(window).scrollTop();
            var Altura = this.Cabecera.offsetHeight;
            if (PS > Altura) {
                this.EventoPausa();
            } else if (PS < Altura) {
                this.EventoReanudar();
            }
        }

if (typeof(this.Scroll) !== "undefined") {
            this.Scroll.apply(this);
        }
    };

ObjetoCanvas.prototype.FPS = function() {
        if (this.Tick > this.FPS_UltimoTick) {
            this.FPS_UltimoTick = this.Tick + 1000;
            document.getElementById("Cabecera_Stats").innerHTML = this.FPS_Contador + " FPS";
            this.FPS_Contador = 0;
        } else {
            this.FPS_Contador++;
        }
    };

////////////////////////////////////////////////////////////////////////////
    // 包含一个Canvas对象创建和使用二维缓冲 //
    ////////////////////////////////////////////////////////////////////////////
    var BufferCanvas = function(Ancho, Alto) {
        this.Canvas = document.createElement("canvas");
        this.Canvas.setAttribute("width", Ancho);
        this.Canvas.setAttribute("height", Alto);
        this.Context = this.Canvas.getContext("2d");
        this.Ancho = Ancho;
        this.Alto = Alto;
    };

function RandInt(Max, Min) {
        return Math.floor(Rand(Max, Min));
    }

/* Si no se especifican parametros devuelve 0 o 1 
       Si se especifica solo el Máximo, el mínimo será 0 */
    function Rand(Max, Min) {
        var min = (typeof(Min) !== "undefined") ? Min : 0; // Si no se especifica el mínimo por defecto es 0
        var max = (typeof(Max) !== "undefined") ? Max : 1; // Si no se especifica el máximo por defecto es 1
        return min + Math.random() * (max - min);
    }

/* Pequeño objeto que añade un enlace a mi pagina web en la parte inferior izquierda del ejemplo. */
    var Logo_devildrey33 = function() {
        var PreLogo = document.createElement('a');
        PreLogo.setAttribute("href", "https://devildrey33.es");
        PreLogo.setAttribute("target", "_blank");
        PreLogo.id = "Logo_devildrey33";
        PreLogo.innerHTML = "<div>" +
            "<span>D</span>" +
            "<span>E</span>" +
            "<span>V</span>" +
            "<span>I</span>" +
            "<span>L</span>" +
            "<span>D</span>" +
            "<span>R</span>" +
            "<span>E</span>" +
            "<span>Y</span>" +
            "<span>&nbsp;</span>" +
            "<span>3</span>" +
            "<span>3</span>" +
            "</div>" +
            "<img src='https://devildrey33.es/Web/SVG/Iconos50x50.svg#svg-logo' />";
        document.body.appendChild(PreLogo);
    };

var Logo = null;
    window.addEventListener('load', function() {
        Logo = new Logo_devildrey33;
    });
</script>

Three.js WormHole，可用于科幻电影的在线海报（移动营销页面）的制作。 2016年度webgl作品候选！

three, 动画特效

编辑器支持Emmet

快捷键

Three.js WormHole，可用于科幻电影的在线海报（移动营销页面）的制作。 2016年度webgl作品候选！

three, 动画特效

HTML5 | WebGL | Three.js 超炫的烟雾纹理特效

超棒的HTML5（WebGL）图片溶解轮播动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：