Three.js 3D暗红色水晶体阵列

立方体可以像魔方一样自由旋转。下面的牛头马面logo，悬停时，呈现文本字母逐个飘入的动画效果。

three, cube, grid

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'option strict';

var MultiCubo = function() {
    // Llamo al constructor del ObjetoBanner
    if (ObjetoCanvas.call(this, {
            'Tipo': 'THREE',
            'Ancho': 'Auto',
            'Alto': 'Auto',
            'Entorno': 'Normal',
            'MostrarFPS': true,
            'ElementoRaiz': document.body,
            'Pausar': true, // Pausa el canvas si la pestaña no tiene el foco del teclado
            'ColorFondo': 0xeeeeee
        }) === false) {
        return false;
    }

// Se ha creado el canvas, inicio los valores de la animación ... 
    this.Iniciar();

// Esconde la ventana que informa al usuario de que se está cargando la animación. (REQUERIDO)
    this.Cargando(false);
};

MultiCubo.prototype = Object.assign(Object.create(ObjetoCanvas.prototype), {
    constructor: MultiCubo,
    // 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(Evento) {},
    // Función que se llama al presionar un botón del mouse por el canvas
    MousePresionado: function(Evento) {},
    // Función que se llama al soltar un botón del mouse por el canvas
    MouseSoltado: function(Evento) {},
    // Función que se llama al entrar con el mouse en el canvas
    MouseEnter: function(Evento) {},
    // Función que se llama al salir con el mouse del canvas
    MouseLeave: function(Evento) {},
    // Función que se llama al presionar una tecla
    TeclaPresionada: function(Evento) {},
    // Función que se llama al soltar una tecla
    TeclaSoltada: function(Evento) {},
    // Función que se llama al pausar el banner
    Pausa: function() {
        this.Animaciones.Pausa();
    },
    // Función que se llama al reanudar el banner
    Reanudar: function() {
        this.Animaciones.Reanudar();
    },
    // Función que inicia el ejemplo
    Cubos: [],
    // Grupo de cubos para las rotaciones de varios cubos a la vez
    GrupoCubos: new THREE.Group(),

uAniRGC: 0, // Ultima animación del grupo de cubos

Iniciar: function() {
        // Instancia para el objeto encargado de las animaciones de tiempo http://devildrey33.es/Ejemplos/Utils/ObjetoAnimacion.js
        this.Animaciones = new ObjetoAnimacion;
        // Activo el mapeado de sombras
        this.Context.shadowMap.enabled = true;

this.Escena = new THREE.Scene();
        // Creo la cámara
        this.Camara = new THREE.PerspectiveCamera(75, this.Ancho / this.Alto, 0.5, 1000);
        this.Camara.Rotacion = {
            Grados: -180 * (Math.PI / 180),
            Avance: (Math.PI / 180) / 3,
            Distancia: 50,
            MirarHacia: new THREE.Vector3(0, 0, 0),
            Animacion: true
        };
        this.Camara.position.set(0, 0, this.Camara.Rotacion.Distancia);
        // Función para que la cámara rote alrededor de la escena
        this.Camara.Rotar = function() {
            if (this.Rotacion.Animacion === true) {
                this.Rotacion.Grados += this.Rotacion.Avance;
                this.position.x = this.Rotacion.Distancia * Math.cos(this.Rotacion.Grados);
                this.position.z = this.Rotacion.Distancia * Math.sin(this.Rotacion.Grados);
                this.lookAt(this.Rotacion.MirarHacia);
            }
        };
        this.Escena.add(this.Camara);

// Animación inicial de la cámara
        this.AniAvanceCamara = this.Animaciones.Crear([{
            'Paso': {
                z: 500,
                y: 150
            }
        }, {
            'Paso': {
                z: 50,
                y: 0
            },
            'Tiempo': 1250,
            'FuncionTiempo': FuncionesTiempo.SinInOut
        }], {
            "Repetir": 0,
            FuncionActualizar: function(Valores) {
                this.Camara.position.y = Valores.y;
                this.Camara.Rotacion.Distancia = Valores.z;
            }.bind(this)
        });

// Palno para el suelo
        this.Suelo = new THREE.Mesh(new THREE.PlaneGeometry(1000, 1000),
            new THREE.MeshPhongMaterial({
                color: 0xbbbbbb,
                specular: 0xffffff
            }));
        this.Suelo.rotation.x = -Math.PI / 2;
        this.Suelo.position.y = -20;
        this.Suelo.castShadow = false;
        this.Suelo.receiveShadow = true;
        this.Escena.add(this.Suelo);

// Creo varias luces para las sombras y los reflejos
        this.CrearLuces();
        // Creo 27 cubos colocados en forma de cubo
        this.CrearCubos();
        // Animación aleatoria con los cubos
        this.AnimarCubos();
        // Creo el ObjetoTest y añado todos los valores a testear
        this.CrearTest();
    },

CrearCubos: function() {
        for (var i = 0; i < 27; i++) {
            // De momento voy a conservar un material para cada cubo...
            var Cubo = new THREE.Mesh(new THREE.BoxGeometry(6.5, 6.5, 6.5),
                new THREE.MeshPhongMaterial({
                    color: 0xea504e,
                    specular: 0x3333AA,
                    transparent: true,
                    opacity: 0.9,
                    shininess: 200
                }));
            Cubo.castShadow = true;
            Cubo.receiveShadow = true;
            Cubo.Numero = i; // Identificador de cubo (del 0 al 26)
            this.Cubos[i] = Cubo;
            this.Escena.add(this.Cubos[i]);
        }
        // Posiciono los cubos empezando por la esquina superior izquierda, y terminando en la esquina inferior derecha
        var Contador = 0;
        for (var z = 10; z >= -10; z -= 10) {
            for (var y = 10; y >= -10; y -= 10) {
                for (var x = -10; x <= 10; x += 10) {
                    this.Cubos[Contador++].position.set(x, y, z);
                }
            }
        }
        // Primer cubo azul, para comprobar que los cubos conservan su posición despues de rotar varios grupos de cubos
        this.Cubos[0].material.color.setHex(0x6666ff);
    },

// Elige entre animación de un cubo o animación de un grupo
    AnimarCubos: function() {
        if (Rand() > 0.5) {
            this.AnimacionRotarGrupoCubos();
        } else {
            this.AnimacionRotarCubo();
        }
    },

// Al hacer rotaciones de multiples cubos, las posiciones no quedan 100% precisas, y al cabo de muchas iteraciones acaba descuadrandose todo
    // Por lo que si un valor da 9.999 lo reasignamos a 10, -9.999 = -10, y  0.111 o -0.111 = 0, que son las posiciones fijas iniciales de los cubos (10, 0, -10)
    Aprox: function(Valor) {
        if (Valor > 5) {
            return 10;
        } else if (Valor < -5) {
            return -10;
        } else {
            return 0;
        }
    },

// Animación para rotar un grupo de cubos
    AnimacionRotarGrupoCubos: function() {
        var Pos = RandInt(9, 0);
        // Para no repetir el ultimo tipo de animación
        while (Pos === this.uAniRGC) {
            Pos = RandInt(9, 0);
        }
        //        Pos = 0;
        //        var TipoRotacion = 0;
        //        if (Pos < 6) { TipoRotacion = Rand(); }

this.uAniRGC = Pos; // Ultima posición de la animación
        // Calculo la posición final de cada cubo dentro del grupo 
        for (var i = 0; i < this.GrupoCubos.children.length; i++) {
            var vector = new THREE.Vector3();
            vector.setFromMatrixPosition(this.GrupoCubos.children[i].matrixWorld);
            this.Cubos[this.GrupoCubos.children[i].Numero].position.set(this.Aprox(vector.x), this.Aprox(vector.y), this.Aprox(vector.z));
        }
        // Al volver a añadir los cubos a la escena, se eliminan de dentro del grupo de cubos
        for (var i = 0; i < this.Cubos.length; i++) {
            this.Escena.add(this.Cubos[i]);
        }
        var RotarCaraX = 0,
            RotarCaraY = 0,
            RotarCaraZ = 0,
            PosCaraX = 0,
            PosCaraY = 0,
            PosCaraZ = 0;
        var rInt = RandInt(3, 1); // Con valores negativos hace algo raro...
        // Añado 9 cubos según la posición aleatória
        for (var i = 0; i < this.Cubos.length; i++) {
            switch (Pos) {
                case 0:
                    if (this.Cubos[i].position.x > 5) {
                        this.GrupoCubos.add(this.Cubos[i]);
                    }
                    break; // derecha
                case 1:
                    if (this.Cubos[i].position.x < -5) {
                        this.GrupoCubos.add(this.Cubos[i]);
                    }
                    break; // izquierda
                case 2:
                    if (this.Cubos[i].position.y > 5) {
                        this.GrupoCubos.add(this.Cubos[i]);
                    }
                    break; // arriba
                case 3:
                    if (this.Cubos[i].position.y < -5) {
                        this.GrupoCubos.add(this.Cubos[i]);
                    }
                    break; // abajo   
                case 4:
                    if (this.Cubos[i].position.z > 5) {
                        this.GrupoCubos.add(this.Cubos[i]);
                    }
                    break; // delante   
                case 5:
                    if (this.Cubos[i].position.z < -5) {
                        this.GrupoCubos.add(this.Cubos[i]);
                    }
                    break; // atras
                case 6:
                    if (this.Cubos[i].position.x < 5 && this.Cubos[i].position.x > -5) {
                        this.GrupoCubos.add(this.Cubos[i]);
                    }
                    break; // centro x
                case 7:
                    if (this.Cubos[i].position.y < 5 && this.Cubos[i].position.y > -5) {
                        this.GrupoCubos.add(this.Cubos[i]);
                    }
                    break; // centro y
                case 8:
                    if (this.Cubos[i].position.z < 5 && this.Cubos[i].position.z > -5) {
                        this.GrupoCubos.add(this.Cubos[i]);
                    }
                    break; // centro z
            }
        }
        this.Escena.add(this.GrupoCubos);

//        if (TipoRotacion < 0.5) { // Rotación normal
        switch (Pos) {
            case 0:
                RotarCaraX = rInt;
                break; // derecha
            case 1:
                RotarCaraX = rInt;
                break; // izquierda
            case 2:
                RotarCaraY = rInt;
                break; // arriba
            case 3:
                RotarCaraY = rInt;
                break; // abajo
            case 4:
                RotarCaraZ = rInt;
                break; // delante
            case 5:
                RotarCaraZ = rInt;
                break; // atras
            case 6:
                RotarCaraX = rInt;
                break; // centro x
            case 7:
                RotarCaraY = rInt;
                break; // centro y
            case 8:
                RotarCaraZ = rInt;
                break; // centro z
        }
        this.AniRotarGrupoCubos = this.Animaciones.Crear(
            [ // Pasos de la animación
                {
                    Paso: {
                        rX: 0,
                        rY: 0,
                        rZ: 0
                    }
                }, {
                    Paso: {
                        rX: RotarCaraX * (Math.PI / 2),
                        rY: RotarCaraY * (Math.PI / 2),
                        rZ: RotarCaraZ * (Math.PI / 2)
                    },
                    Tiempo: 500 * (RotarCaraX + RotarCaraY + RotarCaraZ),
                    FuncionTiempo: FuncionesTiempo.SinOut
                }
            ], { // Opciones de la animación
                FuncionActualizar: function(Valores) {
                    this.GrupoCubos.rotation.set(Valores.rX, Valores.rY, Valores.rZ);
                }.bind(this),
                FuncionTerminado: this.AnimarCubos.bind(this)
            }
        );
        /*            
                }
                else {              // Rotación eje anormal
                    switch (Pos) {
                        case 0 : 
                            if (Rand() > 0.5) { RotarCaraY = 2; }
                            else              { RotarCaraZ = 2; }
                            PosCaraX = 13;
                            break; // derecha
                        case 1 : 
                            if (Rand() > 0.5) { RotarCaraY = 2; }
                            else              { RotarCaraZ = 2; }
                            PosCaraX = -13;
                            break; // izquierda
                        case 2 : 
                            if (Rand() > 0.5) { RotarCaraX = 2; }
                            else              { RotarCaraZ = 2; }
                            PosCaraY = 13;
                            break;   // arriba
                        case 3 : 
                            if (Rand() > 0.5) { RotarCaraX = 2; }
                            else              { RotarCaraZ = 2; }
                            PosCaraY = -13;
                            break;   // abajo
                        case 4 : 
                            if (Rand() > 0.5) { RotarCaraX = 2; }
                            else              { RotarCaraY = 2; }
                            PosCaraZ = 13;
                            break;   // delante
                        case 5 : 
                            if (Rand() > 0.5) { RotarCaraX = 2; }
                            else              { RotarCaraY = 2; }
                            PosCaraZ = -13;
                            break;   // atras
                    }
                
                    this.AniRotarGrupoCubos = this.Animaciones.Crear(
                        [   // Pasos de la animación
                            {   Paso : { rX : 0, rY : 0, rZ : 0, pX : 0, pY : 0, pZ : 0 }     }, 
                            {   Paso : { rX : 0, rY : 0, rZ : 0, pX : PosCaraX, pY : PosCaraY, pZ : PosCaraZ }, Tiempo : 300, FuncionTiempo : FuncionesTiempo.SinOut }, 
                            {   Paso : { rX : RotarCaraX * (Math.PI / 2), rY : RotarCaraY * (Math.PI / 2), rZ : RotarCaraZ * (Math.PI / 2) , pX : PosCaraX, pY : PosCaraY, pZ : PosCaraZ }, 
                                Tiempo : 500 * (RotarCaraX + RotarCaraY + RotarCaraZ), 
                                FuncionTiempo : FuncionesTiempo.SinOut 
                            },
                            {   Paso : { rX : RotarCaraX * (Math.PI / 2), rY : RotarCaraY * (Math.PI / 2), rZ : RotarCaraZ * (Math.PI / 2), pX : 0, pY : 0, pZ : 0 }, Tiempo : 300, FuncionTiempo : FuncionesTiempo.SinOut }, 
                        ], 
                        {   // Opciones de la animación
                            FuncionActualizar : function(Valores) { 
                                this.GrupoCubos.rotation.set(Valores.rX , Valores.rY, Valores.rZ);
                                this.GrupoCubos.position.set(Valores.pX , Valores.pY, Valores.pZ);
                            }.bind(this), 
                            FuncionTerminado  : this.AnimarCubos.bind(this), 
                        }
                    );                                
                }*/
    },

AnimacionRotarCubo: function() {
        var Eje = RandInt(3);
        this.CuboAnimado = RandInt(27, 0);
        var RotarCara = [0, 0, 0];
        RotarCara[Eje] = RandInt(3, 1) * (Math.PI / 2);
        var T = 350 * (RotarCara[0] + RotarCara[1] + RotarCara[2]);
        this.AniRotarCubo = this.Animaciones.Crear([{
            Paso: {
                x: 0,
                y: 0,
                z: 0
            }
        }, {
            Paso: {
                x: RotarCara[0],
                y: RotarCara[1],
                z: RotarCara[2]
            },
            Tiempo: T,
            FuncionTiempo: FuncionesTiempo.SinOut
        }], {
            FuncionActualizar: function(Valores) {
                this.Cubos[this.CuboAnimado].rotation.set(Valores.x, Valores.y, Valores.z);
            }.bind(this),
            FuncionTerminado: this.AnimarCubos.bind(this)
        });
    },

AnimacionEncenderLuz: function() {
        if (typeof this.AniEncenderLuz !== 'undefined') this.AniEncenderLuz.Terminar();
        this.AniEncenderLuz = this.Animaciones.Crear([{
            Paso: {
                Intensidad: 0
            }
        }, {
            Paso: {
                Intensidad: 0.7
            },
            Tiempo: 120,
            FuncionTiempo: FuncionesTiempo.SinInOut,
            Retraso: 0
        }, {
            Paso: {
                Intensidad: 0
            },
            Tiempo: 120,
            FuncionTiempo: FuncionesTiempo.SinInOut
        }, {
            Paso: {
                Intensidad: 0.6
            },
            Tiempo: 120,
            FuncionTiempo: FuncionesTiempo.SinInOut
        }, {
            Paso: {
                Intensidad: 0.1
            },
            Tiempo: 120,
            FuncionTiempo: FuncionesTiempo.SinInOut
        }, {
            Paso: {
                Intensidad: 0.5
            },
            Tiempo: 4850,
            FuncionTiempo: FuncionesTiempo.SinInOut
        }, {
            Paso: {
                Intensidad: 1
            },
            Tiempo: 2500,
            FuncionTiempo: FuncionesTiempo.SinInOut
        }], {
            FuncionActualizar: function(Valores) {
                this.SpotLight.intensity = Valores.Intensidad;
                this.DirLight.intensity = Valores.Intensidad * 0.6;
                this.HemiLight.intensity = 0.4 + (Valores.Intensidad * 0.4);
            }.bind(this)
        });
    },

CrearLuces: function() {
        // DirectionalLight
        this.DirLight = new THREE.DirectionalLight(0xffffff, 0);
        this.DirLight.color.setHSL(0.1, 1, 0.95);
        this.DirLight.position.set(20, 35, 50).normalize();
        this.DirLight.position.multiplyScalar(50);
        this.Escena.add(this.DirLight);
        this.DirLight.castShadow = true;
        this.DirLight.shadow.mapSize.width = 2048;
        this.DirLight.shadow.mapSize.height = 2048;
        var d = 80;
        this.DirLight.shadow.camera.left = -d;
        this.DirLight.shadow.camera.right = d;
        this.DirLight.shadow.camera.top = d;
        this.DirLight.shadow.camera.bottom = -d;
        this.DirLight.shadow.camera.far = 3500;
        this.DirLight.target = this.Suelo;
        this.Dlhelper = new THREE.CameraHelper(this.DirLight.shadow.camera);
        this.Escena.add(this.Dlhelper);
        this.Dlhelper.visible = false;

// SpotLight
        this.SpotLight = new THREE.SpotLight(0xCCFFFF, 0);
        this.SpotLight.position.set(25, 100, 750);
        this.SpotLight.shadow.camera.near = 0.01;
        this.SpotLight.shadow.camera.far = 1000;
        this.SpotLight.shadow.camera.visible = true;
        this.SpotLight.castShadow = true;
        this.SpotLight.target = this.Suelo;
        this.Escena.add(this.SpotLight);

this.Splhelper = new THREE.CameraHelper(this.SpotLight.shadow.camera);
        this.Splhelper.visible = false;
        this.Escena.add(this.Splhelper);

// HemisphereLight  
        this.HemiLight = new THREE.HemisphereLight(0xeeeeee, 0xffffff, 0.2);
        this.HemiLight.color.setHSL(0.6, 0.6, 0.6);
        this.HemiLight.groundColor.setHSL(0.095, 1, 0.75);
        this.HemiLight.position.set(0, 0, 0);
        this.Escena.add(this.HemiLight);

this.AnimacionEncenderLuz();
    },

// Función que crea y enlaza todos los controles del ObjetoTest
    CrearTest: function() {
        this.Test = new ObjetoTest({
            css: {
                bottom: "10px",
                left: "10px"
            }
        });
        // Valores para el ObjetoTest de la cámara
        this.lCamara = this.Test.AgregarLista("Camera");
        this.lCamara.Agregar({
            Padre: this.Camara.position,
            Variable: "x",
            Min: -200,
            Max: 200,
            Nombre: "position.x",
            Modificable: false
        });
        this.lCamara.Agregar({
            Padre: this.Camara.position,
            Variable: "y",
            Min: -200,
            Max: 200,
            Nombre: "position.y"
        });
        this.lCamara.Agregar({
            Padre: this.Camara.position,
            Variable: "z",
            Min: -200,
            Max: 200,
            Nombre: "position.z",
            Modificable: false
        });
        this.lCamara.Agregar({
            Padre: this.Camara.rotation,
            Variable: "x",
            Min: -Math.PI,
            Max: Math.PI,
            Nombre: "rotation.x",
            Modificable: false
        });
        this.lCamara.Agregar({
            Padre: this.Camara.rotation,
            Variable: "y",
            Min: -Math.PI,
            Max: Math.PI,
            Nombre: "rotation.y",
            Modificable: false
        });
        this.lCamara.Agregar({
            Padre: this.Camara.rotation,
            Variable: "z",
            Min: -Math.PI,
            Max: Math.PI,
            Nombre: "rotation.z",
            Modificable: false
        });
        this.lCamara.Agregar({
            Padre: this.Camara.Rotacion,
            Variable: "Animacion",
            Nombre: "Animación",
            Actualizar: function(NuevoValor) {
                this.Camara.Rotacion.Animacion = NuevoValor;
                for (var i = 0; i < this.lCamara.Variables.length; i++) {
                    if (i !== 1 && i !== 6) {
                        this.lCamara.Variables[i].Modificable(!NuevoValor);
                    }
                }
            }.bind(this)
        });
        // Objetos
        var lObjetos = this.Test.AgregarLista("Objects");
        // Cubos
        var lCubos = lObjetos.AgregarLista("Cubes");
        this.Cubos_WireFrame = false;
        lCubos.Agregar({
            Padre: this,
            Variable: "Cubos_WireFrame",
            Nombre: "wireframe",
            Actualizar: function(NuevoValor) {
                for (var i = 0; i < this.Cubos.length; i++) {
                    this.Cubos[i].material.wireframe = NuevoValor;
                }
            }.bind(this)
        });

this.Cubos_CastShadow = true;
        lCubos.Agregar({
            Padre: this,
            Variable: "Cubos_CastShadow",
            Nombre: "castShadow",
            Actualizar: function(NuevoValor) {
                for (var i = 0; i < this.Cubos.length; i++) {
                    this.Cubos[i].castShadow = NuevoValor;
                }
            }.bind(this)
        });
        // Suelo
        var lSuelo = lObjetos.AgregarLista("Floor");
        lSuelo.Agregar({
            Padre: this.Suelo.position,
            Variable: "x",
            Min: -200,
            Max: 200,
            Nombre: "position.x"
        });
        lSuelo.Agregar({
            Padre: this.Suelo.position,
            Variable: "y",
            Min: -200,
            Max: 200,
            Nombre: "position.x"
        });
        lSuelo.Agregar({
            Padre: this.Suelo.position,
            Variable: "z",
            Min: -200,
            Max: 200,
            Nombre: "position.x"
        });
        lSuelo.Agregar({
            Padre: this.Suelo.rotation,
            Variable: "x",
            Min: -Math.PI,
            Max: Math.PI,
            Nombre: "rotation.x"
        });
        lSuelo.Agregar({
            Padre: this.Suelo.rotation,
            Variable: "y",
            Min: -Math.PI,
            Max: Math.PI,
            Nombre: "rotation.y"
        });
        lSuelo.Agregar({
            Padre: this.Suelo.rotation,
            Variable: "z",
            Min: -Math.PI,
            Max: Math.PI,
            Nombre: "rotation.z"
        });
        lSuelo.Agregar({
            Padre: this.Suelo.material,
            Variable: "wireframe",
            Actualizar: function(NuevoValor) {
                this.Suelo.material.wireframe = NuevoValor;
            }.bind(this)
        });
        var tLuces = this.Test.AgregarLista("Lights");
        // DirectionalLight
        var tDirLight = tLuces.AgregarLista("DirectionalLight");
        tDirLight.Agregar({
            Padre: this.DirLight.position,
            Variable: "x",
            Min: -100,
            Max: 100,
            Nombre: "position.x"
        });
        tDirLight.Agregar({
            Padre: this.DirLight.position,
            Variable: "y",
            Min: -100,
            Max: 100,
            Nombre: "position.y"
        });
        tDirLight.Agregar({
            Padre: this.DirLight.position,
            Variable: "z",
            Min: -200,
            Max: 200,
            Nombre: "position.z"
        });
        tDirLight.Agregar({
            Padre: this.DirLight,
            Variable: "intensity",
            Min: 0.0,
            Max: 1.0
        });
        tDirLight.Agregar({
            Padre: this.Dlhelper,
            Variable: "visible",
            Nombre: "helper"
        });
        // SpotLight
        var tSpotLight = tLuces.AgregarLista("SpotLight");
        tSpotLight.Agregar({
            Padre: this.SpotLight.position,
            Variable: "x",
            Min: -100,
            Max: 100
        });
        tSpotLight.Agregar({
            Padre: this.SpotLight.position,
            Variable: "y",
            Min: -200,
            Max: 200
        });
        tSpotLight.Agregar({
            Padre: this.SpotLight.position,
            Variable: "z",
            Min: -750,
            Max: 750
        });
        tSpotLight.Agregar({
            Padre: this.SpotLight,
            Variable: "intensity",
            Min: 0.0,
            Max: 1.0
        });
        tSpotLight.Agregar({
            Padre: this.Splhelper,
            Variable: "visible",
            Nombre: "helper"
        });
        // HemisphereLight
        var tHemiLight = tLuces.AgregarLista("HemisphereLight");
        tHemiLight.Agregar({
            Padre: this.HemiLight.position,
            Variable: "x",
            Min: -100,
            Max: 100
        });
        tHemiLight.Agregar({
            Padre: this.HemiLight.position,
            Variable: "y",
            Min: 0,
            Max: 500
        });
        tHemiLight.Agregar({
            Padre: this.HemiLight.position,
            Variable: "z",
            Min: -200,
            Max: 200
        });
        tHemiLight.Agregar({
            Padre: this.HemiLight,
            Variable: "intensity",
            Min: 0.0,
            Max: 1.0
        });

tLuces.Agregar({
            Padre: this,
            Variable: "AnimacionEncenderLuz",
            Nombre: "Ani turn lights on"
        });
    },

// Función que pinta cada frame de la animación
    Pintar: function() {
        // Actualizo los valores del test
        this.Test.ActualizarValores();
        // Actualizo las animaciones de tiempo
        this.Animaciones.Actualizar(this.Tick);
        // Actualizo la rotación de la camara
        this.Camara.Rotar(this.Escena);
        // Aplico el render
        this.Context.render(this.Escena, this.Camara);
    }
});

