在three.js中合并几何

Question

I have a scene which contains multiple meshes, each of varying shapes and sizes.

I have looped through each Mesh and using geometry.merge() I have been able to create a new mesh from the geometries in the scene.

I want to mask the entire mesh with an alphaMask, however, each geometry has the material applied to it separately.

An example of this can be seen here - https://codepen.io/danlong/pen/KXOObr

    function addObjects(scene) {

    // merged geomoetry & material
    var mergedGeometry = new THREE.Geometry();
    var mergedMaterial = new THREE.MeshStandardMaterial({ color: "#444", transparent: true, side: THREE.DoubleSide, alphaTest: 0.5, opacity: 1, roughness: 1 });


    // multiple meshes
    var geometry = new THREE.IcosahedronGeometry(30, 5);
    var material = new THREE.MeshStandardMaterial({ color: "#444" });

    var geo1 = new THREE.IcosahedronGeometry(30, 5);
    var mesh1 = new THREE.Mesh( geo1, material );
    mesh1.position.x = 10;
    mesh1.position.y = 10;
    mesh1.position.z = 0;

    var geo2 = new THREE.IcosahedronGeometry(30, 5);
    var mesh2 = new THREE.Mesh( geo2, material );
    mesh2.position.x = 20;
    mesh2.position.y = 20;
    mesh2.position.z = 0;

    var geo3 = new THREE.IcosahedronGeometry(30, 5);
    var mesh3 = new THREE.Mesh( geo3, material );
    mesh3.position.x = 30;
    mesh3.position.y = 30;
    mesh3.position.z = 0;

    // scene.add(mesh1, mesh2, mesh3);
    mesh1.updateMatrix();
    mergedGeometry.merge(mesh1.geometry, mesh1.matrix);

    mesh2.updateMatrix();
    mergedGeometry.merge(mesh2.geometry, mesh2.matrix);

    mesh3.updateMatrix();
    mergedGeometry.merge(mesh3.geometry, mesh3.matrix);

    // alpha texture 
    var image = document.createElement('img');
    var alphaMap = new THREE.Texture(image);
    image.onload = function()  {
        alphaMap.needsUpdate = true;
    };
    image.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGUlEQVQoU2NkYGD4z4AHMP7//x+/gmFhAgCXphP14bko/wAAAABJRU5ErkJggg==';
    mergedMaterial.alphaMap = alphaMap;
    mergedMaterial.alphaMap.magFilter = THREE.NearestFilter;
    mergedMaterial.alphaMap.wrapT = THREE.RepeatWrapping;
    mergedMaterial.alphaMap.repeat.y = 1;

    // merged geometry with alpha mask
    merge1 = new THREE.Mesh(mergedGeometry, mergedMaterial);
        merge1.rotation.z = -Math.PI/4;

    // merge geometry without alpha mask
    var merge2 = new THREE.Mesh(mergedGeometry, material);
    merge2.position.x = -100;
        merge2.rotation.z = -Math.PI/4;

    scene.add(merge1, merge2);
    return mesh;
}

The mesh on the left is the merged geometries which I want to apply the alphaMask to. The mesh on the right is the outcome of this and instead of the map being applied to the mesh as a whole, each of the geometries has the map applied.

Is there a way to mask the entire mesh and not each geometry?

-- three.js r86

EDIT: I've tried to apply a clipping plane to my mesh but it's not the effect I'm looking for. I want to be able to apply an alphaMask across the whole mesh and reveal it however I make my mask image. Something like this effect - https://codepen.io/supah/pen/zwJxdb

Is it something to do with the UV's being preserved from the original geometries? Do I need to change these in some way?

Answer 1

I think what you really want is an overlaid mask. This can be accomplished by rendering a single plane that has the alpha map applied, on top of the scene rendering. Using an orthographic camera, and controlling certain renderer settings, such as disabling automatic clearing of color.