Find out whether a point lies inside a specific part of the surface of a sphere

As I delve into working with webGL using Three.js, I have encountered the need to determine if a click on a sphere falls within a specific section of its surface.

Currently, I am able to detect when the sphere is clicked and retrieve the coordinates of the clicked point. What I now require is the ability to identify if that click occurred in a particular region of the sphere, based on an array of 3D points from the sphere (or any other suggested approach).

The sphere is positioned at the center point, and the clicked point is guaranteed to lie on the surface of the sphere. My challenge lies in calculating whether it falls within a specified section. Any recommendations for this mathematical task would be greatly appreciated. Ideally, I am looking for a generic solution as the sections may vary from simple triangles to more complex shapes.

Answer №1

Initially, I thought about mapping your 3D points to the screen coordinates by converting them from world coordinates to view coordinates, similar to drawing a shape on the screen. This method helps determine the visual region corresponding to the surface of interest, allowing for a straightforward 3D-to-2D projection with your view to check if the click location falls within the 2D polygon.

However, upon further consideration, I realized a drawback to this approach - it may not be effective if the region of interest extends onto the back-surface of the sphere.

In such cases, constructing the projection of your mouse click along the camera direction could be necessary. If an isometric camera is being used, achieving this should be feasible...

Answer №2

Start by drawing a great-circle ray from the given point. Locate the closest intersection with any segment of the curve. If the segment cuts across the ray moving from right to left, then the point lies inside the curve.

Answer №3

An effective method is to create a pseudocolor representation of your areas by assigning each area a unique color and mapping it onto a texture. You can then access the image, utilizing the pseudocolor as an array index. To ensure practicality, it is recommended to distribute values evenly throughout the encoding.

Answer №4

Instead of following the suggested method, I have opted for a different approach.

My current method involves using matrix determinants to determine if a point X lies inside a triangle formed by points T1, T2, and T3. By calculating three determinants as follows:

d1 = det([T1 T2 X])
d2 = det([T1 X T3])
d3 = det([T1 T2 X])

If all determinants have the same sign, then the point is considered to be inside the triangle. Subsequently, I create a list of triangles based on the selection area and check if the point falls within any of those triangles.

this.Detector.triangleDetector = function(position, triangleArray){
    for(var idxString in triangleArray){
        var index = parseInt(idxString);
        if(this.pointInTriangle(position, triangleArray[index].coords1, triangleArray[index].coords2, triangleArray[index].coords3))
            return true;
    }
    return false;
}

The function pointInTriangle(x,t1,t2,t3) handles the determinant verification process.

this.Detector.pointInTriangle = function(x,T1,T2,T3){
    var array1 = [coord1.x ,coord1.y ,coord1.z];
    var array2 = [coord2.x ,coord2.y ,coord2.z];
    var array3 = [coord3.x ,coord3.y ,coord3.z];
    var zero = 0;
    var A = [[zero,zero,zero],[zero,zero,zero],[zero,zero,zero]];
    var d1,d2,d3;
    A[0][0] = position.x;
    A[0][1] = position.y;
    A[0][2] = position.z;
    A[1][0] = array2[0];
    A[1][1] = array2[1];
    A[1][2] = array2[2];
    A[2][0] = array3[0];
    A[2][1] = array3[1];
    A[2][2] = array3[2];
    d1 = MyMath.determinant(A,3);

    A[0][0] = array1[0];
    A[0][1] = array1[1];
    A[0][2] = array1[2];
    A[1][0] = position.x;
    A[1][1] = position.y;
    A[1][2] = position.z;
    d2 = MyMath.determinant(A,3);

    A[1][0] = array2[0];
    A[1][1] = array2[1];
    A[1][2] = array2[2];
    A[2][0] = position.x;
    A[2][1] = position.y;
    A[2][2] = position.z;
    d3 = MyMath.determinant(A,3);

    if((d1>=0 && d2 >=0 && d3>=0) || (d1<=0 && d2 <=0 && d3<=0)){
        return true;
    }
    return false;
};

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

The operator in Javascript that uses question marks for conditionals is known as the

I understand that the expression: return A ? B : C translates to If A is true, return B; otherwise, return C But how should I interpret the following: return A ? B ? C : D : E This code is not mine; I simply want to comprehend it. I came across this a ...

JavaScript is failing to add items to an array

Attempting to add coordinates and user-specified data from a form to an array named "seatsArray". Here's the code snippet: <div> <img onLoad="shiftzoom.add(this,{showcoords:true,relativecoords:true,zoom:100});" id="image" src="plan1.bmp" wid ...

Updating the load context variable in Django template after making changes via an AJAX call: a step-by-step guide

