`Troubleshooting a rotation problem with PhysiJS`

I've recently started working with this library and I've run into a persistent issue that has been quite challenging for me.

My current setup involves two cubes, one utilizing physi.js and the other using three.js. I have a function in place to rotate these cubes when certain keys (A, S, D, or W) are pressed based on the camera's rotation. Here is a snippet of my code:

    var v = new THREE.Vector3(0, 0, 0);
    if (keys.forward === 1)
        v.x = -1;
    if (keys.right === 1)
        v.z = 1;
    if (keys.backward === 1)
        v.x = 1;
    if (keys.left === 1)
        v.z = -1;

    //logic to obtain desired angle
    var angle = camera.rotation.y + Math.atan2(v.x, v.z);
    var rot = normalMesh.rotation.y;
    var diff = angle - rot;

    if (Math.abs(diff) > Math.PI) {
        //determine the shortest path for rotation
        if (diff > 0)
            rot += 2 * Math.PI;
        else
            rot -= 2 * Math.PI;
        diff = angle - rot;
    }
    
    //smooth out rotation by halving the difference
    if (diff !== 0)
        rot += diff / 2;
    normalMesh.rotation.set(0, rot, 0);

While this works perfectly fine for the cube built with three.js, it fails to work as expected on the cube using physi.js.

I have created a demo showcasing this issue (note: unable to use jsfiddle due to web worker constraints):

The source code can be found in a downloadable zip file here --->

You can review the movement function at , specifically at line 95.

If you try rotating the camera with the mouse, you'll notice the issue occurring when attempting to align the cube with the red mesh direction.

Answer №1

To ensure synchronization, it is recommended to separate rotation updates from the animation loop and place them in a physical loop instead:

scene.addEventListener('update', function(){
    actor.onRender();
})

This adjustment guarantees that the rotation will always be in sync with the rest of the scene.

For further information, refer to this page https://github.com/chandlerprall/Physijs/wiki/Callbacks-&-Events.

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

Storing data in Angular service for future use

My ui-grid is functioning correctly, utilizing server side pagination with a view button to display row details on a separate page. However, upon returning to the grid after viewing details, it defaults back to displaying the first page. I would like it to ...

Ways to showcase every resource from an API in React JS

I need help with adding code to display products along with their images from an API in my existing code. Can someone assist me with this? import React, {useState, useEffect} from 'react' import "bootstrap/dist/css/bootstrap.min.css" im ...

Is there a way to showcase the data of each table row within the tr tag in an Angular 8 application?

I have been developing an application using Angular 8. The employee-list component is responsible for presenting data in a table format. Within the employee-list.component.ts file, I have defined: import { Component } from '@angular/core'; impo ...

In search of a tool that enables horizontal scrolling of content

I am on the lookout for a piece of Javascript code that can be integrated into my website to enable me to horizontally scroll content either from left to right or right to left. Although I found this script here: It offers the fundamental functionality th ...

New to NodeJS: Utilizing Requestify to Retrieve Data from Another URL

As a newcomer in the world of NodeJs, I am faced with the task of transitioning my CodeIgniter server APIs to Node.js. Currently, I am utilizing requestify to retrieve data from a web service, and once this is accomplished, I intend to invoke an insert met ...

Retrieving Data from a JSON File in ASP.NET MVC 4

After diving into learning ASP.NET MVC 4, I dabbled in some small projects... On my index page, my goal is to fetch a JSON file containing data and showcase it on the main page. In basic HTML and JavaScript, I utilize ajax for fetching or posting JSON da ...

Is it possible to develop a web-based chat application using socket.io without the need for ssh access or having to keep the terminal

I have been using php to develop my website. Up until now, I have relied on setTimeout with ajax for updating chats simultaneously. However, when this method stopped working, I discovered socket.io. My goal is to implement private messaging, and while I ha ...

Create a Vue component that utilizes the v-for directive to iterate through a list of items, passing data from a

Imagine having two arrays with a similar structure like this: const individuals = [{name: "Jane Doe", id: "0001"},{name: "John Doe", id:"0002"}, {name: "Sam Smith", id: "0003"}, {name: "Joe ...

Tips for connecting elements at the same index

.buttons, .weChangeColor { width: 50%; height: 100%; float: left; } .weChangeColor p { background: red; border: 1px solid; } .toggleColor { background: green; } <div class="buttons"> <p><a href="#">FirstLink</a></ ...

Tips for automatically setting tabulator columns for unknown JSON data

I am a novice developer and have come across a Json object whose contents I am not familiar with, which I need to incorporate into Tabulator. In order to do so, I must provide details for each column. For example: var JSONData =[{A:12,B:3,C:13},{A:5,B:23 ...

Populating table with information stored locally

Hello there, I am currently working on a journal project where I am facing an issue with the getItem function of localStorage. Whenever I add entries to the table and refresh the page, all the entries disappear except for one row with default input values ...

Refresh a Particular Section of a Website Without Having to Reload the Entire Page

I have this PHP script that I'm using to read specific phrases from a text file and then display one of them randomly on a webpage. Currently, the only way to see a new random phrase is by refreshing the entire page. I'm wondering if there is a w ...

Issue with jQuery click event not firing on multiple buttons with identical names

These are the two buttons that appear multiple times but do not function: <button name='btnEditar' class='btn btn-outline-success me-4' data-bs-toggle='modal' data-bs-target='#staticBackdrop'><i class=&a ...

Is it possible to nest ng-repeat and access $first and $last properties simultaneously

Below is the form that I am currently working with, <tbody ng-repeat="attGroup in attributesGroups"> <tr> <td class="vcenter text-right"> &nbsp;&nbsp;<a href="javascript:" ng-click="!$last && up ...

Using Angular's built-in dependency injection with the $resource factory allows for

Question regarding Dependency Injection on factory resource: As far as I know, the following example is the recommended approach for injecting dependencies in Angular1: angular.module('myApp').factory('Resource', Resource); Resource. ...

The exported NextJS URL isn't functioning properly

Recently, I delved into the world of Next JS by following a tutorial on YouTube by Brad Traversy. In his guidance, I used next export to export the program and ran it using serve -s out -p 8000. While the page loads perfectly on localhost:8000, the issue a ...

Initiating an audio call exclusively via SimpleWebRTC

I'm currently utilizing a jQuery plugin for WebRTC found here. My goal is to initiate an audio call only, but I am struggling to find a function within the plugin that allows for this. The code snippet I am using with autoRequestMedia set to false is ...

What are the alternatives to invoking a server-side C# method from JavaScript without using a WebMethod or UpdatePanel?

I am looking for alternatives to using an update panel. The common WebMethod approach is causing errors with the code below: private string currentHtml() { StringWriter str_wrt = new StringWriter(); HtmlTextWriter html_wrt = new Htm ...

Create a JavaScript button that redirects to a different page within a React application

I am creating a div element using a for-loop and I want to link each div to the "/campaign" page with its respective id. When a div is clicked, I want it to navigate to the "/campaign/id" page and pass the id to the Campaign component. class Home extends ...

Issue with Videogular: hh:mm:ss Date filter not functioning properly

I am currently working on integrating Videogular into my audio player application. Below are the settings provided in the example code on this particular page: <vg-time-display>{{ currentTime | date:'mm:ss' }}</vg-time-display> ...