Managing impact in THREE.js

Question

Managing impact in THREE.js

Hello everyone, I've been working on a personal project lately that involves the amazing library three.js.

Specifically, I've been exploring collision detection using the example from this GitHub repository, focusing on detecting overlaps between objects using voxels.

To illustrate my issue, I've been referencing the interactive voxel painter example.

When rendering a voxel on the screen, I noticed that placing another voxel above the cube works fine, but doing so below a certain radius doesn't allow me to render it:

https://i.sstatic.net/A8B1n.png

Above is an image of a rendered "cube": https://i.sstatic.net/XKRWb.png

Here is a function I created based on stemkoski's example:

checkOverlapObject: function(voxel) //This function checks for overlapping objects
{
    var originPoint = voxel.position.clone();
    var collidableObjs = this.rooms;
    for (var vertexIndex = 0; vertexIndex < voxel.geometry.vertices.length; vertexIndex++)
    {       
        var localVertex = voxel.geometry.vertices[vertexIndex].clone();
        console.log(localVertex);
        var globalVertex = localVertex.applyMatrix4( voxel.matrix );
        console.log(globalVertex);

        var directionVector = globalVertex.sub(voxel.position);
        console.log(directionVector);

        console.log(originPoint);
        console.log(directionVector.clone().normalize());
        if(collidableObjs.length > 0)
        {
            var ray = new THREE.Raycaster(originPoint, directionVector.clone().normalize());
            var collisionResults = ray.intersectObjects(collidableObjs);
            if (collisionResults.length > 0 && collisionResults[0].distance < directionVector.length())
            {
                console.log(collisionResults);
                console.log(collisionResults[0].distance);
                console.log(directionVector.length());
                return false;
            }
        }
    }
    return true;
},

Prior to adding a rendered voxel, users can preview whether they have permission to add it. This is achieved by passing a voxel created as follows:


var voxel = new THREE.Mesh(this.room.cubeGeometry, this.room.cubeTmpHoverMaterial);
voxel.geometry.computeBoundingBox();
voxel.position.copy(intersect.point).add(intersect.face.normal);
voxel.position.divideScalar(50).floor().multiplyScalar(50).addScalar(25);
voxel.material.color.setHex(this.colorTmpHover);

Into our checkOverlapObject function to detect any overlap with already rendered objects on the screen or grid.

Following the creation of this neat little function, I added several console.log outputs for debugging purposes. Here are some of the results:

T…E.Vector3 {x: 25, y: 25, z: 25} <!-- our localVertex
T…E.Vector3 {x: 25, y: 25, z: 25} <!-- our globalVertex
T…E.Vector3 {x: 0, y: 0, z: -350} <!-- our directionVector
T…E.Vector3 {x: 25, y: 25, z: 375} <!-- our originPoint
T…E.Vector3 {x: 0, y: 0, z: -1} <!-- our directionVector.clone().normalize()
[Object, Object] <!-- our collisionResults
225 <!-- our collisionResults[0].distance
350 <!-- our directionVector.length()

This data is based on the first picture provided in the post.

I should mention that I have other voxels occupying more than one block on the grid. Thus, the function needs to consider the entire object when checking for overlaps with existing voxels. Touching adjacent objects is allowed.

If anyone has suggestions or thoughts on what might be causing the issue, please feel free to share.

javascript three.js

Answer 1

Answer №1

After searching extensively, I have finally come up with a solution. I have developed a custom function for handling object collisions and overlaps.

The issue with the existing collision code is that it only checks if a ray projected from the object's origin intersects with any other objects, without considering if any part of the object is actually touching another object.

My approach involves evaluating the coordinates of the objects in terms of width (x) and depth/length (z). By iterating through the minimum and maximum x/z values of both the new object to be added and the already rendered objects on the plane, we can determine if there is any overlap or collision.

Here is the basic idea:

For each object, we start at the minimum z position and incrementally move through the length/z using a for loop. Then, we move on to the width/x by starting at the minimum x position and again using a for loop to traverse through the width.

