Comet spinning in orbit around celestial body

I need help creating a game where an object (comet) can fly and rotate around another object (planet) in orbit. Currently, I have managed to make the comet move and turn towards the planet, but I am struggling to figure out how to make it start rotating around the planet's orbit once it reaches a certain distance.

IMAGE

this.mesh.translateZ(this.speed);

if (this.target.position.distanceTo(this.mesh.position) >= 100) {
    let targetQuaternion = new THREE.Quaternion();
    let rotationMatrix = new THREE.Matrix4();
    rotationMatrix.lookAt(this.mesh.position, this.target.position, this.mesh.up);
    targetQuaternion.setFromRotationMatrix(rotationMatrix);

    if (!this.mesh.quaternion.equals(targetQuaternion)) {
        let step = 0.01;
        this.mesh.quaternion.rotateTowards(targetQuaternion, step);
    }
} else {
    // Need guidance on how to make the comet(this.mesh) fly around the planet(this.target)'s orbit
}
javascriptthree.js

Answer №1

To create an orbiting effect between two objects, the most straightforward approach is to establish parent-child relationships. By assigning a child to an object, they share the same transformations. Therefore, when the parent undergoes rotation, the child will rotate correspondingly. Furthermore, if the child is given a significant translation offset, it can simulate an orbital motion around the parent.

Illustrated below is a basic demonstration:

initialize() {
    this.celestialBody = new Mesh(new SphereBufferGeometry(100))
    this.orbiter = new Mesh(new SphereBufferGeometry(5))
    this.orbiterCenter = new Object3D()

    this.orbiter.position.set(1000,0,0)
    this.orbiterCenter.add(this.orbiter)

    this.scene.add(this.celestialBody)
    this.scene.add(this.orbiterCenter)
}

updateMotion() {
    this.orbiterCenter.rotateY(Math.PI / 2000) // completes one revolution every 1000 frames
}

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

Integrating Dart with external libraries

Here is a straightforward example demonstrating the usage of a map library: <!doctype html> <html> <head> <script src="http://api4.mapy.cz/loader.js"></script> <script>Loader.load()</script> </head; &l ...

javascriptdartintegration

Slider with FadeIn effect remains unresponsive to the FadeOut command (JQuery / Javascript)

I'm currently working on a slider that is supposed to fade in and out. However, I am facing an issue where the slide fades in correctly but instantly disappears instead of fading out. Do you have any insights into why this might be happening and any s ...

javascriptjqueryhtmlcssanimation

Searching through multiple columns in datatables

I encountered an issue with searching multiple columns in my serverside datatables. Individual column searches work fine, but when trying to search on more than one column simultaneously, the filter does not function as expected. For example, searching by ...

javascriptjquerydatatable

Karma jasmine and an angular controller that utilizes the 'Controller as' syntax (where 'this' is used instead of $scope)

I'm having trouble setting up karma for my unit tests, specifically on a basic example: Here is the controller file: angular.module('balrogApp.requests', [ /* Dependencies */ ]) // Routes configuration .config(['$routeProvider&a ...

javascriptangularjsunit-testingdependency-injectionkarma-jasmine

Struggling to find the element using Selenium

Hey there, I'm struggling with identifying the input id button in my HTML code while using Selenium through Java. The error message says it's unable to locate the element. Can anyone provide some guidance? I've already tried using xpath and ...

javascriptxpathselenium

Exploring the capability of the Videoshow NPM module in conjunction with

I've been working on using videoshow to convert a series of images into a video. I've made several changes to my code, but it seems like it's pretty much the same as what's described in the module's documentation. However, I keep e ...

javascriptnode.jsffmpeg

Issue with FontAwesome icon selection in Vue2 (nuxt) not displaying icons

If you're looking for the icon picker, you can find it here: https://github.com/laistomazz/font-awesome-picker I've tried running it, but unfortunately, the icons are not showing up. When I inspect the elements, the code is there but the icon is ...

