Determine the horizontal movement of x and z on a flat surface while accounting for

Question

Determine the horizontal movement of x and z on a flat surface while accounting for

Using HammerJS, I am able to manipulate a 3D object within an augmented reality environment.

Everything functions properly unless I physically move my phone (which serves as the camera)...

const newTranslation = new THREE.Vector3(this._initTranslation.x + e.deltaX, this._initTranslation.y, this._initTranslation.z + e.deltaY);

The initial translations correspond to the original position of the Object3D.

While navigating around, the movement remains restricted to the x and z axes that were initially set. For example, if I slide my finger upwards on the phone (with the intention of moving the object backwards along the z-axis), it instead shifts from left to right.

I understand that I need to factor in the camera's rotation in order to translate correctly from camera space to world space, but I am unsure how to accomplish this.

Thank you in advance for any assistance provided.

javascript three.js augmented-reality hammer.js

Answer 1

Answer №1

After some troubleshooting, I managed to resolve the issue on my own. Here is the solution that worked for me:

To adjust the point based on camera rotation angle, I implemented the following code snippet:

const movePoint = new THREE.Vector2(e.deltaX, e.deltaY);
movePoint.rotateAround(new THREE.Vector2(0, 0), this.getCameraAngle());

const newTranslation = new THREE.Vector3(this._initTranslation.x + movePoint.x, 
this._initTranslation.y, this._initTranslation.z + movePoint.y);

In terms of obtaining the camera angle, here is the method that calculates it:

public getCameraAngle (): number {
  const cameraDir = new THREE.Vector3();
  this._arCamera.getWorldDirection(cameraDir);
  cameraDir.setY(0);
  cameraDir.normalize();

  return Math.atan2(cameraDir.z, cameraDir.x) - Math.atan2(-1, 0);
}

Answer 2

After some troubleshooting, I managed to resolve the issue on my own. Here is the solution that worked for me:

To adjust the point based on camera rotation angle, I implemented the following code snippet:

const movePoint = new THREE.Vector2(e.deltaX, e.deltaY);
movePoint.rotateAround(new THREE.Vector2(0, 0), this.getCameraAngle());

const newTranslation = new THREE.Vector3(this._initTranslation.x + movePoint.x, 
this._initTranslation.y, this._initTranslation.z + movePoint.y);

In terms of obtaining the camera angle, here is the method that calculates it:

public getCameraAngle (): number {
  const cameraDir = new THREE.Vector3();
  this._arCamera.getWorldDirection(cameraDir);
  cameraDir.setY(0);
  cameraDir.normalize();

  return Math.atan2(cameraDir.z, cameraDir.x) - Math.atan2(-1, 0);
}

Determine the horizontal movement of x and z on a flat surface while accounting for

Answer №1

Similar questions

Modify the input based on the chosen option operation

To determine if an AJAX request is synchronous or asynchronous using Browser Developer Tools

Encountered a problem when attempting to upload images to Cloudinary through the front-end and save the information in a MySQL database using Axios on Node JS

Effective sparse translation between whole numbers

Solving Issues with URL Parameters and AJAX

Alter the color of textbox text using JavaScript

The integration of <form> with jQuery Ajax error

Is there a way to make res.render in node.js/express/mongo wait until the database search is finished before loading?

What is the method for sending an AJAX request with a dynamically looping ID number parameter in the URL

Utilizing Vue-i18n for language translations directly within a JavaScript file, rather than using

Is there a way to dynamically load a file on scroll using JavaScript specifically on the element <ngx-monaco-diff-editor>?

Next.js application deployment halted due to an unsuccessful completion of the process with the command "/bin/bash -ol pipefail -c npm ci"

What causes the scrollTop to appear erratic?

Chrome geolocation feature does not display the permission popup for JavaScript

Trouble with Setting Up the Email Address for the 'File a Complaint' Form in WordPress

Transmit the document to Django using Ajax

Is there a way to develop a login form that retrieves information from a Google Sheet database?

Tips for optimizing performance by preloading external CSS and JavaScript files from a third-party source in a ReactJS project with webpack

Troubleshooting problem with jwPlayer resizing in Firefox and Opera browsers

Using JQuery to append elements and then locate them with the find method does not produce the expected