What is the best way to locate the closest points using their positions?

Question

What is the best way to locate the closest points using their positions?

I have a cluster of orbs arranged in the following pattern:

https://i.sstatic.net/9FhsQ.png

Each orb is evenly spaced from one another. The code I am using for this setup is:

geometry = new THREE.SphereGeometry(1.2);
material = new THREE.MeshPhongMaterial({
    color: 0xe0e0e0
})

for (var zPos = -120, i = 0; zPos <= 120; zPos += 7, i++) {

    arr[i] = [];

    for (var xPos = -120, j = 0; xPos <= 120; xPos += 7, j++) {

        arr[i][j] = "(" + i + "," + j + ")";

        sphere = new THREE.Mesh(geometry, material);
        sphere.position.set(xPos, 0, zPos);
        sphere.name = i + "-" + j;
        count++;
        sphere.receiveShadow = true;
        sphereMesh.add(sphere);
    }
    rows++;
}

scene.add(sphereMesh);

In this case, sphereMesh acts as a Group.

The issue I am facing is that when I provide a specific position as input, I want to select the orbs nearby within a certain radius and change their color. How can I identify the orbs close to the given position?

javascript math three.js

Answer 1

Answer №1

To determine the proximity of a givenPoint to a sphere, simply measure the distance between them and compare it to a set limit. Here is an example, where givenPoint is a THREE.Vector3 and sphere is a THREE.Mesh:

var limit = 2;
var distance = Math.sqrt(Math.pow(sphere.position.x - givenPoint.x, 2) + Math.pow(sphere.position.y - givenPoint.y));
if (distance > limit)
{
   // sphere is outside the limit
} 
else
{
   // sphere is within the limit
}

You can then further analyze the distance to determine how close the sphere is to the givenPoint. To do this, you can normalize the distance to get a scale:

var normalized = 1 - distance / limit

Answer 2

To determine the proximity of a givenPoint to a sphere, simply measure the distance between them and compare it to a set limit. Here is an example, where givenPoint is a THREE.Vector3 and sphere is a THREE.Mesh:

var limit = 2;
var distance = Math.sqrt(Math.pow(sphere.position.x - givenPoint.x, 2) + Math.pow(sphere.position.y - givenPoint.y));
if (distance > limit)
{
   // sphere is outside the limit
} 
else
{
   // sphere is within the limit
}

You can then further analyze the distance to determine how close the sphere is to the givenPoint. To do this, you can normalize the distance to get a scale:

var normalized = 1 - distance / limit

What is the best way to locate the closest points using their positions?

Answer №1

Similar questions

Customizing the Zoom Control Style in Vue Leaflet

Exploring ElectronJs: The journey to sending messages from ipcMain to IpcRender and awaiting a response

Comparing Three.js BinaryLoader and BufferGeometry for handling heavy meshes: what's the best approach?

What is the process for redirecting to an external URL while including post parameters?

Experiencing the issue of receiving `undefined` when trying to access res.query with a JSON query string using

Error encountered with MobileFirst version 8 and Angular JS v1.5.3 integration using Bootstrap

Is it possible to conceal the dates from past months in the datepicker plugin?

Can these two arrays be merged together in JavaScript?

What is the best way to send the link's ID to an AngularJS controller?

The functionality of the onclick button input is not functioning properly in the Google

Can Javascript be used to open a new window, send POST parameters to it, and pass the request as application/json?

Experience the classic game of rock-paper-scissors brought to life through JavaScript and HTML,

Loading WordPress posts using Ajax

Storing an image in MongoDB using Multer as a file from Angular is not working as anticipated

Tips for writing an async function using TypeScript

Can Angular Universal SSR be activated specifically for Googlebot User Agents?

Retrieving time zone using offset with javascript

Combining objects in JavaScript

Generate a string that will be utilized to interpret a JSON response

What are some solutions to troubleshoot the baseurl bug in Axios for a Node.js application?