var Canvas = null;
window.addEventListener('load', function() {
    Canvas = new MultiCubo;
});

编译

CSS

HTML

<script src="https://devildrey33.es/Ejemplos/Utils/ObjetoCanvas.js"></script>
<link rel="stylesheet" href="https://devildrey33.es/Ejemplos/Utils/ObjetoCanvas.css">

<script src="https://devildrey33.es/Ejemplos/Utils/ObjetoTest.js"></script>
<link rel="stylesheet" href="https://devildrey33.es/Ejemplos/Utils/ObjetoTest.css">

<script src="https://devildrey33.es/Ejemplos/Utils/ObjetoAnimacion.js"></script>

<script src="https://devildrey33.es/Ejemplos/Utils/ObjetoLogo.js"></script>
<link rel="stylesheet" href="https://devildrey33.es/Ejemplos/Utils/ObjetoLogo.css">

// En el entorno Normal hay que crear todas las etiquetas
        if (this.OpcionesCanvas['Entorno'] === 'Normal') {
            // Creo la cabecera vacia
            var PreCabecera = document.createElement('header');
            PreCabecera.id = "Cabecera";
            this.OpcionesCanvas['ElementoRaiz'].appendChild(PreCabecera);

// Creo las etiquetas que contienen información adicional sobre la animación
            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>';
        }
        // En el entorno Banner las etiquetas ya estan creadas, pero hay que eliminar y volver a crear el canvas
        if (this.OpcionesCanvas['Entorno'] === 'Banner') {
            this.Cabecera = document.getElementById("Cabecera");
            // Hay que eliminar la etiqueta canvas por que al crear un 2d context encima de un webgl context y viceversa produce error.
            if (document.getElementById('Cabecera_Canvas')) {
                this.Cabecera.removeChild(document.getElementById('Cabecera_Canvas'));
            }
            this.Cabecera.innerHTML = this.Cabecera.innerHTML + "<canvas id='Cabecera_Canvas'></canvas>";
            // Marco que contiene la información de la animación del banner
            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>";
        }

