"Rotation of loaded 3D objects using Three.js OBJ

I created a stick using the Three js editor, and after loading it with the code below, I was able to position it but not rotate it. The stick is composed of 4 meshes, so I assume I need to set up a rotation point, but I'm unsure how to do that.

My desired setup looks like this:

   x   -------

The 'x' represents where I want the stick to rotate around.

Can anyone offer assistance?

Thank you in advance!

var loader = new THREE.ObjectLoader();
loader.load("scene.json", function ( obj )
{
    stick =obj;

    scene.add( stick );
    stick.position.z = -9;
    stick.position.y = .4;
    stick.children[3].rotation.x(45);
});

Answer №1

It seems that you have an item with 4 offspring which are all in the form of meshes.

Object3D
  -Mesh
  -Mesh
  -Mesh
  -Mesh

To start off, my suggestion would be to move each child to its desired position and then rotate the main object.

for(var i=0; i<stick.children.length; i++) {
    stick.children[i].position.set(0, 0.4, -9); // or any other customized offset
}

stick.rotateX( 45 * Math.PI / 180 ); // it's crucial to use Radians for accurate rotation

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

Can the garbage collector in Typescript/JavaScript effectively handle circular references, or does it result in memory leaks?

When working in languages such as C#, managing memory is not a problem. However, this can lead to difficult-to-find memory bugs in other languages. Is it safe to use the following code snippet in Typescript or Javascript without encountering any issues? c ...

Using JavaScript to access the Skyscanner API yielded a response with the error message indicating that the 'Access-Control-Allow-Origin' header was missing

After implementing the Skyscanner Api to create a session, I received a 201 response indicating that the session was successfully created. However, my script encountered an exception which halted its execution: "No 'Access-Control-Allow-Origin' h ...

Angular2 Window Opener

Trying to establish communication between a child window and parent window in Angular 2, but I'm stuck on how to utilize window.opener for passing a parameter to Angular 2. In my previous experience with Angular 1.5, I referenced something similar he ...

Arranging xml information in chronological order using jQuery

I need help sorting and displaying date information extracted from a RSS feed. Can someone assist me with this? Thank you! $('#feedContainer').empty(); $.ajax({ type: 'GET', ...

What is the best way to ensure that my multiple choice code in CSS & JS only allows for the selection of one option at a time? Currently, I am able

I'm currently facing a small issue that I believe has a simple solution. My knowledge of Javascript is limited, but I am eager to improve my skills in coding for more visually appealing websites. My problem lies in the code snippet below, where I am ...

SignalR is exclusively accessible within the active SILO environment

Currently, I am working on a real-time application using SignalR in combination with MVC and AngularJS (SILO). Each cshtml page serves as a Single Page Application (SPA), and within my AngularJS common service, I have incorporated generic operations such a ...

Utilizing GCE API within my website

Currently, my goal is to retrieve GCE information in a read-only manner to showcase infrastructure data on my website. To achieve this, I aim to acquire an OAuth2 token using the JS API and then transmit it to a Python Backend for GCE API calls. It's ...

How to toggle classes in AngularJS using ng-class across various elements

I found a solution on this S.O. question to toggle a class using ng-click in AngularJS. Specifically, I am trying to show a Font Awesome closed folder icon when a list element is not clicked and an open folder icon when the list element is clicked within a ...

The specific model cannot be utilized for custom control within the ViewSettingsCustomItem

Exploring examples to enhance my SAPUI5 knowledge, I encountered an unusual behavior when utilizing the ViewSettingsDialog component with a ViewSettingsCustomItem filter. In my controller, I initiate the Dialog in this manner: onOrdersFilterPress ...

What is the best way to link a variable to the content of my HTML input using jQuery?

When working with a form that uses the post method, there is often a need to encrypt certain parameters using md5 before posting them in JavaScript. How can I bind these encrypted values to the form? Here is an example of an HTML form: <input id="sig" ...

Designing a basic JavaScript inventory system

I've recently received a code stub for an inventory object as part of my JavaScript module assignment. The task is to expand on it to create an inventory with methods for adding and removing items from an items array. I'm finding it challenging t ...

Hide the scrollbar on an iframe

I have been trying to modify the attributes of an iframe using javascript in the following way: var iFrame = window.top.document.getElementById('window_content'); iFrame.setAttribute("height","63"); iFrame.setAttribute("scrolling","no") ...

Repeated URL causes Node to redirect

I am currently working on a project that involves redirecting users if they enter a specific URL, especially for redirecting from a Heroku domain. During my testing phase on localhost, I noticed that the redirect URL keeps getting repeated: http://localh ...

When attempting to make an .ajax call within the select_node.jstree event for nodes that are not leaf nodes, the call is unsuccessful

When I make an AJAX call using $.ajax, everything works perfectly fine when the select_node.jstree event is triggered, except for non-leaf nodes. In this scenario, although the server receives the Ajax request and sends back the data, the success function ...

Determine the combined width of each child element and divide it by two

I am working on a div that has multiple children inside. To achieve a horizontal layout, I need to set a width on the parent div so that the content flows from left to right. Instead of having all items in one row, I want them to be split into two rows. Th ...

What is the best way to create an event listener that can identify when a boolean variable switches to true?

Let's say we have a variable var menu_ready = false;. We also have an ajax function that will change menu_ready to true once the ajax operations are completed: // code snippet to set up event listener $(...).load(..., function() { ... menu_r ...

Adjust an SVG text to fit perfectly within an SVG background rectangle

Inside this box are two SVGs: one for the text and one for the background rectangle. My goal is to make sure the text fits perfectly within the background rectangle without any stretching or overflowing. I don't want to break the text into multiple l ...

Deleting an element from its parent using JQuery

I have a message that displays "Try Again!" when the entered value exists in my dropdown select list. Below is the code I am currently using: //I want to remove this message once the user starts typing again: $('#new_day').on('input& ...

Execute a function multiple times within a loop

My task involves passing objects from an array to a function one at a time with a 1-second pause in between each item: async function CallingLabels() { if(id) { if(LabelNumbers) { LabelNumbers.forEach(async (Label) => { await ...

Embracing either dark or light mode

Can anyone give advice on how to integrate a feature like this onto my website? I've attempted to use plugins with no success. It doesn't need to be too complex. Does anyone have experience with this or know of a solution they could suggest? Alt ...