Updating the rotational pivot of an object following a positional shift

After moving my object with the "w" key and then rotating it with the "x" key, I noticed that my object rotates around the world origin instead of its own center. How can I update the object's pivot after moving it? I've come across suggestions to use geometry.center(), but unfortunately, that solution doesn't seem to work for me.

var tMatrix = new THREE.Matrix4()
var radian = 5*Math.PI/180
function keyDown(event){

    if(event.key == 'x'){
        r5 = Math.cos(radian);
        r6 = -Math.sin(radian);
        r8 = Math.sin(radian);
        r9 = Math.cos(radian);
        tMatrix.set( 1, 0, 0, 0,
                    0, r5, r6, 0,
                    0, r8, r9, 0,
                    0, 0, 0, 1 );
        mesh.applyMatrix4(tMatrix);

    }

    if(event.key == 'w'){
        tMatrix.set( 1, 0, 0, 0,
                    0, 1, 0, 1,
                    0, 0, 1, 0,
                    0, 0, 0, 1 );
        mesh.applyMatrix4(tMatrix);

    }
}


var pivot = new THREE.Object3D();
let loader = new THREE.STLLoader();
var material = new THREE.MeshLambertMaterial({color: 0x818181});

loader.load('STL/test.stl', function (geometry) {
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
});

window.addEventListener("keypress", keyDown);

Answer №1

After careful consideration, I devised a solution to the issue by capturing the object's initial position, rotating it, and then reverting back to its original coordinates using a new matrix.

if(event.key == 'x'){
    initialX = mesh.position.x;
    initialY = mesh.position.y;
    initialZ = mesh.position.z;

    rotate5 = Math.cos(radian);
    rotate6 = -Math.sin(radian);
    rotate8 = Math.sin(radian);
    rotate9 = Math.cos(radian);
    transformationMatrix.set( 1, 0, 0, 0,
                0, rotate5, rotate6, 0,
                0, rotate8, rotate9, 0,
                0, 0, 0, 1 );
    mesh.applyMatrix4(transformationMatrix);
    mesh.position.set(initialX, initialY, initialZ);
}

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

Examining Resolver Functionality within NestJS

Today I am diving into the world of writing tests for NestJs resolvers. I have already written tests for my services, but now it's time to tackle testing resolvers. However, I realized that there is a lack of documentation on testing resolvers in the ...

Learn how to properly convert a string into a valid URL using the Next JS router when pushing pages

I'm dealing with a string that looks like this: /dashboard/products/:id. My goal is to utilize Next Js's router to navigate to that URL and replace the placeholder :id with an actual id. Here's the code I've written: {products.map(prod ...

I encountered a problem with the Javascript toggle menu collapsing feature

I have built a custom toggle menu using Javascript: $(document).ready(function() { $('.toggle').click(function () { if ($(this).hasClass("expanded")) { $(this).next().slideUp("fast"); } else { $(&apos ...

Using jQuery, you can utilize the $.when() function with both a single deferred object and an

In my current jquery setup, I am working with two variables. trackFeatures - representing a single ajax request, and artistRequests - an array of ajax requests. I am looking for a way to create a condition that triggers when both trackFeatures and artist ...

The UI does not reflect changes to the scope variable after it is updated by a service call

When I add a new item to the scope from another service, the select tag options that come from the service do not reflect the newly inserted value immediately. The new option only appears after refreshing the page. It seems like the scope is not updating t ...

Is there a way to prevent users from dropping links or images into an input field

Is there a way to prevent users from dropping links or images into an input box? I'm open to using JavaScript or jQuery. Here is what I have attempted so far: http://jsfiddle.net/eRqzz/ $("input#fl_search, input#fl_search_bdy").on('drop', ...

Acquire URL Parameters Passed by JQuery when Using .load()

I am currently unsure if my approach is feasible or if I am on the right track with what I am attempting to accomplish. There are instances where I would like to have a GET parameter included in the URL. I would like the receiving page to be able to distin ...

Changing the slider based on the format of the price and user input value

Is there a specific place where I should use the .toFixed(2) method to ensure fixed formatting for my range slider output? For example, transforming 1.9 to 1.90 or 2 to 2.00. Additionally, is it feasible to have an input field where the user enters a pri ...

Error: The 'inputValue' property in the Select component of antd is malfunctioning

Currently, I am utilizing the antd library's Select component (version v3.23.1) with the mode="multiple" setting. I have observed that when I type in the search field within the Select component and then click outside of it, the searched text gets cle ...

Vertical menu causing problem with smooth scrolling link effect

Currently, I am facing an issue with a template and trying to resolve it. The problem lies with the highlighting effect on the navigation menu, which only seems to work on a reduced browser height. When I resize the window to full screen and scroll down to ...

Implementing a Javascript solution to eliminate the # from a URL for seamless operation without #

I am currently using the pagepiling jQuery plugin for sliding pages with anchors and it is functioning perfectly. However, I would like to have it run without displaying the '#' in the URL when clicking on a link like this: www.mysite.com/#aboutm ...

Unable to backtrack once a response has been sent

My Express application keeps crashing after sending a response to the client. It appears that the code continues to run even after the response has been returned. Can you please review the code snippet provided below? const EditUser = async (req, res) => ...

`Error: Unresolved reference to Angular service`

I'm encountering an issue in my Ionic/Cordova application where I am trying to implement a loading message using $ionicLoading, but I keep getting the error: ReferenceError: $ionicLoading is not defined Does anyone know how I can successfully pass $ ...

Loading images ahead of time - JQuery

Currently, I am utilizing a Kinetic.Layer to import images into a canvas. One issue I am encountering is when I click a print button, it retrieves images from another file and presents them on a white page for printing. The first image consistently loads, ...

Tips for effectively reusing the modal component in Vue.js without encountering re-render issues

I'm encountering an issue where the same component content is being rendered despite having different components (Rendering problem). I have a reusable modal component called modal.vue, so every time I create a new component, I call the modal compone ...

Populating a drop-down menu with data from a JSON file using dat.gui

I am currently working on a drop-down menu using JavaScript. Below is the content of my JSON file: { "bg1":"assets/bg/people_bg.jpg", "bg2":"assets/bg/people_bg.jpg" } My goal is to assign the names bg1 and bg2 to the backgrounds in the dropdown menu, ...

What is the best way to show an array within a string using javascript?

Take a look at this code snippet : const names = ["Alex", "John", "Kit", "Lenny"]; for(let i = 0; i < 4; i++) { $("body").append("<p>" + names[i] + "</p>'); }; Can you figure out how to dynamically add each item in the 'names&a ...

JavaScript: A pair of radio button selections

I'm facing an issue with a short form that has two questions and radio buttons for answers. When the first question is answered "No," I used JS code to disable options for the second question, which works fine. However, if the answer is changed back t ...

Implementing Bootstrap tooltips in content that can be scrolled

I need help with positioning two containers, which you can view in this FIDDLE. Both containers may contain a lot of content, so I have applied overflow: auto to both of them. This is the HTML structure: <div id="maincontainer"> <d ...

Error message saying 'Callback has already been invoked' returned by an async waterfall function

I'm facing an error that I understand the reason for, but I'm unsure how to resolve it. Here's a breakdown of my initial function: Essentially, I am making a get request for all URLs stored in the database and then, for each URL response, I ...