// Asigno el estado cargando, que muestra una ventana que avisa al usuario.
        this.Cabecera.setAttribute("cargando", true);
        this.Cabecera.setAttribute("animar", true);

// Obtengo la etiqueta canvas    
        this.Canvas = document.getElementById("Cabecera_Canvas");

// Tamaño del canvas
        this.Ancho = 0; // Ancho del canvas
        this.Alto = 0; // Altura del canvas

// Determino el ancho y altura del canvas (fijo o variable)
        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))";
        }

// Creación del contexto
        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; // Ultimo Tick del sistema + 1000ms
        this.FPS_Contador = 0; // Contador de frames por segundo    
        this.FocoWeb = true; // Foco de la ventana de la web
        this.Tick = 0; // Date.now actualizado en cada frame
        // Calculo el tamaño del canvas
        this.EventoRedimensionar();
        // Temporizador para la animación
        this.RAFID = window.requestAnimationFrame(this.Actualizar.bind(this));

// Evento mouse movimiento
        this.EnlazarEventos();

// Estado cargando
        this.Cargando(true);

if (this.OpcionesCanvas.MostrarFPS === false) {
            // Escondo el marco de los FPS
            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() {
        // Necesito guardar una variable con cada evento reconvertido con bind, para poder hacer mas tarde el removeEventListener
        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);
    };

