Issue with Tween.js rotation not functioning properly in conjunction with Three.js loader

I've been tasked with updating a simulation project that was initiated several years ago. The previous developers used older versions of three.js and tween.js libraries, but I had to upgrade them for various reasons. However, I'm encountering an issue now where a piece of code that used to function properly is no longer working, and I can't seem to pinpoint the reason...

Let me delve into the problem at hand. When the application starts, meshes are loaded by invoking this function for each mesh:

function loadMesh(objPath, objName, worldScene, initPosition) {
    if (initPosition == undefined) {
        initPosition = new THREE.Vector3();
    }
    var loader = new THREE.JSONLoader();
    loader.load(objPath, function (geometry, materials) {
        for (var material in materials) {
            materials[material].shading = THREE.FlatShading;
        }
        var mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
        mesh.scale.set(1, 1, 1);
        mesh.name = objName;
        mesh.position = initPosition;
        mesh.positionO = initPosition.clone();

        worldScene.add(mesh);
        objects.push(mesh);
        objDict[objName] = mesh;
        loadCounter--;
    });
}

NOTE: I will only demonstrate animation creation here, as I call the "start" method on them later. At present, when I attempt to move an object by altering its position using something like this:

new TWEEN.Tween(objDict["Screws"].position)
    .to({y: 5}, 1000)
    .delay(500);

it works without issues. However, when I try to rotate an object in a similar fashion:

new TWEEN.Tween(objDict["ms_LidUpper"].rotation)
    .to({x: -1.571}, 1000)
    .delay(500);

I encounter problems and couldn't find a solution. It's important to note that this code previously worked! My hunch is that the JSONLoader might be causing the issue because during debugging, the mesh object seemed to lack the matrixRotationWorld attribute and had the matrixWorldNeedsUpdate attribute set to false. In the earlier version of the application, matrixWorldNeedsUpdate was true, and there existed a matrixRotationWorld attribute.

Any assistance would be highly appreciated!

Answer №1

Implementing tween in the following manner can yield great results

var position = { x: 0, y: 0 };
new TWEEN.Tween(mesh.position).to({x: 10, y: 10}, 3000).onUpdate(function () {
    mesh.position.x = position.x;
    mesh.position.y = position.y;
}).start();

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

Experiencing a mysterious error in Vuex with undefined values while using a getter in a computed property

I've encountered an issue on my Vue.js website where the data is rendering correctly, but I keep receiving an undefined error in the console. The error seems to be related to an axios call I'm making in App.vue to fetch data from my CMS: In App. ...

Developing a Library for Managing APIs in TypeScript

I'm currently struggling to figure out how to code this API wrapper library. I want to create a wrapper API library for a client that allows them to easily instantiate the lib with a basePath and access namespaced objects/classes with methods that cal ...

Utilizing a json file within a jquery function without the need for quotation marks

