"Exploring three.js: How to locate the closest point on a Mesh to the position of

Question

"Exploring three.js: How to locate the closest point on a Mesh to the position of

In this scenario, picture a three.js scene configured with an OrthographicCamera and OrbitControls:

https://i.sstatic.net/rhJnr.png

When the user moves the yellow disc (representing the Sun), it should follow along its corresponding yellow circle. To better visualize this, here's another perspective of the scene showing the complete yellow circle:

https://i.sstatic.net/sRQ3g.png

My challenge lies in figuring out how to identify the point on the circle closest to the current cursor position using an event handler. Just for reference, the yellow circle is a THREE.Mesh object.

I've been trying to use THREE.Raycaster and its intersectObjects() function to detect mouseover events, but I'm unsure about how to determine the nearest point on a single object with this Raycaster. Perhaps there's some straightforward calculations involved after transforming the mouse coordinates into world coordinates. Can anyone offer guidance on this? Is Three.js's Raycaster suitable for this task? If not, what approach should I take to find the nearest point on this mesh?

If you want to view the entire source code, visit: https://github.com/ccnmtl/astro-interactives/blob/master/sun-motion-simulator/src/HorizonView.jsx. Look for this.sunDeclination, which represents the Mesh object of the yellow circle.

To see a demo in action, click here:

If you want to understand how the sun should move, check out this link: (Flash required)

javascript three.js mouseevent raycasting

Answer 1

Answer №1

A straightforward approach:

select a point located on the disk
create a projection within the circle's plane
determine the appropriate factor to scale the vector by, based on the circle's radius

var chosenPoint = res.point.clone();
chosenPoint.z = 0; // Ensure it lies on the circle's plane
var scaleFactor = circleRadius / chosenPoint.length();
chosenPoint.multiplyScalar(circleRadius / chosenPoint.length())

[ https://jsfiddle.net/c4m3o7ht/ ]

Answer 2

A straightforward approach:

select a point located on the disk
create a projection within the circle's plane
determine the appropriate factor to scale the vector by, based on the circle's radius

var chosenPoint = res.point.clone();
chosenPoint.z = 0; // Ensure it lies on the circle's plane
var scaleFactor = circleRadius / chosenPoint.length();
chosenPoint.multiplyScalar(circleRadius / chosenPoint.length())

[ https://jsfiddle.net/c4m3o7ht/ ]

Answer 3

Answer №2

The raycaster provides information on all objects intercepted by the ray, including their hit points in worldspace (which can be converted to or from model space using object3d.worldToLocal and localToWorld).

It also supplies the distances of the hits, allowing for sorting based on various criteria.

My typical approach involves casting on mouseDown to document the object and point, then on mouseMove retrieving the hit point of the same objects to execute editing operations based on the difference between the two points.

Does this align with your inquiry?

Answer 4

The raycaster provides information on all objects intercepted by the ray, including their hit points in worldspace (which can be converted to or from model space using object3d.worldToLocal and localToWorld).

It also supplies the distances of the hits, allowing for sorting based on various criteria.

My typical approach involves casting on mouseDown to document the object and point, then on mouseMove retrieving the hit point of the same objects to execute editing operations based on the difference between the two points.

Does this align with your inquiry?

"Exploring three.js: How to locate the closest point on a Mesh to the position of

Answer №1

Answer №2

Similar questions

Unable to bind to property as it is not recognized as a valid attribute of the selector component

Verify your identity using Google reCaptcha during Passport authentication

Element sticking and bouncing

Steps to update the package version in package.json file

What is the best way to implement date range filtering in vue js?

How can I align the isometric camera in THREE.js to the center of a cube?

extracting a JSON array from an API

Exploring the power of JSON and JavaScript: A guide to efficiently reading lists through JSON manipulation

Adjusting the line width and incorporating arrow points into AxesHelper in Three.js

Struggling to get the ReactJS.NET MVC tutorial to function properly?

Exploring options in THREE.js beyond MeshFaceMaterial

Identify and troubleshoot scripts that are included in the response returned by Chrome

Is there a way to display these panels in a scrollable table layout?

Load the scripts only if they have not already been loaded, and proceed to utilize them

JavaScript: Creating a Function that Returns an Object with an Undefined `this.variable`

Angular template driven forms fail to bind to model data

Using JavaScript to eliminate brackets

Configuring a timeout for your Next.JS API can help optimize the performance

The body-parser module in express 4.0 is currently not accessible for the route handler

Transitioning from jQuery to Prototype