Here is the code snippet for displaying table items in my customer_items.html page: <table id="tblData" style="width: 100% !important;" class="display table table-bordered table-striped table-condensed"> <thead> <tr> ...

When attempting to send coordinates to the Polyline component in React Native, an error is encountered stating that NSNumber cannot be converted to

Trying to pass coordinates from BackgroundGeolocation.getLocations() is causing an issue. Upon passing the coordinates, I encounter the following error message: JSON value '-122.02235491' of type NSNumber cannot be converted to NSDictionary I ha ...

When arrays are recalled, access to functions is lost for Javascript object instances

Check out this code snippet I have: var cobj = { a: 0, b: 0, c: 0, asdinit: function(x, y, w, h) { this.a = x; this.b = y; this.c = w; this.h = h; }, adsfads: function(a, b, c, d) { this.a = a; this.b = b; this.c ...

React application encountering issues with the use of Redux actions within a custom module

I have been facing a problem with my util module. It seems that when I try to use a Redux action, it does not function as expected. import {openloading} from '../actions/loading' export default function (e) { openloading(e.font); } Interest ...

Routing static pages in Angular 2

I successfully created a static page using Angular 2. When I run ng serve and visit my page, it functions as intended. Specifically, I can navigate to a specific page by typing in the URL, such as www.mysite.com/resume. However, after uploading it to my si ...

Utilizing on() in conjunction with a map function

Currently, I am in the process of refactoring my code and have decided to revisit how I handle on events by utilizing mapping. Below is a snippet of what I currently have: $('img#sorc').on({ mousemove: function (e) { alert('tes ...

Persist the scroll position within a div even after refreshing a PHP file using AJAX

I have a specific div set up with its own scroll bar, which is being refreshed using AJAX (with a PHP file). Whenever I scroll within this div and trigger a reload, the inner scrollbar resets back to the top. My goal is to retain the position of the scroll ...

Is it recommended for the main, module, and browser properties in package.json to reference the minified version or the source

When developing a JavaScript library, it is important to consider the structure in which it will be published. This typically includes various bundles such as CJS, ESM, and UMD, each with their own source, minified, and map files. my-package\ dist& ...

What is the best way to display all divs once more after all filter-checkboxes have been unchecked?

I created a custom filter that displays board games based on the number of players and playing time selected through checkboxes. Initially, the filter works as intended when first loaded and used. However, I encountered an issue where if all checkboxes are ...

Using Jest: A guide to utilizing a mocked class instance

When working on my frontend React application, I decided to use the auth0-js library for authentication purposes. This library provides the WebAuth class which I utilize in my code by creating an instance like so: import { WebAuth } from 'auth0-js&ap ...

How can we replicate user input in React for unit testing purposes?

Struggling to unit test a React component that accepts user input, specifically the onChange function within the component. Unable to set the input value despite trying various methods found online. Below is the component under test: class Input extends C ...

What are the steps to configure ESlint and Prettier with the Airbnb style guide for a React Native/JavaScript project (Expo) in VS Code?

I have looked through numerous tutorials on this topic, but I haven't been able to get it to work. In the tutorials, when you run npm install eslint, it usually prompts you in the command line about using a popular style guide. However, this no longer ...

Issue with disabling checkboxes in jsTree

Currently utilizing the latest version of jsTree in one of my applications. I would like to have specific checkboxes disabled by default. To achieve this, I am referencing this resource. The jstree code I am using is as follows: $("#"+"div_"+aspectid).js ...

What is the optimal parameter order when utilizing pre-curried functions and composition in JavaScript?

We have a simple, mathematically curried function for subtracting numbers: function sub(x) { return function (y) { return x - y; }; }; sub(3)(2); // 1 The function signature matches the obtained result. However, when function composition comes i ...

Ensure a field is required if the integer field is not empty in Angular Schema Form

I am currently working on setting up a form using Angular JSON Schema Form. My goal is to make one field (dropdown1) required only when another field (number1) has been filled in. I have managed to successfully get the following form + schema to function p ...

Dynamic JSX tag including attributes

In my project, I have a set of components stored in a folder named systemStatus. These components are accessible through an index.js file as follows: export UserCount from './UserCount' Additionally, I have a JSX component called Status which i ...

Troubleshoot: Unable to utilize mapActions with Vuex modules

Having trouble using mapActions to reference actions in my modules. The Vuex docs say that module actions are not namespaced by default, so they should be accessible like main store actions. Here's how I have things set up: Store import * as ModuleA ...

Create a solid polygon shape by utilizing a spline curve

How can I create a filled polygon using SplineCurve in Three.js? I attempted to provide a list of points to create a Three.Shape, but encountered an issue with the triangulation resulting in an error message "Unable to triangulate polygon." I understand t ...