5

我有一个想法要创建，但是由于我对 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 个面。我在问 - 如果这种方法是要走的路吗？结果看起来像这样。（白线 - 线框，黑线 - （画布上的图纸）我想要的线框 - 以后有问题）。注意 - 通过这种方式移动 - 纹理会随着，我不知道，如果我使用这些顶点制作新三角形，我将如何设置纹理。 在此处输入图像描述

4

0 回答 0