javascriptvue.jsnuxt.js

Utilizing the mobile navigation layout for desktop screens without the need to adjust breakpoints

Having created a responsive site with common breakpoints established in SCSS as mixins, I am now seeking to implement the mobile breakpoint for a single page on desktop view only. Initially, my plan was to create a 'forced-mobile' class by exten ...

javascriptresponsive-designsassnavbar

Typescript encountering onClick function error during the build process

My current challenge involves creating a submit function for a button in my application. However, when I attempt to build the project, I encounter a typing error that is perplexing me. Despite trying various methods, I am unable to decipher how to resolve ...

javascriptreactjstypescript

check if JSON value is not null

Display items in ng-repeat only when the value of a certain key is not empty. Here is the code snippet: <a class="item" href="#" ng-repeat="e in events | orderBy:'match_time'" ng-if="e.match_timer !== NaN && e.match_status !== ' ...

javascriptangularjs

JQuery class for swapping elements upon scrolling

I am currently working on a navigation bar that changes classes to create a fading effect for the background. The approach I have taken involves targeting the window itself and monitoring the scroll position of the user. If the user scrolls down more than ...

javascriptjqueryhtml

How exactly does this JavaScript code determine the index of the maximum value within an array?

Examining the specific line of code: let largest = arr.reduce((a,v,i) => v > a[1] ? [i,v] : a, [-1,0]); I find this part a, [-1,0] particularly perplexing, as I am unsure of its syntax. How does a function before the comma? ...

javascriptnode.js

The compatibility issue between Angular JS App and JSPDF is causing malfunctions specifically in Internet Explorer

I am currently working on an Angular JS application that utilizes JSPDF for generating PDFs. While the PDF generation functionality works perfectly fine on Chrome, Firefox, and Safari, it encounters issues on Internet Explorer (IE). The specific error mes ...

javascriptangularjsjspdf

A notification appears when the record is being inserted after clicking the button

Just venturing into the PHP and MYSQL realm, so please excuse any beginner questions. Before I submit data from a form to my SQL table, I'd like to display a confirmation POP UP message asking "Are you sure you want to insert this data?" ...

javascript

HTML and JavaScript code to desaturate or grayscale image rollovers without the need for additional image duplicates or sprites

Is there a way to achieve grayscale to color image rollover effects without duplicating images or using sprites? I'm looking for an alternative technique that can accomplish this. Any suggestions on how to implement it? ...

javascriptjqueryhtmlcssrollover

What is the best way to extract function bodies from a string with JavaScript?

I am currently searching for a solution to extract the body of a function declaration by its name from a JavaScript code string within a Node.js environment. Let's assume we have a file named spaghetti.js that can be read into a string. const allJs = ...

javascriptnode.jsregexstring

Changing the CSS property from "display: none" to "display: block" using JavaScript causes all the div elements to overlap

My issue involves several radio inputs where clicking one should reveal a hidden div containing information. However, when this div appears, it overlaps with the footer instead of staying positioned between the footer and radio input as intended. I am str ...

javascripthtmlcss

Modifying the key of a JSON object can result in the alteration of other associated values as well

Overview: A JSON Object var JSON_OBJECT = []; has been defined as a global variable. [ { "user_id": "123", "AF": [ { "formula_type": 0, "lag": 0 } ], "Trend": [ { "is_active": 0 ...

javascriptjqueryjsonkey-value

Is it acceptable that req.body is void of content? Should we reconsider this approach?

As a beginner in express, I am working on incorporating a basic login feature into my project. However, I am facing some confusion when it comes to passing data around. There are a few aspects that are perplexing me. I currently store the input value i ...

javascriptangularjsnode.jsmongodbexpress

Screening strings and arrays based on multiple criteria

My code is below and I am trying to have the bot check for two specific conditions in the user's message. The message must contain "how" plus either "doing" or "bread". It works perfectly when using only "doing" but not when adding the "bread" conditi ...

javascriptnpmdiscorddiscord.js