Proper method to update the outdated R70 threejs code for compatibility with the latest version

I've encountered an issue with a piece of code that throws an error, although it functions perfectly in this jsfiddle. The goal is to rotate a cube and pan it using trackball controls. It works in the fiddle, but when I bring it into visual studio, Chrome gives me this error: "Cannot read property 'multiplyQuaternions' of undefined".

Example Fiddle

The problematic code snippet I'm trying to integrate involves rotating a cube. My suspicion is that the fiddle uses an older version of three.js compared to what I'm currently working with. Any suggestions on how to correctly implement 'geometry.quaternion'? Thank you.

var geometry = new THREE.Geometry(); 

deltaRotationQuaternion = new THREE.Quaternion()
                    .setFromEuler(new THREE.Euler(
                        toRadians(deltaMove.y * 0.4),
                        toRadians(deltaMove.x * 0.4),
                        0,
                        'XYZ'
                    ));
            geometry.quaternion.multiplyQuaternions(deltaRotationQuaternion, geometry.quaternion);
         }

Answer №1

THREE.Geometry doesn't contain a quaternion property (even in r70).

THREE.Object3D does include the quaternion property and serves as the parent class for THREE.Mesh. You can apply it like this:

var myMesh = new THREE.Mesh(geometry, material);
myMesh.quaternion.multiplyQuaternions(deltaRotationQuaternion, myMesh.quaternion);

Note: It seems like you already realized this based on your fiddle, right?

three.js version used: r87

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

Error: The function $compile does not exist

Currently, I am working on developing an AngularJS directive using TypeScript. While testing my code in the browser, I encountered the following error: TypeError: $compile is not a function at compileComponent.js:14 Interestingly, the TypeScript compiler ...

JavaScript and jQuery radio button matrix group implementation

I'm feeling completely lost when it comes to solving this problem. My task is to create a matrix of radio buttons with columns labeled 1 to 3 and rows labeled A to C. A B C 1 (o) (o) (o) 2 (o) (o) (o) 3 (o) (o) (o) <tabl ...

Material UI does not support the inline attribute for applying CSS properties

Trying to adjust the CSS for Material-UI When setting the width, everything works fine. However, when attempting to set display inline, an error occurs ---> "inline is not defined" Can anyone provide guidance on how to resolve this issue? Sharing my cod ...

A function with a specific name defined as a parameter is unable to be accessed outside of that function

Using named function as a parameter in JavaScript, unable to access outside of the function It's important to note that arguments.callee() is forbidden in strict mode according to the 5th edition of ECMAScript. MDN Warning Instead of using callee, ...

Missing Modal in Fullcalendar Display

I am working on setting up an HTML modal for FullCalendar in Django using various solutions, but unfortunately, the modal does not appear when clicked. I have tried different approaches and consulted resources, but so far, I have not been successful. Any ...

Receiving an error when attempting to import a function and access props using the "this" keyword: "TypeError: Unable to retrieve property 'renderElapsedString' as it is undefined"

Just started using React and working on a time tracking app based on the teachings of FullStackReact. Instead of Create Class, I opted for the ES6 'extends' module. However, I've encountered an error that has got me stumped. Error: Unable ...

How to extract IDs from a URL in Angular

I'm facing an issue with retrieving the first id from an image URL. Instead of getting the desired id, I am receiving the one after the semicolon ("id" = 1). I have tried various methods but haven't been successful in resolving this issue. Any su ...

chaotic telerik editor arrangement

I have incorporated the Rad Editor into my ASP.NET page. <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <telerik:RadEditor ID="reSummery" runat="server" > </telerik:RadEditor> Despite not referencing ...

The issue at hand is why the closure is not functioning properly when variables are assigned to the callback of the getCurrentLocation function

Apologies for the extensive amount of code, but it seems like there may be an issue with AppMobi's getCurrentLocation function in this scenario. The problem arises when tapping on list elements triggers an asynchronous getCurrentLocation call which up ...

Modify HTML tags based on the sum of <li> elements using jQuery

I have a dynamic slider with items in a list that will change based on the page. My goal is to create a loop that updates the data-slide-to attribute with the correct slide number for each item. After several attempts, I managed to come up with a solutio ...

How can I configure Helmet JS CSP to permit external CSS and JavaScript scripts? I'm also wondering about the whereabouts of the inline

I'm fairly new to the world of JavaScript and ExpressJS. My goal is to create a web application with a working login page. I'm currently in the process of setting up the helmet JS middleware to allow for external CSS and scripts. However, despite ...

Iterating through numerical values with assigned object properties, storing the resulting values in an array

A line chart requires filling in missing values with "0" from the object called "filteredTime." A dynamic number of items are present in the object, and a for loop is used to push the output into an array. The expected outcome is an array of 10 items, but ...

Using ng-transclude directive in AngularJS for input values

My goal is to develop a directive that includes the ng-transclude value in the input field's value attribute within an HTML template: The directive I have created: module.directive('editInput', function(){ return { restrict: &a ...

Do not upload media after recording with getUserMedia

I am facing an issue with getUserMedia where I am unable to upload the video after recording. When I click the "Stop And Upload" button, I receive a null response. Can anyone provide assistance in resolving this? Thank you. Upon clicking the "Stop And Upl ...

Utilizing Multer with Node.js to seamlessly handle photo uploads

Currently, I am trying to upload some photos to my server by referencing my friend's code. However, when I console log the "req" (console.log(req)), the output is different from what I expected. More specifically, when I try to access req.file, it ret ...

Interactions with the mouse while using the window.alert and window.confirm features

Currently, I have developed a custom drag method that utilizes mousedown, mouseup, and mousemove events. This method is defined as move(). $(document).on('mousedown', function() {drag = true }); $(document).on('mouseup', function() {dr ...

Copy the style of a chosen element and apply it to another element

One of the challenges I'm facing involves a dynamic span element that changes based on color selection: <span class="color checked" style="background-color: #ff0000">Red</span> In addition, I have an image element wit ...

Aligning text vertically to the top with material UI and the TextField component

Seeking guidance on adjusting vertical alignment of text in <TextField /> const styles = theme => ({ height: { height: '20rem', }, }); class Foo extends React.component { ... <TextField InputProps={{ classes: ...

The combination of AngularJS, jQuery, mobile angular ui, and phonegap results in disappointment

I'm embarking on my first venture into mobile app development. I'll be utilizing AngularJS, Mobile Angular UI, jQuery, and PhoneGap for this project. Here is a snippet of my code: <!doctype html> <html> <head> <script s ...

What is the root property in an NPM package.json file?

Is there a way in the package.json file to define the starting point for module resolution? For instance, imagine we have an installation in node_modules/mypackage/src/file1. All the files we need to import are located under the src directory. Is it possi ...