How to Exclude Box Geometry from Merged Geometry in THREE JS

I have over 100,000 boxes that I've added to a merged geometry. Occasionally, I need to remove some geometries from this merged structure. Is it possible for me to iterate through the position attributes in increments of either 108 or 72 vertices per cube to extract the positions of these boxes? Or does the merging process also consolidate vertices?

function modifyCubeBlocks(grid, blockModel) {

        function findElevation(givenN, givenE, grid) {
            var y_grid = Math.floor((grid.metaData.yMax - givenN) / grid.metaData.yStep) + 1;
            var x_grid = Math.floor((givenE - grid.metaData.xMin) / grid.metaData.xStep);

            var array_pos = Math.round(y_grid * (grid.metaData.nCol + 1) + x_grid);
            return isNaN(grid.elevations[array_pos]) ? Infinity : grid.elevations[array_pos];
        }

        var tempBox = new THREE.BoxBufferGeometry(blockModel.x_step, blockModel.y_step, 2);

        var myBlock = scene.getObjectByName('blockModel');

        var pointsPerVertex = 3,
            verticesPerFace = 4,
            facesPerSide = 1,
            sidesPerBox = 6;

        var pointsPerCube = pointsPerVertex * verticesPerFace * facesPerSide * sidesPerBox;
        
        for (var i = 0, j = myBlock.geometry.attributes.position.array.length; i < j; i += pointsPerCube) {
            var above = false,
                below = false;

            for (var k = i; k < i + pointsPerCube; k += pointsPerVertex) {
                var givenN = myBlock.geometry.attributes.position.array[k + 1];
                var givenE = myBlock.geometry.attributes.position.array[k + 0];
                var zCoord = myBlock.geometry.attributes.position.array[k + 2];
                if (zCoord > findElevation(givenN + WEBGLyTranslate, givenE + WEBGLxTranslate, grid))
                    above = true;
                else
                    below = true;
                if (above && below) break; 
            }

            if (above) {
                if (below) {
                    var newBoxGeometry = tempBox.clone();
                    newBoxGeometry.attributes.position.array = myBlock.geometry.attributes.position.array.slice(i, i + pointsPerCube);
                    
                    for (var materialGroupIndex = 0, z = myBlock.geometry.groups.length; materialGroupIndex < z; materialGroupIndex++) {
                        var myGeometryGroup = myBlock.geometry.groups[materialGroupIndex];
                        
                        if (i >= myGeometryGroup.start && i < myGeometryGroup.start + myGeometryGroup.count) {
                            var newMaterial = myBlock.material.materials[myGeometryGroup.materialIndex].clone();
                            var mesh = new THREE.Mesh(newBoxGeometry, newMaterial)
                            scene.add(mesh);
                            break;
                        }
                    }
                }
                
                for (var k = i; k < i + pointsPerCube; k++) {
                    myBlock.geometry.attributes.position.array[k] = undefined;
                }
            }
        }

        myBlock.geometry.attributes.position.needsUpdate = true;

    }

I'm seeing inconsistent results. How exactly does the merging operation handle the positioning array — does it combine vertices or simply add them sequentially?

Answer №1

In the feedback I provided, it was noted that there was a discrepancy in the number of vertices between the tmpBox and the individual vertices per box in the merged blockModel. This difference in vertex count occurred because the original merge process involved boxGeometry being merged and then converted to buffer geometry, resulting in changes in the vertices. The conversion of the merged mesh was carried out in this manner.

The issue was addressed by creating the tmpBox using the following approach:
var tmpBox = new THREE.BufferGeometry().fromGeometry(new THREE.BoxGeometry(blockModel.x_step, blockModel.y_step, 2));

It may seem unusual that

new THREE.BufferGeometry().fromGeometry(new THREE.BoxGeometry(blockModel.x_step, blockModel.y_step, 2)) != new THREE.BoxBufferGeometry(blockModel.x_step, blockModel.y_step, 2);

However, they differ in the number of vertices. It is likely that one utilizes a 4-vertex face while the other uses three-vertex faces.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing React and Material-UI to Enhance Badge Functionality

I am exploring ways to display a badge icon when a component has attached notes. I have experimented with three different methods and interestingly, the results are consistent across all of them. Which approach do you think is the most efficient for achiev ...

Occasionally, the script tags in Next.js fail to load

https://i.stack.imgur.com/tSrIu.png An error message appears when the script tag fails to load. I have a total of 6 script tags in my code. These scripts are present in my code, but they do not consistently load. However, I can see them when ins ...

Combining and serializing a JavaScript object

