Threejs，使玻璃粉碎效果

Question

我有创意的想法，但由于我对Three.js和3D编程的了解总体上是有限的，我被卡住了...... 想法：用户正在做一些事情。在某些时候 - 整个前屏幕崩溃，并揭示了不同的背后。 一开始，我的想法是 - 制作截图，了解现在正在发生的事情，将图像放在一切之前（仍然难以使该平面占据100％的大小 - 想法 - 当它显示时，用户无法区分，在旧的3D效果图和新的2d图片之间），然后 - 粉碎它。所以 - 通过环顾网络寻找不同的例子，我做了一些......事情 - 创建截图，制作平面并应用截图作为纹理。为了创建破碎效果，我使用TessellateModifier来划分该平面，并使用ExplodeModifier将每个面创建为分离面。 这是我到目前为止所做的代码。

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

现在 - 通过改变3个顶点的坐标，我移动了1个面。我问 - 如果这种方法是要走的路？结果如下所示。 （白线 - 线框，黑线 - （画布中的图纸）我想要的线框 - 以后的问题）。注意 - 通过这种方式移动 - 纹理随之而来，我不知道，如果我使用这些顶点制作新的三角形，我将如何设置纹理。