A guide to determining the position of 3D objects in threejs and arranging them within a scene to ensure they do not intersect

Question

A guide to determining the position of 3D objects in threejs and arranging them within a scene to ensure they do not intersect

Currently, I am developing a cargo planning application that involves loading cargo into containers. To achieve this, I am utilizing three.js to create a 3D model. Despite being new to three.js, I have successfully created 3D objects (cargo) and placed them inside a container (another 3D object). However, I am encountering a challenge where the 3D objects overlap when multiple items are added to the container.

In my attempts to address this issue, I have only resorted to basic mathematical calculations to determine the correct positioning of objects within the scene.

For reference, here is the JSFiddle link:

https://jsfiddle.net/nro48e6u/1/

The logic responsible for calculating the object positions resides in the 'addCargo' function, which primarily relies on fundamental math concepts. The code snippet for this function is as follows:

function addCargo(dimension, color, isPallete) {
    // Code implementation for adding cargo objects
}

Despite implementing these calculations, I'm still facing challenges with objects overlapping within the container. The current solution does not effectively prevent this issue, and I remain uncertain about how to resolve it.

javascript three.js 3d

Answer 1

Answer №1

If you're looking to create a relaxing method, consider adjusting each box slightly in an infinite loop until all boxes are content.

dx = 0.1;
while(overlap_at_all(boxes)) {
    foreach(var box in boxes) {
        var overlapping_boxes = get_overlapping_boxes(box, boxes);
        foreach(var overlapping_box : overlapping_boxes)
            push_away_boxes(box, overlapping_box, dx);
    }
}

The "get_overlapping_boxes" function handles collision detection and returns colliding boxes with the current one efficiently using BVH or another data structure like an OctTree for good results. The same goes for "overlap_at_all."

In "push_away_boxes," both boxes move opposite directions by dx (e.g., 0.1), gradually making them non-overlapping. Increasing dx speeds up convergence but sacrifices precision. Introducing a container box as a constraint could affect convergence speed, so limiting iterations can prevent endless cycling without guaranteeing a solution.

This method does not ensure finding the optimal arrangement with minimal space wastage.

Answer 2

If you're looking to create a relaxing method, consider adjusting each box slightly in an infinite loop until all boxes are content.

dx = 0.1;
while(overlap_at_all(boxes)) {
    foreach(var box in boxes) {
        var overlapping_boxes = get_overlapping_boxes(box, boxes);
        foreach(var overlapping_box : overlapping_boxes)
            push_away_boxes(box, overlapping_box, dx);
    }
}

The "get_overlapping_boxes" function handles collision detection and returns colliding boxes with the current one efficiently using BVH or another data structure like an OctTree for good results. The same goes for "overlap_at_all."

In "push_away_boxes," both boxes move opposite directions by dx (e.g., 0.1), gradually making them non-overlapping. Increasing dx speeds up convergence but sacrifices precision. Introducing a container box as a constraint could affect convergence speed, so limiting iterations can prevent endless cycling without guaranteeing a solution.

This method does not ensure finding the optimal arrangement with minimal space wastage.

A guide to determining the position of 3D objects in threejs and arranging them within a scene to ensure they do not intersect

Answer №1

Similar questions

The background image's fadeInOut transitions create a strange phenomenon where all the text appears in white

What is the best way to attach an event listener to every child node within a div that is stored in an array of divs?

Is it possible to apply draggable functionality in the same way you attach events to an arbitrary node and a selector?

The lower section of the scrollbar is not visible

"Mastering the Art of Patience: Guarding Your Way Through

The default data value in the Vue component is taking precedence over the value I specified in beforeRouteUpdate

What is the method for setting a default image to be preloaded in filepond?

Updating ng-model value in AngularJS controller does does not reflect changes in selection

Exploring Frontend Package Dependencies in Different Versions

Pause the event listener temporarily and reattach it after specific actions have been completed

Centering the scrollIntoView feature on mobile devices is presenting challenges with NextJS applications

Having trouble with the JavaScript code for a basic GPA calculator?

Incorporating a MUI5 theme into a custom emotion-themed application

Missing HTML elements when refreshing AngularJS page

Error message: Unable to locate module using import instead of require

The process of incorporating content from a different page into a Bootstrap 5 Modal can be achieved by using Laravel 10

Finding the absolute root path of a npm package in Node.js

Retrieve the direction of panning when the panning stops with hammer.js and limit the possible

Is it necessary to use JS/JQ to trigger PHP form data?

What is the best way to retrieve data from within a for loop in javascript?