Combining nested JavaScript objects was straightforward when dealing with a single object. However, as the number of objects has increased, I require a more dynamic approach to merge the address key and serialize my object. var old = {account: "100000 ...

Inquiring about monitoring a date object in AngularJS?

Is it possible to monitor a date in angularJS? I have an ng-model that has a date and I would like to monitor it so that I receive a notification when it changes month, year, or day. scope.$watch('ngModel',function(newVal){ console.log(newVa ...

When Protractor is utilized and a button is clicked triggering an http request, an error is encountered while awaiting synchronization with Protractor

describe("Expectation: Display a list of cars for adding", function() { var car_add_button = element(by.id('add_car')); car_add_btn.click() // Encounter an issue, unable to proceed // more validations to be included... }); When executing t ...

Guide to enabling cross-domain uploads of files

After following a tutorial, I successfully implemented an HTML5 uploader on my website. The source of the tutorial can be found here: The uploader works perfectly; however, I am now facing an issue where I want to upload files to a different domain. Accor ...

What causes the other array to be affected when one is changed?

Take a look at this snippet of JavaScript code: var x = [1, 2, 3], y = x; y[1] = 3; x; // x === [1, 3, 3] Why does this happen? Why is the value of "x" changing when I update "y[1]"? I tried it in both Firefox and Chrome and got the same result. Th ...

Retrieve the chosen date from a DatePicker using a Javascript function

Is there a way to retrieve the user-selected date using a JS function? I attempted this method: var test = $("#datepicker").datepicker( 'getDate' ); However, when I display it with an alert, it shows [object object] instead of the date. This ...

Create an interactive mechanism where one scrollbar dynamically adjusts another scrollbar and vice versa

Using the provided js-bin, how can I synchronize scrolling between the "left" div and the "right" div when using the mouse wheel? Currently, if you uncomment the code block, the scrolling behavior changes from scrolling by 100px per scroll to scrolling pi ...

Angular: A guide to binding to the required/ngRequired attribute

There is a directive that may or may not be required, and it can be used in two different ways. <my-foo required></my-foo> or <my-foo ng-required="data.value > 10"></my-foo> Even though require and ngRequire are essentially t ...

Vue Mutation IndexOf returns a value of -1

Hey everyone! I'm facing a challenge with deleting a "product." Although the product is successfully removed from the database, I'm encountering an issue with removing it from the VuexStore array of products. Here's what I've tried so f ...

What is the process for submitting a form on consecutive URLs?

I have a form that requires input for settings and includes two buttons: one to save the form and another to both save and execute the settings. <form method="post" action="/settings/{{id}}/save"> <!-- input fields --> ...

Repairing a syntax error in a jQuery selector variable

$(".className").click(function(){ var link = $(this).find("a").attr('href'); //output is '#myID' var findItems = $(link '.mydiv').length; //WRONG var findItems = $(link + '.mydiv').length; ...

Creating a clone of JSON for use as a template

I am working with a json template that I fill with product data. Here is an example of the json structure: // product template $scope.productAttributes = { "Code": null, 'Attributes': {} }; When a user inputs produ ...

The table refuses to load

I've been troubleshooting this issue for the past two days. The array is visible in the console, but it refuses to show up on the table. I've tried multiple approaches, but none seem to work. I suspect that "tobodyHtml" is not defined properly, a ...

Generating Three.js geometries within a separate WebWorker

I'm looking for ways to shift the heavy lifting of Threejs computations to a Web Worker. It seems feasible when it comes to having the worker generate geometries. However, I still have a substantial number of meshes to create which puts a strain on th ...

When dragging a new connection in jsPlumb, the existing one should be automatically removed

After using jsPlumb, I was able to create a setup with the following features: Multiple nodes functioning like nodes in a unique flowchart design. Each node has a single target where connections can be dropped. Every node has zero, one, or more exits. Ea ...

AR.js aframe object can be displayed without the need to point a marker

For my augmented reality project, I have utilized arjs with aframe to display my gltf object when pointing the phone camera at my hiro pattern: <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script> <!-- include ar. ...

Tips for ensuring a webpage loads at a specific resolution

I recently created a website on my computer with a screen resolution of 1920x1020. However, when I view it on other machines with a 1366x768 resolution, the website appears distorted. Is there a way to set a fixed resolution for my website to ensure it l ...

What is preventing me from retrieving my JavaScript array by index outside of the d3 then function?

My main objective is to construct a d3 stacked diverging bar chart. The issue I'm facing is that even though the votesData array is successfully created from the data, I can only access this data within the d3 then function where it's generated. ...