The sequence in which objects are added in ThreeJS can impact the alpha display

Question

The sequence in which objects are added in ThreeJS can impact the alpha display

While working on my program, I encountered an issue with creating a dynamic number of point cloud objects with custom attributes that include the alpha value of each particle. Everything seems to be functioning properly except for when these objects are nested within each other, such as spheres. In this scenario, the smaller (inner) objects are becoming obscured by the larger ones, despite having their particles' alpha set correctly. However, if I change the order in which I add the point-cloud objects to the scene, starting with the larger ones and then moving down to the smaller ones, I am able to see the smaller objects through the bigger ones. My question is whether there is a way to instruct the renderer to update or recalculate the alpha values, or re-render the smaller inner objects so that they become visible?

javascript three.js

Answer 1

Answer №1

Encountered the same issue as you did, but managed to solve it by calculating and setting the render depth for each mesh based on the camera position and mesh center.

If you have already created meshes for your objects, storing them in an array can simplify the process of determining and applying render depth settings.

Here's a sample implementation:

updateRenderDepthOnRooms(cameraPosition: THREE.Vector3): void {
    var rooms: Room[] = this.getAllRooms();

    rooms.forEach((room) => {
        var roomCenter = getCenter(room.mesh.geometry);  
        var renderDepth = 0 - roomCenter.distanceToSquared(cameraPosition);
        room.mesh.renderDepth = renderDepth;            
    });
}

function getCenter(geometry: THREE.Geometry): THREE.Vector3 {
    geometry.computeBoundingBox();

    var bb = geometry.boundingBox;
    var offset = new THREE.Vector3();

    offset.addVectors(bb.min, bb.max);
    offset.multiplyScalar(0.5);

    return offset;
}

To find the center of your object, retrieve the geometry from your mesh and utilize the getCenter(..) function provided in the example. Calculate the render depth using ThreeJs' distanceToSquared(..) function and assign this value to your mesh.

That should do the trick. Wishing you success with this solution.

Answer 2

Encountered the same issue as you did, but managed to solve it by calculating and setting the render depth for each mesh based on the camera position and mesh center.

If you have already created meshes for your objects, storing them in an array can simplify the process of determining and applying render depth settings.

Here's a sample implementation:

updateRenderDepthOnRooms(cameraPosition: THREE.Vector3): void {
    var rooms: Room[] = this.getAllRooms();

    rooms.forEach((room) => {
        var roomCenter = getCenter(room.mesh.geometry);  
        var renderDepth = 0 - roomCenter.distanceToSquared(cameraPosition);
        room.mesh.renderDepth = renderDepth;            
    });
}

function getCenter(geometry: THREE.Geometry): THREE.Vector3 {
    geometry.computeBoundingBox();

    var bb = geometry.boundingBox;
    var offset = new THREE.Vector3();

    offset.addVectors(bb.min, bb.max);
    offset.multiplyScalar(0.5);

    return offset;
}

To find the center of your object, retrieve the geometry from your mesh and utilize the getCenter(..) function provided in the example. Calculate the render depth using ThreeJs' distanceToSquared(..) function and assign this value to your mesh.

That should do the trick. Wishing you success with this solution.

The sequence in which objects are added in ThreeJS can impact the alpha display

Answer №1

Similar questions

Problem with email verification process

The UI Bootstrap Datepicker requires a second click in order to update the month

Nightwatch.js custom assertion for array comparison fails to function as expected

Using JavaScript, display JSON data retrieved from a PHP file

Fetching the exchanged messages between the sender and recipient - utilizing MongoDB, Express, and React for chat functionality

What is the best way to restrict the input year on @mui/x-date-pickers to a certain range?

Mandatory press for a function known as a click

Is there a way in JavaScript to activate a web element by clicking on its center?

react-responsive: The children of a Responsive component do not have the capability to receive props

Concealing a div depending on the price variation

Using custom class instances or objects within Angular controllers is a simple process

Developing an intricate nesting structure for an object

Tips on customizing data labels using Jquery Highcharts in column charts

Using jQuery to modify the CSS of a div located outside of an iframe

Utilize esbuild to load Bootstrap JavaScript libraries

Find the time matching in a time string using Javascript

Calculating the total of selected values in Checkboxes and Selectors using KnockoutJS

jQuery's show/hide functionality allows for the dynamic resizing of images,

Why does React-Perfect-Scrollbar not work properly when the height of an element is not specified in pixels?

The Chrome Extension is unable to recognize a portion of the URL following the # symbol in the contentscript.js code