Orbiting ThreeJS object positioned at the coordinates (0,0,0)

Question

Orbiting ThreeJS object positioned at the coordinates (0,0,0)

I have set up a ThreeJS Scene similar to the image provided. The issue I'm facing is when trying to rotate Obj2 vertically around Obj1, it ends up rotating around the Z axis instead of the center point (0,0,0). My goal is for Obj2 to orbit exclusively around Obj1 (positioned at (0,0,0)) without rotating around any other axis.

function configureObj2PositionHorizontally(angleInDegree) {
  radianAngle = angleInDegree * oneDegreeInRadians;

  obj2Mesh.position.x = distance * Math.cos(radianAngle);
  obj2Mesh.position.z = distance * Math.sin(radianAngle);

  console.log(radianAngle, distance);
}

function configureObj2PositionVertically(angleInDegree) {
  radianAngle = angleInDegree * oneDegreeInRadians;

  obj2Mesh.position.y = distance * Math.sin(radianAngle);
  obj2Mesh.position.z = distance * Math.cos(radianAngle);

  console.log(radianAngle, distance);
}

To address this behavior, how can I ensure that Obj2 orbits only around Obj1? Any suggestions or solutions would be greatly appreciated!

You can view the JSFiddle sample code here: https://jsfiddle.net/janithsg/y8upn26v/25/

javascript three.js 3d

Answer 1

Answer №1

To achieve the desired effect, consider creating a group aligned with Obj1's position, then adding Obj2 to this group and rotating it around its Y and X axes (if Obj2 is initially displaced along the Z axis).

This snippet of code accomplishes the task:

const obj1Mesh = new THREE.Mesh(
  new THREE.SphereGeometry(0.5), 
  new THREE.MeshBasicMaterial({ color: 0xffff00 })
)
scene.add(obj1Mesh)

const obj2Mesh = new THREE.Mesh(
  new THREE.SphereGeometry(0.2), 
  new THREE.MeshBasicMaterial({ color: 0x909090 })
)
obj2Mesh.position.z = - distance
scene.add(obj2Mesh)

const obj2Group = new THREE.Group()
obj2Group.add(obj2Mesh)
scene.add(obj2Group)

function configureObj2PositionHorizontally(angleInDegree: number) {
  const radianAngle = angleInDegree * oneDegreeInRadians;

  obj2Group.rotateY(radianAngle)
}

function configureObj2PositionVertically(angleInDegree: number) {
  const radianAngle = angleInDegree * oneDegreeInRadians;

  obj2Group.rotateX(radianAngle)
}

If you wish to move Obj1 while still having Obj2 orbit around it, you can create another group that includes both obj1Mesh and obj2Group, and then move this new group accordingly:

const mainGroup = new THREE.Group()
mainGroup.add(obj1Mesh, obj2Group)
mainGroup.translateX(2)
scene.add(mainGroup)

Answer 2

To achieve the desired effect, consider creating a group aligned with Obj1's position, then adding Obj2 to this group and rotating it around its Y and X axes (if Obj2 is initially displaced along the Z axis).

This snippet of code accomplishes the task:

const obj1Mesh = new THREE.Mesh(
  new THREE.SphereGeometry(0.5), 
  new THREE.MeshBasicMaterial({ color: 0xffff00 })
)
scene.add(obj1Mesh)

const obj2Mesh = new THREE.Mesh(
  new THREE.SphereGeometry(0.2), 
  new THREE.MeshBasicMaterial({ color: 0x909090 })
)
obj2Mesh.position.z = - distance
scene.add(obj2Mesh)

const obj2Group = new THREE.Group()
obj2Group.add(obj2Mesh)
scene.add(obj2Group)

function configureObj2PositionHorizontally(angleInDegree: number) {
  const radianAngle = angleInDegree * oneDegreeInRadians;

  obj2Group.rotateY(radianAngle)
}

function configureObj2PositionVertically(angleInDegree: number) {
  const radianAngle = angleInDegree * oneDegreeInRadians;

  obj2Group.rotateX(radianAngle)
}

If you wish to move Obj1 while still having Obj2 orbit around it, you can create another group that includes both obj1Mesh and obj2Group, and then move this new group accordingly:

const mainGroup = new THREE.Group()
mainGroup.add(obj1Mesh, obj2Group)
mainGroup.translateX(2)
scene.add(mainGroup)

Orbiting ThreeJS object positioned at the coordinates (0,0,0)

Answer №1

Similar questions

Tips for implementing arraybuffer playback in video tags

React application no longer displaying content following the upgrade to React 18 version

Selenium - Tips for entering text in a dynamically generated text field using Javascript!

Exploring the Potential of Mobile Development using AngularJS

Discover the best method for summing all values within a JSON object that contains multiple unique keys

How can data on the server be fetched using an AJAX request in Express.JS and displayed on the client side?

Error message: Unable to iterate through a non-iterable object in React reducer

What are the consequences of altering meta tags once the DOM has fully loaded?

npm is facing difficulties while trying to install the scrypt package. It is prompting the requirement

What is the maximum number of requests that Node-Express can send simultaneously?

JavaScript: Navigating Through Frames and iFrames in Internet Explorer

Steer clear of manually inputting URLs in your React components

Managing an Angular timer: Starting and resetting it via the controller

Error: Express is undefined and does not have a property called 'use'

Looking for a solution to eliminate Parsing Error: Unexpected Token when developing with React? I've already implemented ESLint and Prettier

What is the best way to retrieve all information from GitLab API using Axios?

Sending Emails with AngularJS

Delaying Variable Assignment in Node.js until Callback Function Completes

When using iOS, inserting an iFrame with a source URL (SRC) on a webpage will automatically open the URL

Failure in rendering components with React and ElectronThe issue of rendering components with