Eliminating the interior surfaces using Three.js

Question

Eliminating the interior surfaces using Three.js

Utilizing three.js, I am combining multiple cubes to form various block shapes using the THREE.GeometryUtils.merge function. My goal is to achieve transparency for these block shapes; however, this currently results in a visible display of multiple individual cubes stuck together.

How can I create transparent merged cubes without rendering the inner edges? (Is there a way to eliminate the internal faces?)

Below is my code snippet for merging the cubes:

geometry = new THREE.CubeGeometry(STEP_SIZE, STEP_SIZE, STEP_SIZE);
for (i = 0; i < shape.length; i++) {
    tmpGeometry =  new THREE.Mesh(new THREE.CubeGeometry(STEP_SIZE, STEP_SIZE, STEP_SIZE));
    tmpGeometry.position.x = STEP_SIZE * shape[i].x;
    tmpGeometry.position.y = STEP_SIZE * shape[i].y;
    THREE.GeometryUtils.merge(geometry, tmpGeometry);
}

block = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 0x0000ff, opacity: 0.5, transparent: true }));

javascript 3d three.js

Answer 1

Answer №1

Through some trial and error, I was able to achieve the desired result. Hopefully, this method will benefit others as well.

I meticulously examine each face of the block and perform a raycast on the block itself using the centroid of the face and its inverted normal (pointing inward). If there is an intersection with another face of the block, it indicates that the face is internal, allowing us to proceed with its removal.

// The block variable represents a Three.Mesh object
function removeInternalFaces(block) {
    var geometry = block.geometry;
    var face;
    var toDelete = [];
    var blockRaycaster = new THREE.Raycaster();

    // Iterate through each face, casting rays from their centroids (with negated normals)
    // Any intersected face is considered an inner face
    for (i = 0; i < geometry.faces.length; i++) {
        face = geometry.faces[i];
        if (face) {
            normal = face.normal.clone();
            normal.negate();
            blockRaycaster.set(face.centroid, normal);
            intersects = blockRaycaster.intersectObject(block);
            for (j = 0; j < intersects.length; j++) {
                toDelete.push(intersects[j].faceIndex);
            }
        }
    }

    // Delete the identified faces
    for (i = 0; i < toDelete.length; i++) {
        delete geometry.faces[toDelete[i]];
    }
    geometry.faces = geometry.faces.filter( function(v) { return v; });
    geometry.elementsNeedUpdate = true; // Update the faces
}

Answer 2

Through some trial and error, I was able to achieve the desired result. Hopefully, this method will benefit others as well.

I meticulously examine each face of the block and perform a raycast on the block itself using the centroid of the face and its inverted normal (pointing inward). If there is an intersection with another face of the block, it indicates that the face is internal, allowing us to proceed with its removal.

// The block variable represents a Three.Mesh object
function removeInternalFaces(block) {
    var geometry = block.geometry;
    var face;
    var toDelete = [];
    var blockRaycaster = new THREE.Raycaster();

    // Iterate through each face, casting rays from their centroids (with negated normals)
    // Any intersected face is considered an inner face
    for (i = 0; i < geometry.faces.length; i++) {
        face = geometry.faces[i];
        if (face) {
            normal = face.normal.clone();
            normal.negate();
            blockRaycaster.set(face.centroid, normal);
            intersects = blockRaycaster.intersectObject(block);
            for (j = 0; j < intersects.length; j++) {
                toDelete.push(intersects[j].faceIndex);
            }
        }
    }

    // Delete the identified faces
    for (i = 0; i < toDelete.length; i++) {
        delete geometry.faces[toDelete[i]];
    }
    geometry.faces = geometry.faces.filter( function(v) { return v; });
    geometry.elementsNeedUpdate = true; // Update the faces
}

Answer 3

Answer №2

To initialize each face of a cube's material separately, you can individually set the opacity of the inner faces to 0. The following code demonstrates how to achieve this:

var materialArray = [];

    // Face 1
    materialArray.push(new THREE.MeshLambertMaterial({
        opacity: 0,
        color: 0x0000FF,
        transparent: true
    }));
    
    // Face 2
    materialArray.push(new THREE.MeshLambertMaterial({
        opacity: 0,
        color: 0x0000FF,
        transparent: true
    }));

    // Faces 3, 4, 5, 6
    for (var i = 0; i < 4; i++) {
        materialArray.push(new THREE.MeshLambertMaterial({
            opacity: 0.5,
            color: 0x0000FF,
            transparent: true
        }));
    }

    var CubeMat = new THREE.MeshFaceMaterial(materialArray);

You can then pass this material array to your cube mesh like so:

block = new THREE.Mesh(geometry, CubeMat);

For a demonstration, you can check out this JsFiddle link.

Answer 4

To initialize each face of a cube's material separately, you can individually set the opacity of the inner faces to 0. The following code demonstrates how to achieve this:

var materialArray = [];

    // Face 1
    materialArray.push(new THREE.MeshLambertMaterial({
        opacity: 0,
        color: 0x0000FF,
        transparent: true
    }));
    
    // Face 2
    materialArray.push(new THREE.MeshLambertMaterial({
        opacity: 0,
        color: 0x0000FF,
        transparent: true
    }));

    // Faces 3, 4, 5, 6
    for (var i = 0; i < 4; i++) {
        materialArray.push(new THREE.MeshLambertMaterial({
            opacity: 0.5,
            color: 0x0000FF,
            transparent: true
        }));
    }

    var CubeMat = new THREE.MeshFaceMaterial(materialArray);

You can then pass this material array to your cube mesh like so:

block = new THREE.Mesh(geometry, CubeMat);

For a demonstration, you can check out this JsFiddle link.

Eliminating the interior surfaces using Three.js

Answer №1

Answer №2

Similar questions

How can the onclick attribute be modified in an HTML document?

Vue, list reordering acts strangely when selecting the displayed checkbox

Load a script in a specific div using React

The performance of my SVG Filter is dismal

Guide on creating windows, openings, or cutting shapes in three.js

Is there a way to disregard the data returned from previous AJAX calls?

Renaming errors within a project with a complex nested structure using npm

What is the reason for the unusual incrementing of the index in JavaScript?

Hermes js engine encounters a TypeError when attempting to access the property '__expo_module_name__' of an undefined value

Guide on assigning JSON response values to TypeScript variables in Angular 4

Disable the ng2-tooltip-directive tooltip when the mouse is moved

How can I import icons or JSX elements dynamically using a string?

Blender Three.JS integration plugin experiencing technical issues

Issues with rendering AngularJS onto an HTML page are currently being experienced

Having trouble getting jquery to filter json data based on the selected option

Check through an array for any updates whenever a function is called and my react state is altered

What is preventing the AJAX from saving the data in the database?

AngularJS radio buttons are interactive HTML elements that allow users

How to dynamically insert a new row below a specific row with a sliding animation in jQuery

The MVC 5 view is unable to display an HTML image when adding it within an appended div