I'm having trouble importing my hotspot.json file into a jQuery function. The issue arises with the quotation marks around the hotspot value - they are required for the JSON file to be valid, but it's causing things not to work as expected. [ { ...

Resizing tables dynamically using HTML and JavaScript

I am attempting to reproduce the functionality demonstrated in this example When dealing with a large table, I want it to resize to display 10 entries and paginate them accordingly. The only thing I require is the pagination feature without the search bar ...

What causes the "500: Unknown web method" error when JavaScript tries to call a Page WebMethod?

I am encountering an issue with a method in CreateTicket.aspx.cs: [WebMethod()] public static string Categories() { var business = new CategoryBusiness(); var categories = business.ListRootCategories(); return categories.Json(); } Additiona ...

Is there a way to execute a javascript function that is located outside of my Angular application without having to import it?

I need to be able to trigger a JavaScript function that is located outside of my Angular app when a button is clicked. Unfortunately, it seems that importing the JavaScript directly into my Angular app isn't feasible for this task. The platform I am ...

Filtering out undefined elements from an array created by mapping over a nested array using map() and filter()

I'm currently in the process of creating multiple variables to be utilized later on, each one representing a specific array within a set of nested arrays (essentially a data array that will be used for various projects). As I attempt to select the pr ...

Icons are failing to display in the dropdown menu of MUI after an option is selected in ReactJS

There seems to be an issue with the icon in the select tag. Initially, it is not showing which is correct. However, when you click the dropdown, the icon appears as expected. But after selecting an option, if you click the dropdown again, the icon disapp ...

Developing Functions using MongoDB Console

When running the query db.graduates.find({student_id: '2010-01016'}).pretty(), it returns a result. Afterwards, I created a function: function findStud(name,value){ return db.graduates.find({name:value}); } However, while executing findStud("s ...

"Utilizing the 'await' keyword within a JavaScript 'for of'

Could there be an issue with my code? I am utilizing express and mongoose router.get('/c/:hashtoken', validateEmailToken, catchAsync(async(req,res)=>{ const hashtoken = req.params.hashtoken const hashtoken2 = createHash('sha256&ap ...

The resend email feature isn't functioning properly on the production environment with next js, however, it works seamlessly in the development environment

import { EmailTemplate } from "@/components/email-template"; import { Resend } from "resend"; const resend = new Resend("myApiKey"); // this works only in dev // const resend = new Resend(process.env.NEXT_PUBLIC_RESEND_API_KE ...

Discovering the source DOM element that initiated ng-change

I am currently working with angularJS and have multiple <select> elements on my webpage, each with its own ng-change function. Here is an example: <select id="hairColorComponent" ng-model="hairColor" ng-options="option.name for option in ...

Tips for fixing the issue of "Failed to load response data: No data found for resource with the provided identifier"

API INTERACTION export const sendReminder = async (recipient) => { await API.post( 'delta-api',contact/users/${recipient}/sendReminder, {} ); }; const handleReminderSending = async () => { await sendReminder(userName) .then((response) =&g ...

Searching for words in both uppercase and lowercase

I've been working on creating a search feature for my jsgrid, but I've hit a roadblock. How can I enable searching for both uppercase and lowercase text? Currently, I'm only getting results when using the exact same symbols in the search qu ...

React checkbox is experiencing an issue where the onchange event is returning as undefined the first time it is triggered

When using a React checkbox, the onChange event outputs undefined for the first click, and then shows a valid true or false output. I have tried searching online for a solution but have not been able to solve the problem. Can someone please help me identi ...

Eliminating redundant values from a JSON object that is nested within another

Currently, I am working on rendering a list of Labels from a local JSON file. However, I am facing the issue of duplicates and I want each label to appear only once. I attempted to use Array.filter() and other methods to achieve this line: "Categories": ob ...

Comprehensive route from a one-dimensional array

I have a specific array structure that looks like this : var items = [ [1, 0, 'Apple'], [2, 1, 'Banana'], [3, 0, 'Orange'], [4, 3, 'Grape'], [5, 0, 'Cherry'], [6, 0, 'Mango'], [7, 6, 'Pear&a ...

Conceal the Ajax Div and display the Loader Div while waiting for the data to be

Trying to show a loader div until the Ajax-populated div is returned. Want to hide "responseDiv" until it's filled with Ajax data and display a loading div in the meantime. #loading { background: url('images/loading.gif') no-repeat cent ...

Determine using Lodash whether there is an object in an array that matches the ID from a separate array

There is a user array defined as follows: var users = [{ id: 1, name: 'ABC', isDisplay: true }, { id: 2, name: 'XYZ', isDisplay: true }, { id: 3, name: 'JKL', isDisplay: true }]; Additionally, there is another arra ...

Modify a Google Docs script for use in Google Sheets

I created a function called "myFunk()" that works flawlessly in Google Docs. It essentially looks for fields marked with ## in a sheet and replaces them with user input. However, when I attempt to run it in Sheets after making some changes to the functions ...