// Evento que salta cuando se obtiene el foco de la ventana
    ObjetoCanvas.prototype.EventoFocoRecibido = function() {
        console.log("Foco de la ventana recibido");
        this.FocoWeb = true;
        if (this.OpcionesCanvas.Entorno === "Normal") {
            this.EventoReanudar();
        }
        // En el entorno banner, solo se reanuda si el banner es visible en la ventana
        else if (this.OpcionesCanvas.Entorno === "Banner" && window.scrollX < 190) {
            this.EventoReanudar();
        }
    };

// Evento que salta cuando se pierde el foco de la ventana
    ObjetoCanvas.prototype.EventoFocoPerdido = function() {
        console.log("Foco de la ventana perdido");
        this.FocoWeb = false;
        this.EventoPausa();
    };

// Función que devuelve el pixel ratio del dispositivo actual
    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;
    };

// Función que determina el estado de carga (cargando/completo) true/false
    ObjetoCanvas.prototype.Cargando = function(carga) {
        document.getElementById("Cabecera").setAttribute("cargando", carga);
    };

// Función interna utilizada por requestAnimationFrame para actualizar y pintar la animación
    ObjetoCanvas.prototype.Actualizar = function() {
        this.Tick = Date.now();
        this.FPS();
        this.RAFID = window.requestAnimationFrame(this.Actualizar.bind(this));
        this.Pintar.apply(this);
    };