The purpose of this method is to compare every exact point of the new object with the already existing objects on the plane to identify any matches indicating an overlap.

Below is the implementation of the method:


checkOverlapObject: function(voxel) // THIS FUNCTION CHECKS FOR OVERLAPPING OBJECTS
{
    var collidableObjs = this.rooms;
    
    // Obtain bounding box dimensions of the voxel
    var voxelMX = voxel.geometry.boundingBox.max.x;
    var voxelMZ = voxel.geometry.boundingBox.max.z;
    var voxelmX = voxel.geometry.boundingBox.min.x;
    var voxelmZ = voxel.geometry.boundingBox.min.z;

    var voxelPX = voxel.position.x;
    var voxelPZ = voxel.position.z;

    var totalPositionVoxelminZ = (voxelPZ + voxelmZ);
    var totalPositionVoxelminX = (voxelPX + voxelmX);
    var totalPositionVoxelMAXZ = (voxelPZ + voxelMZ);
    var totalPositionVoxelMAXX = (voxelPX + voxelMX);

    for(var length = totalPositionVoxelminZ; length < totalPositionVoxelMAXZ; length++)
    {
        for(var width = totalPositionVoxelminX; width < totalPositionVoxelMAXX; width++)
        {
            for(var i = 0; i < collidableObjs.length; i++)
            {
                // Retrieve bounding box dimensions of existing objects
                var thisvoxelMX = this.rooms[i].geometry.boundingBox.max.x;
                var thisvoxelMZ = this.rooms[i].geometry.boundingBox.max.z;
                var thisvoxelmX = this.rooms[i].geometry.boundingBox.min.x;
                var thisvoxelmZ = this.rooms[i].geometry.boundingBox.min.z;
                
                var thisvoxelPX = this.rooms[i].position.x;
                var thisvoxelPZ = this.rooms[i].position.z;

                var thistotalPositionVoxelminZ = (thisvoxelPZ + thisvoxelmZ);
                var thistotalPositionVoxelminX = (thisvoxelPX + thisvoxelmX);
                var thistotalPositionVoxelMAXZ = (thisvoxelPZ + thisvoxelMZ);
                var thistotalPositionVoxelMAXX = (thisvoxelPX + thisvoxelMX);

                for(var insideZ = thistotalPositionVoxelminZ; insideZ < thistotalPositionVoxelMAXZ; insideZ++)
                {
                    for(var insideX = thistotalPositionVoxelminX; insideX < thistotalPositionVoxelMAXX; insideX++)
                    {
                        if(insideZ == length && insideX == width)
                        {
                            return false; 
                        }
                    }
                }
            }
        }
    }

    return true;
}

Result visualization:

https://i.sstatic.net/rWRLS.png

This method allows for precise detection of object interactions and potential collisions due to its point-by-point analysis.

If you encounter performance issues especially when dealing with multiple objects, I am open to suggestions on enhancing and optimizing the code for better efficiency. Feel free to share your insights!

Answer 2

After searching extensively, I have finally come up with a solution. I have developed a custom function for handling object collisions and overlaps.

The issue with the existing collision code is that it only checks if a ray projected from the object's origin intersects with any other objects, without considering if any part of the object is actually touching another object.

My approach involves evaluating the coordinates of the objects in terms of width (x) and depth/length (z). By iterating through the minimum and maximum x/z values of both the new object to be added and the already rendered objects on the plane, we can determine if there is any overlap or collision.

Here is the basic idea:

For each object, we start at the minimum z position and incrementally move through the length/z using a for loop. Then, we move on to the width/x by starting at the minimum x position and again using a for loop to traverse through the width.

The purpose of this method is to compare every exact point of the new object with the already existing objects on the plane to identify any matches indicating an overlap.

Below is the implementation of the method:


