Is there a way to rotate an object with an MTL material in an animated sequence

After spending the entire weekend attempting to rotate an obj mtl in the animation function, I've reached a dead end. Despite exhaustively searching through all related postings on this issue and making various changes, nothing seems to work.

The code in question is written using threejs, with all necessary libraries included and the objmtl object declared globally. Surprisingly, the object can be rotated successfully in the initial code snippet:

loader1 = new THREE.OBJMTLLoader();
                loader1.load( 'head_no_eyes.obj', 'head_no_eyes.mtl',
                function ( object1 ) {
                object1.position.y = - 10;
                object1.rotation.x =  Math.PI/15.;
                scene.add( object1 );
                animate();
                } );

However, when attempting the rotation within the animation routine, it fails to produce the desired effect:

function animate() { 
            requestAnimationFrame(animate);
            camera.position.x += ( mouseX - camera.position.x ) * 0.5;
            camera.position.y += ( - mouseY - camera.position.y ) * .05;
        //  object1.rotation.y += 0.07;  // this line makes it fail
            camera.lookAt(scene.position);
            renderer.render(scene, camera); }

The reason behind this inability remains unclear to me. Is there anyone who might have insights into why this isn't working as expected?

Your assistance would be greatly appreciated.

Answer №1

Dealing with JavaScript scope issues can be tricky.

function ( object1 ) {
    object1.position.y = - 10;
    object1.rotation.x =  Math.PI/15.;
    scene.add( object1 );
    animate();
} );

In the provided code, object1 is only accessible within that specific callback function. This means that animate() cannot access it, leading to an attempt to modify a rotation property of an undefined object.

Here's a modified version of the code to resolve this issue:

function ( object ) {
    object1 = object;
    object1.position.y = - 10;
    object1.rotation.x =  Math.PI/15.;
    scene.add( object1 );
    animate();
} );

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

Running the command npm show --outdated triggers an E404 error stating that the package is not found in this registry

I am currently working on a confidential project that I prefer not to make public. Despite using node v17.3.0 and npm 8.3.0, I am facing difficulties in displaying the outdated dependencies: $ npm show --outdated npm ERR! code E404 npm ERR! 404 Not Found - ...

Utilize Tailwind CSS in React to dynamically highlight the active navigation item on click

Check out my navigation bar code: <nav className="bg-white shadow dark:bg-gray-800"> <div className="container flex items-center justify-center p-6 mx-auto text-gray-600 capitalize dark:text-gray-300"> <Link ...

Changing the visibility of a button based on a checkbox in JavaScript - here's how

Just starting out with JS and working on a react project. I need to toggle the visibility of a button from false to true when a checkbox is checked. Here's my code, I believe the logic is correct but it's not updating the UI. Any suggestions are ...

Learn the process of adding asynchronous middleware modules to your express.js application

I'm currently developing an express application that utilizes the node_acl module along with a MongoDB database. I have created a custom module that sets up and configures node_acl asynchronously. This middleware needs to be called as the second piece ...

Error: Unable to load L.GeometryField constructor in django-leaflet library

I'm having trouble saving a geolocation to a Postgres database using Django-leaflet. I keep getting an error message that says Uncaught TypeError: L.GeometryField is not a constructor. My code involves AJAX calls. <script> var csrftoke ...

Instructions for concealing and revealing a label and its corresponding field before and after making a choice from a dropdown menu

Currently, I am working on developing a form that will enable customers to input their order information. This form includes a selection list for payment methods, with three available options. If the user chooses either credit or debit card as the paymen ...

Retrieve the input data following validation of an AngularJS form

Hello there! I am relatively new to utilizing AngularJS and Bootstrap. Recently, I have created a login form using AngularJS and Bootstrap CSS. Below you will find the code for my form: <form name="userForm" ng-submit="submitForm(userForm.$valid)" nova ...

JavaScript syntax issue: Required formal parameter not found

Can someone help me understand why this error message is showing up in the console for the code provided? I've followed the link indicated as the issue and it points to this specific line: " $('tr').each(function() { ". (I may have included ...

Skrollr immediate pop-up notification

Can anyone help me figure out how to make text appear suddenly and then disappear using skrollr? I've been able to get it to fade in and out, but I want it to just show up without any transition. Here's the code I have so far: <div id="style" ...

Generate text in a random spot effortlessly

After doing some research on various development platforms, I stumbled upon this JSFiddle that seems to have a solution for my requirements. The only thing missing is the ability to input a specific word (without user input) and automate the process at fix ...

What is the reason behind the inability to send an object from the parent component to a child component within a Vue 3 application?

I've encountered an issue while working on a Vue 3 app involving a component and its <User /> subcomponent. Within App.vue: <template> <Navbar /> <Sidebar /> <Content title="Users" /> <Footer ...

Traversing through an array of objects to retrieve a random value from each object - Utilizing JavaScript

I'm currently attempting to loop through an array of objects and display a random quote from the data I have. However, my code seems to be returning undefined. Any thoughts on why this might be happening? Here's what my code looks like so far: ...

Is there a way to refresh a PHP file using Ajax?

So I have this PHP file that generates a .txt file containing the names of some photos. The thing is, new photos are constantly being added to the images folder. To address this issue, I've set up a JavaScript function on my index page that calls an A ...

The remove() method in AJAX function is not functioning as expected

Within a jQuery click event that uses $.post(), I have a .remove() function inside the response callback. Strangely, the alert() seems to function correctly when the code is executed, but the .remove() does not work at all, even though the alert() in the ...

What is the best way to utilize multiple props within a single callback function declared in a template literal when using React styled-components?

I recently incorporated styled components into my React project, but I'm encountering difficulty using multiple props to define styles in my components. Here's the crux of the problem: const sizes = { lg: css` width: 200px; h ...

What is the best way to eliminate a white border that appears only on my ThreeJS website when viewed on a mobile device?

I initially suspected a potential issue with resizing the window, so I created a JavaScript function to handle it. However, that did not resolve the problem. Any other ideas on how to troubleshoot this? // If the user resizes the window, update camera a ...

Setting the $dirty flag to true when a value is entered in the text box, but not the other way around

When I enter a value in the text box, myForm.$dirty gets set to true. However, the flag does not revert back to false when I delete all values from the text box. Why is this happening and how can I fix it? <input name="input" ng-model="myModel.text"& ...

The self-made <Tab/> element is not functioning properly with the ".Mui-selected" class

I have customized a <Tab/> element and I want to change its selected color using Sandbox demo code export const Tab = styled(MuiTab)({ "&.Mui-selected": { color: "red" } }); However, I've noticed that: 1. Apply ...

Steps for converting TypeScript code to JavaScript using jQuery, without the need for extra libraries or frameworks like NPM

My single-page dashboard is quite basic, as it just displays weather updates and subway alerts. I usually refresh it on my local machine, and the structure looked like this: project/ index.html jquery-3.3.1.min.js script.js I decided to switch it t ...

Retrieving specific arrays from documents in MongoDB

[ { _id: 555, names:['John','Doe','David'] }, { _id: 625, names:['David','Mark','Carl'] }, { _id: 299, names:['Bill','Carlos','Ventus&apo ...