// Función que procesa el evento keydown
    ObjetoCanvas.prototype.EventoTeclaPresionada = function(event) {
        if (typeof(this.TeclaPresionada) !== "undefined") {
            this.TeclaPresionada.apply(this, [event]);
        }
    };
    // Función que procesa el evento keyup
    ObjetoCanvas.prototype.EventoTeclaSoltada = function(event) {
        if (typeof(this.TeclaSoltada) !== "undefined") {
            this.TeclaSoltada.apply(this, [event]);
        }
    };

// Función que procesa el evento mousemove
    ObjetoCanvas.prototype.EventoMouseMove = function(event) {
        if (typeof(this.MouseMove) !== "undefined") {
            this.MouseMove.apply(this, [event]);
        }
    };

// Función que procesa el evento mousedown
    ObjetoCanvas.prototype.EventoMousePresionado = function(event) {
        if (typeof(this.MousePresionado) !== "undefined") {
            this.MousePresionado.apply(this, [event]);
        }
    };
    // Función que procesa el evento mouseup
    ObjetoCanvas.prototype.EventoMouseSoltado = function(event) {
        if (typeof(this.MouseSoltado) !== "undefined") {
            this.MouseSoltado.apply(this, [event]);
        }
    };

// Función que procesa el evento mousemove
    ObjetoCanvas.prototype.EventoMouseEnter = function(event) {
        console.log("ObjetoCanvas.EventoMouseEnter");
        if (typeof(this.MouseEnter) !== "undefined") {
            this.MouseEnter.apply(this, [event]);
        }
    };