checkOverlapObject: function(voxel) // THIS FUNCTION CHECKS FOR OVERLAPPING OBJECTS
{
    var collidableObjs = this.rooms;
    
    // Obtain bounding box dimensions of the voxel
    var voxelMX = voxel.geometry.boundingBox.max.x;
    var voxelMZ = voxel.geometry.boundingBox.max.z;
    var voxelmX = voxel.geometry.boundingBox.min.x;
    var voxelmZ = voxel.geometry.boundingBox.min.z;

    var voxelPX = voxel.position.x;
    var voxelPZ = voxel.position.z;

    var totalPositionVoxelminZ = (voxelPZ + voxelmZ);
    var totalPositionVoxelminX = (voxelPX + voxelmX);
    var totalPositionVoxelMAXZ = (voxelPZ + voxelMZ);
    var totalPositionVoxelMAXX = (voxelPX + voxelMX);

    for(var length = totalPositionVoxelminZ; length < totalPositionVoxelMAXZ; length++)
    {
        for(var width = totalPositionVoxelminX; width < totalPositionVoxelMAXX; width++)
        {
            for(var i = 0; i < collidableObjs.length; i++)
            {
                // Retrieve bounding box dimensions of existing objects
                var thisvoxelMX = this.rooms[i].geometry.boundingBox.max.x;
                var thisvoxelMZ = this.rooms[i].geometry.boundingBox.max.z;
                var thisvoxelmX = this.rooms[i].geometry.boundingBox.min.x;
                var thisvoxelmZ = this.rooms[i].geometry.boundingBox.min.z;
                
                var thisvoxelPX = this.rooms[i].position.x;
                var thisvoxelPZ = this.rooms[i].position.z;

                var thistotalPositionVoxelminZ = (thisvoxelPZ + thisvoxelmZ);
                var thistotalPositionVoxelminX = (thisvoxelPX + thisvoxelmX);
                var thistotalPositionVoxelMAXZ = (thisvoxelPZ + thisvoxelMZ);
                var thistotalPositionVoxelMAXX = (thisvoxelPX + thisvoxelMX);

                for(var insideZ = thistotalPositionVoxelminZ; insideZ < thistotalPositionVoxelMAXZ; insideZ++)
                {
                    for(var insideX = thistotalPositionVoxelminX; insideX < thistotalPositionVoxelMAXX; insideX++)
                    {
                        if(insideZ == length && insideX == width)
                        {
                            return false; 
                        }
                    }
                }
            }
        }
    }

    return true;
}

Result visualization:

https://i.sstatic.net/rWRLS.png

This method allows for precise detection of object interactions and potential collisions due to its point-by-point analysis.

If you encounter performance issues especially when dealing with multiple objects, I am open to suggestions on enhancing and optimizing the code for better efficiency. Feel free to share your insights!

Managing impact in THREE.js

Answer №1

Similar questions

What method can be employed to eliminate choice selection lacking any value?

Updating the data when session begins

Adding data to a multidimensional array in JavaScript

Is there a way to get rid of this awful hover effect on this button?

The ajax POST method fails to trigger in a Node.js environment

Error: Primefaces ajax status failure (dialog has not been defined)

Setting the initial viewer position in Panolens: A step-by-step guide

Ways to locate the final child in a sequence

Understanding Variable Scoping in Node.js

Using AngularJS to show content based on a callback function

Incorporate a button into your Django formset application

When the overflow-y property is set to hidden, the page unexpectedly scrolls to the top in Firefox

Ensuring Vue.js components are updated only after animation completion

Warning: Obsolete Warning: Unresolved promise rejections are no longer supported. - Exploring Javascript Promises with Selenium

Extract the ID from the array, save it, and then delete it from the local storage

Are Bootstrap Input groups inconsistent?

Is it possible to include 'file.php' along with the 'id' using php?

How can I use jQuery to target elements other than the vertical scrollbar when

Angular 6: Harnessing the Power of Subject

How can a groovy script help in extracting the Version Number using Parse()?