Navigating point on sphere with celestial coordinates in three js

Currently, I am attempting to animate a point moving randomly across the surface of a sphere. My approach involves generating random spherical coordinates and then converting them into 3D locations using the function .setFromSphericalCoords().

This is the snippet of code that produces a new random spherical coordinate on each frame:


element.kralenSpherical.phi += Math.random() * 2 -1;
if(element.kralenSpherical.phi <= 0 ) element.kralenSpherical.phi = 0;
else if(element.kralenSpherical.phi >= 180 ) element.kralenSpherical.phi = 180;
element.kralenSpherical.theta += Math.random() * 2 -1;
if(element.kralenSpherical.theta >= 360 ) element.kralenSpherical.theta = 0;
else if(element.kralenSpherical.theta <= 0) element.kralenSpherical.theta = 360;

element.kraal.position.copy(element.BaseLocation.clone().add(sphericalVector.setFromSphericalCoords(element.kralenSpherical.radius, element.kralenSpherical.phi, element.kralenSpherical.theta)));

Although this approach somewhat works, my point seems to be making large jumps rather than smoothly moving across the sphere.

I suspect that the issue lies in the values I am assigning to phi and theta, but unfortunately, I am unsure about the range of these values.

If you require further clarification, please let me know!

Answer №1

Although not specifically using three.js, this code snippet can be easily understood. Processing is the language being utilized here:



void setup() {
  size(300, 300, P3D);  
  frameRate(300);
  background(0);
}

void draw() {

  lights();
  translate(width/2, height/2);
  stroke(255,255,0);
  noFill();
  //sphere(75);

  PVector v = noise_spherical_point(frameCount * 0.009, 75);

  translate(v.x, v.y, v.z);
  fill(255,0,0);
  noStroke();
  sphere(1);

}


PVector noise_spherical_point(float t, float rad) {
  float x = noise(t) * 2 -1;
  float y = noise(0, t)  * 2 -1;
  float z = noise(0, 0, t) * 2 -1;
  PVector v = new PVector(x, y, z);
  v = v.normalize();
  v.mult(rad);
  return v;
}

https://i.sstatic.net/RtByR.gif

Answer №2

The reason is that phi and theta are measured in radians, not degrees.

Therefore, Math.random() * 2 -1 produces values that are too large for radians to handle.

Additionally, based on the current implementation, there appears to be no range limit set for these parameters.

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

Encountered an unforeseen character 'u' in the initial position of the JSON while attempting to create a plugin

I seem to be encountering some issues with my code. Whenever I attempt to run the script in the developer kit, an error is thrown: unexpected token u in JSON at position 0... funciones.js $(document).ready(function (){ $("#btn1").click(funct ...

Triggering a keyboard *ENTER* event on an Input in Javascript/React by clicking a button is a common query among developers

I am facing a challenge with an Input element that only displays results when I press Enter on the keyboard. The element is part of a third-party extension, so my control over it is limited. My goal is to trigger the ENTER event for the Input when a button ...

ghost.py version 0.2.3 encountered a TimeoutError while trying to load the requested page

I'm currently using ghost.py Version: 0.2.3 and I am trying to retrieve the value of a JavaScript variable from a specific web page. However, when I execute this simple script, I encounter an error message saying "Unable to load requested page": from ...

"Encountered a corrupt XLSX file when attempting to download through Vue.js with Axios

Hey there, I've been attempting to generate a download using axios for an excel file but unfortunately, I haven't been successful in opening it. Could you please assist me in identifying the problem? const blob = new Blob([result.data], { ty ...

Halt the execution of any additional code

I have a favor to ask: Character.count({'character.ownerid': msg.author.id}, function (err, count) { if (err) { throw err; } if (count > 3) { err.message = 'Exceeded character limit'; //create error ...

The identifier "resolve" in the catch block has not been defined

Why is it not possible to call resolve in the catch block? I wanted to catch a failed request and attempt it again in the catch block, but I am encountering an issue where resolve is not defined. I am confused since I am inside of the promise, so why is i ...

The Vuex store has not been defined in the vue-router

I'm currently facing an issue with my router setup and a global beforeEach hook that validates authentication. import store from "@/store/store"; const router = new Router({ // routes... }); router.beforeEach((to, from, next) => { if (to ...

What is the reason for JavaScript documentation using a nested array to define a function's parameters in its syntax?

I'm struggling to articulate my question, but as I delve into the documentation for JavaScript and Node.js, I notice they define syntax in a way such as this. var new_array = old_array.concat(value1[, value2[, ...[, valueN]]]) It seems like all th ...

Strategies for accessing a collection of DOM elements in React

Currently, I'm embarking on a challenge to complete 50 projects in 50 days by Brad Traversy. However, I've decided to take it up a notch by building them in Next.js with React since that's what I work with professionally. Unfortunately, thi ...

Dynamic Filtering with jQuery List

I'm attempting to create a dynamic filter list on keypress event. For example, if I type "It" into the input field, the elements that do not match this value will be hidden. I'm unsure if the code structure I have implemented below effectively ac ...

Dynamically Incorporating HTML Attributes Using Angular

My goal is to automatically disable an HTML form field based on a property in a JSON file. The property value in the JSON determines whether the form field should be disabled or not. To achieve this, I added data-is-disabled={{field.rules.disabled}} to th ...

How can I handle JSON data that contains undefined values?

Similar Question: Is it possible to parse JSON with special 'undefined' values using JavaScript? I'm curious if there's a way to parse something like javascript JSON.parse('{ "name": undefined}'); that is generated by an API ...

What could be causing the lack of color change in my boxes even after confirming the prompt?

function changeColor() { if (confirm("Press a button!") == true) { if(this.style.backgroundColor == "white") this.style.backgroundColor = "yellow"; else if(this.style.backgroundColor == "yellow") this.style.backgroundColor = "red"; else i ...

What is the best way to retrieve data from my JSON file?

When working with a JSON file that contains a single value, how can I extract specific information from it? "audio_services": "{\"node-input-audio_services1\":\"network addresses\",\"audio_ip_1\":\"ports\",\"au ...

Automated JavaScript function for controlling execution

Currently, I am developing an asp.net c# application that heavily relies on javascript, specifically jquery, for enhancing user experience. I have decided to take a namespaced object-oriented approach to my javascript code and so far, I believe I have suc ...

Display a section of a string as the result

I have a JavaScript challenge where I need to extract the value inside li tags using only JavaScript. Can anyone guide me on how to achieve this? JavaScript var string = "<div><li>First LI</li><li>Second LI</li></div>" ...

unable to execute react scripts

npm log 0 info it worked if it ends with ok 1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'start' ] 2 info using <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e001e032e58405f5c405e ...

The Limits of JavaScript Tables

Currently facing an issue with a webpage under development. To provide some context, here is the basic layout of the problematic section: The page features a form where users can select from four checkboxes and a dropdown menu. Once at least one checkbox ...

Filtering data using Angular

Just starting out with angular and trying to figure out the best way to achieve this: I have some data in a json file that includes items of two types: 'course' and 'tutorial'. Tutorials are related to courses through a specific field ...

Showcase the link to the npm package within the Packages category on the GitHub repository

Exciting news - I just finished creating and releasing my very first npm package. https://i.sstatic.net/GL1Q6.png I'm eager to connect this package to my GitHub repository. When I look under packages, it says Publish your first package. However, I&a ...