// Función que procesa el evento mousemove
    ObjetoCanvas.prototype.EventoMouseLeave = function(event) {
        console.log("ObjetoCanvas.EventoMouseLeave");
        if (typeof(this.MouseLeave) !== "undefined") {
            this.MouseLeave.apply(this, [event]);
        }
    };

// Función que obtiene el tamaño del canvas una vez redimensionado.
    ObjetoCanvas.prototype.EventoRedimensionar = function() {
        // Calculo el nuevo ancho y la nueva altura (si no son fijas)
        if (this.OpcionesCanvas.Ancho === "Auto") {
            this.Ancho = document.getElementById("Cabecera").offsetWidth;
        }
        if (this.OpcionesCanvas.Alto === "Auto") {
            this.Alto = document.getElementById("Cabecera").offsetHeight;
        }
        // Asigno el alto y el ancho a los atributos del canvas
        this.Canvas.setAttribute("width", this.Ancho);
        this.Canvas.setAttribute("height", this.Alto);
        if (this.OpcionesCanvas.Tipo.toLowerCase() === "three") { // redimensionar el THREE.JS
            this.Context.setSize(this.Ancho, this.Alto);
            if (this.Camara !== null && typeof(this.Camara) !== 'undefined') { // Si hay una camara creada
                this.Camara.aspect = this.Ancho / this.Alto;
                this.Camara.updateProjectionMatrix();
            }
        }
        // 
        if (typeof(this.Redimensionar) !== "undefined") {
            this.Redimensionar.apply(this);
        }
    };

