javascript - Threejs, haciendo que el vidrio rompa el efecto

three.js

Question

Tengo una idea para crear, pero dado que mi conocimiento sobre Three.js y la programación 3D en general es limitado, estoy atascado ... Idea: el usuario está haciendo algunas cosas. En algún momento, toda la pantalla frontal se bloquea y revela algo diferente detrás. Al principio, mi idea era: hacer una captura de pantalla, de lo que está sucediendo ahora, poner esa imagen delante de todo (aún así, tener dificultades para hacer que ese avión tome el 100% de tamaño, idea) cuando se muestra, el usuario no puede notar la diferencia , entre viejas representaciones 3d, y nueva imagen 2d), y luego - romperlo. Entonces, al buscar en la Web ejemplos diferentes, realicé algunas ... cosas: capturas de pantalla creadas, planos y una captura de pantalla aplicada como textura. Para crear un efecto desgarrador, utilicé TessellateModifier para dividir ese plano y ExplodeModifier para crear cada cara como cara separada. Aquí estará el código que hice hasta ahora.

function drawSS()
{
    var img = new Image;
    img.onload = function() { // When screenshot is ready
        var canvas = document.createElement(''canvas'');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        var context = canvas.getContext(''2d'');
        // CANVAS DRAWINGS
        // Draws screenshot
        // END
        var texture = new THREE.Texture(canvas);
        texture.needsUpdate = true;
        var multiMaterial = [
            new THREE.MeshBasicMaterial({map: texture, side: THREE.FrontSide}), // canvas drawings
            new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true, transparent: true}) // for displaying wireframe
            ]; 

        var geometry = new THREE.PlaneGeometry(canvas.width, canvas.height); // create plane

        for (var i = 0, len = geometry.faces.length; i < len; i++) { // Snippet from some stackoverflow post, that works.
            var face = geometry.faces[i].clone();
            face.materialIndex = 1;
            geometry.faces.push(face);
            geometry.faceVertexUvs[0].push(geometry.faceVertexUvs[0][i].slice(0));
        }

        geometry.dynamic = true;

        THREE.GeometryUtils.center( geometry ); // ?

        var tessellateModifier = new THREE.TessellateModifier( 10 );

        for ( var i = 0; i < 5; i ++ )
            tessellateModifier.modify( geometry );

        new THREE.ExplodeModifier().modify( geometry );

        geometry.vertices[0].x -=300;
        geometry.vertices[1].x -=300;
        geometry.vertices[2].x -=300;

        var mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial(multiMaterial) );
        scene.add( mesh );
    };
        // THEN, set the src
    img.src = THREEx.Screenshot.toDataURL(renderer);
}

Por ahora, moví 1 cara, cambiando las coordenadas de 3 vértices. Estoy preguntando si este enfoque es el camino a seguir. El resultado se ve así. (líneas blancas - wireframe, líneas negras - (dibujos en lienzo) mis wireframes deseados - problema para más adelante). Nota: al moverse de esta manera, la textura sigue, no sé, si hago nuevos triángulos usando estos vértices, ¿cómo establecería la textura?