javascript - Threejs、ガラス粉々 効果を作る

Question

作成するアイデアがありますが、Three.js と 3D プログラミング全般に関する知識が限られているため、行き詰まっています... アイデア: ユーザーがいくつかのことを行っています。ある時点で、前面の画面全体がクラッシュし、背後に別のものが表示されます。当初、私の考えは、現在起こっていることのスクリーンショットを作成し、その画像をすべての前に配置することでした（それでも、その平面を100％のサイズにするのは困難です-アイデア-それが表示されたとき、ユーザーは違いを見分けることができません、古い 3D レンダリングと新しい 2D 画像の間)、そして - それを粉砕します。それで - さまざまな例を Web で調べて、私は何かを作りました. - スクリーンショットを作成し、平面を作成し、スクリーンショットをテクスチャとして適用しました。粉砕効果を作成するために、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 つの面を移動しました。私は尋ねています-このアプローチが進むべき道であるかどうか？結果はこんな感じ。(白い線 - ワイヤーフレーム、黒い線 - (キャンバスでの描画) 目的のワイヤーフレーム - 後で問題)。注 - このように移動すると、テクスチャが進みます。これらの頂点を使用して新しい三角形を作成する場合、テクスチャをどのように設定すればよいかわかりません。