// Función para pausar la animación
    // - Hay que detectar cuando la animación no es visible y cuando la ventana no tiene el foco para pausar la animación
    // - En modo depuración nunca se hace la pausa (esto es para poder depurar el Three.js en el Three.js.inspector)
    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();
            }
        }
    };

// Función para reanudar la animación desde el ultimo punto
    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();
            }
        }
    };

// Función que controla el scroll para determinar si la animación sigue a la vista o no y de esta forma detenerla / reanudarla
    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);
        }
    };

// Función que cuenta los frames por segundo
    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));
    }

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);
    }

/* logo animation */
    var Logo_devildrey33 = function() {
        var PreLogo = document.createElement('a');
        PreLogo.setAttribute("href", "#");
        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>

立方体可以像魔方一样自由旋转。下面的牛头马面logo，悬停时，呈现文本字母逐个飘入的动画效果。

three, cube, grid

编辑器支持Emmet

快捷键

立方体可以像魔方一样自由旋转。 下面的牛头马面logo，悬停时，呈现文本字母逐个飘入的动画效果。

three, cube, grid

Three.js 3D结晶体形状的动画图标

WebGL Three.js 3D水波浪着色器代码

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

立方体可以像魔方一样自由旋转。下面的牛头马面logo，悬停时，呈现文本字母逐个飘入的动画效果。