Direct your cursor to move across the sphere surface in THREE.JS

I'm working on a project to develop an interactive globe where users can drag points on the surface using their mouse cursor.

Here is the code snippet I've been working on

Currently, I've managed to set up the main sphere and a smaller red sphere as an example point. However, I'm struggling with ensuring that the small point stays on the surface of the main sphere when dragged.

For context, my code consists of two spheres: the primary one and a smaller red one. I've implemented orbit controls and a Raycaster to enable dragging functionality for the smaller sphere, but I need help limiting its movement to the surface of the larger sphere.

javascriptthree.js

Answer №1

To simplify the process, consider utilizing a Raycaster. Here's a general outline of how this method can be implemented:

  1. When the mouse is clicked, set up the raycaster to cast from the mouse's position.
  2. Determine if there is an intersection with the dot/dots.
  3. If an intersection with a dot is detected, switch your application to a "dragging" mode.
  4. During mousemove events, continuously update the raycaster with the latest mouse position and cast against the globe.
  5. Adjust the position of the dot to match the point of intersection between the ray and the globe.
  6. Upon mouseup, deactivate the "dragging" mode.

Keep in mind that as the ray approaches the globe's edges, the movement may appear jittery or overly responsive due to the ray becoming tangent to the curve of the globe. This aspect may require fine-tuning.

Performing raycasting with every mouse movement can be resource-intensive. Consider updating the dot position only every N (small number) mousemove events to ensure a smoother interaction experience.

It's important to be mindful of memory usage as well. Reuse your Raycaster and any temporary vector objects to prevent excessive memory consumption.

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

Sending information from the parent component to the child Bootstrap Modal in Angular 6

As a newcomer to Angular 6, I am facing challenges with passing data between components. I am trying to launch a child component bootstrap modal from the parent modal and need to pass a string parameter to the child modal component. Additionally, I want t ...

javascriptangularjstypescriptangular6

Problem encountered while revalidating Next.js and Sanity documents through a webhook

I'm currently developing a Next.js 13 project that utilizes Sanity as its CMS and is deployed on Vercel. To ensure that components and pages are revalidated whenever a new testimonial is added, updated, or removed in Sanity, I have configured a webhoo ...

javascriptnext.jswebhookssanity

Filtering a list in AngularJS based on user input

Having an issue with this code. It's not working, but it works in another project. The code involves filtering a table using an input field. <md-content class="md-padding"> <br> <md-input-container> <label>sear ...

javascripthtmlangularjs

What is the process for accessing jQuery methods in Node.js?

When working on the client side, using Object.keys($.fn) (or Object.keys(jQuery.fn)) is a simple way to retrieve jQuery functions as an array. But how can I achieve the same result of getting this array with the jquery package from npm? I attempted: re ...

javascriptjquerynode.js

Uncertain about the distinction between reducers and dispatchers when it comes to handling actions

I'm feeling a bit confused regarding reducers and dispatchers. While both receive actions as parameters, it doesn't necessarily mean that the actions I use in my dispatchers are the same as those used in my reducers, correct? For example, if I h ...

javascripttypescriptdesign-patternsredux

How can I make an HTML button function with a JavaScript script?

When I click a button in an HTML file, it should trigger a function in a JavaScript file to display an alert that says "hey." However, this simple task is not working for me and I am unsure why. Java Script is enabled in my browser (Google Chrome) and I am ...

javascripthtml

TypeScript will show an error message if it attempts to return a value and instead throws an

Here is the function in question: public getObject(obj:IObjectsCommonJSON): ObjectsCommon { const id = obj.id; this.objectCollector.forEach( object => { if(object.getID() === id){ return object; } }); throw new Erro ...

javascriptfunctiontypescripttypescript-typings

Pair of dimensions painting with d3 version 4

I am having trouble converting my code from d3 v3 to d3 v4 Below is the original code snippet: var brush = d3.svg.brush() .x(x) .y(y) .on("brushstart", brushstart) .on("brush", brushmove) .on("brushend", brushend); However ...

javascriptnode.jsd3.jsnpm

Galaxy S5 browsers experiencing issues with website responsiveness

I've been using jquery to dynamically remove a div in order to change the appearance of my home screen on smaller devices. It's been successful on my Macbook Air and Iphone X, but unfortunately, it doesn't seem to work properly on Android de ...

javascriptjqueryresponsive-design

"Interactive Connect 4 Game in Javascript - Drop the disk into the bottom row of the chosen

Check out this awesome Connect4 game I found: http://codepen.io/anon/pen/lmFJf I have a specific goal in mind for the game. When I click on an empty space in any column, I want it to automatically drop into the lowest available spot in that column, follow ...

javascripthtmlcss

Leveraging Gatsbyjs to Integrate GraphQL Data with Material UI Library

Just starting out as a Frontend Developer and currently learning Gatsbyjs along with the Material UI library. I'm working on creating a new page using the Material UI Gatsby Starter code available here. However, I've encountered an issue when tr ...

javascriptreactjsmaterial-uigatsby

The controller in Angular uses the $scope symbol _

App.controller('todoController', function ($scope) { // create a message to display in our view $scope.todos = [{ name: 'angular', done: false }]; $scope.clearTodo = function () { $scope.todos = _.filter($scope.tod ...

javascriptangularjs

Are the import and export keywords native to webpack or are they specific to JavaScript syntax?

I am pondering whether the import & export aspects are part of the language itself or simply keywords that webpack adds to the language. Thank you. ...

javascriptwebpackimportexport

Instructions on creating an individual DropdownIndicator component with React-select for the purpose of reusability in different sections of the project

The code below functions properly when the DropdownIndicator component is kept in the same file. However, I am interested in separating DropdownIndicator into its own file so that it can be reused. This way, it can be used as a separate component and incl ...

javascriptreactjsuser-interfacefrontend

What is preventing the factory from gaining access to the controller?

I have set up a notification factory and passed it inside the controller. However, when I try to assign the factory to the scope within the controller, I am encountering an error. alertsManager MyApp.factory('alertsManager', function() { ...

javascriptangularjsangularjs-directiveangularjs-scopeangular-ui-router

Incorporate a unique attribute into a select tag using Javascript

My goal is to dynamically generate a select element using JavaScript and include a custom attribute called data-placeholder. Is there a way to add non-standard attributes using JavaScript without triggering a browser error like: Uncaught referenceError: ...

javascript

Obtain the distinct highest value for every vertical axis on a bar graph

I'm facing an issue with my code where I am appending multiple SVG elements and generating 3 different charts. The problem is that the maximum value evaluated from the y.domain() for each y-axis is taken as the maximum value from all of my data. Is t ...

javascriptd3.js

Display tables based on selected changes with dynamically changing options

My HTML structure displays rows with active and inactive statuses based on a select change, and it's currently functioning correctly. However, the project requirements have changed, allowing for more status options besides just active and inactive. I ...

javascripthtmlangularjs

Node.js is raising an error because it cannot locate the specified module, even though the path

Currently in the process of developing my own npm package, I decided to create a separate project for testing purposes. This package is being built in typescript and consists of a main file along with several additional module files. In the main file, I ha ...

javascriptnode.jstypescriptnpmnode-modules

Generating a single JSON record in React Native

Need help displaying a single JSON record from an API request on the screen. const [user, setUser] = useState(); const getUserData = async () => { // {headers: {Authorization: "Basic " + base64.encode(username + ":" + passwor ...

javascriptjsonreact-nativeapi