Discovering neighboring faces in PlaneBufferGeometry using ThreeJS

Question

Discovering neighboring faces in PlaneBufferGeometry using ThreeJS

Seeking a more efficient method to locate neighboring faces that share the same edge within my PlaneBufferGeometry. Currently, my THREE.Raycaster is able to intersect with my object effectively using intersectObject. However, I am in need of finding all adjoining faces.

My current approach involves a somewhat crude method of identifying nearby faces. While it serves its purpose in my specific scenario, it doesn't feel like the ideal solution:

let rc = new THREE.Raycaster();
let intersects = [];
for (let i = -1; i <= 1; i++) {
    for (let j = -1; j <= 1; j++) {
        let v = new THREE.Vector3(x + i, y, z + j);
        rc.set(v, new THREE.Vector3(0, -1, 0));
        rc.near = 0;
        rc.far = 2;
        let subIntersects = rc.intersectObject(mesh);
        for (let n = 0; n < subIntersects.length; n++) {
            intersects.push(subIntersects[n]);
        }
    }
}

Is there a quicker way, perhaps involving

mesh.geometry.attributes.position.array

, to identify these faces? Any suggestions or insights would be greatly appreciated. Thank you in advance!

javascript three.js

Answer 1

Answer №1

You noted that there are 50k items in the position array, which doesn't appear to be slow. In this specific case with a 10x10 example totaling 100 items in the array, it runs smoothly. However, when set to 200x200 with 40k items, it still performs fast enough.

'use strict';

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});

  // Remaining code is the same as original

As I mentioned earlier, if you can identify it as PlaneBufferGeometry, you can examine the three.js code to determine the exact face layout. With that knowledge, calculating neighbors based on a faceIndex becomes more efficient. The provided code is generic and suitable for BufferGeometry with an index.

In the code block below, it outlines how to compute neighboring face indices after identifying them using the grid order for PlaneBufferGeometry:

// Code snippet demonstrating neighbor calculations for PlaneBufferGeometry
//
//  b --c
//  |\\1|
//  |0\\|
//  a-- d

// Remaining code snippets follow the same logic as original

For complex geometries beyond PlaneBufferGeometry, you have the option to generate a pre-defined map of faceIndexs to neighbors. This approach provides an alternative solution if the initial method proves too sluggish.

Answer 2

You noted that there are 50k items in the position array, which doesn't appear to be slow. In this specific case with a 10x10 example totaling 100 items in the array, it runs smoothly. However, when set to 200x200 with 40k items, it still performs fast enough.

'use strict';

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});

  // Remaining code is the same as original

As I mentioned earlier, if you can identify it as PlaneBufferGeometry, you can examine the three.js code to determine the exact face layout. With that knowledge, calculating neighbors based on a faceIndex becomes more efficient. The provided code is generic and suitable for BufferGeometry with an index.

In the code block below, it outlines how to compute neighboring face indices after identifying them using the grid order for PlaneBufferGeometry:

// Code snippet demonstrating neighbor calculations for PlaneBufferGeometry
//
//  b --c
//  |\\1|
//  |0\\|
//  a-- d

// Remaining code snippets follow the same logic as original

For complex geometries beyond PlaneBufferGeometry, you have the option to generate a pre-defined map of faceIndexs to neighbors. This approach provides an alternative solution if the initial method proves too sluggish.

Discovering neighboring faces in PlaneBufferGeometry using ThreeJS

Answer №1

Similar questions

Tips on showcasing information from a deeply nested JSON structure with jQuery

Running javascript files in a node environment

Exploring Array Iteration with For-Each in JavaScript

How can I alter the border of a div when hovering over it?

Only incorporate the Angular service into the controller when it is necessary

How can you reset a variable counter while inside a forEach loop?

Change the names of all arrays within a complex nested structure containing multiple arrays

Determine whether an image is retina or non-retina using just one picture

Stop Caching with Jquery Infinite Scroll (IAS)

If an error occurs at the top level subscription, then RxJs won't employ switchMap

Using regular expressions to eliminate text located outside of the tags within a string

Immersive 360-degree video player with global coordinates

What causes the vertical scroll bar to shift on its own?

Picture in the form of a radio button

What is the best way to tally the elements of a nested object within a group of objects?

Refreshing a nested object by modifying its array elements in JavaScript

Exporting Makehuman.js Three.js using the THREE.OBJExporter can easily be accomplished

What is the best way to accurately slice a plane using 2D text shapes in three.js?

How to Build an Express.js Query by Using a URL Parameter?

JavaScript may not display height as anticipated