Is there a way to adjust the pivot point of the object's rotation?

I have incorporated a 3D hamburger model on my website using Three.js. However, I am facing an issue where the rotation behaves unexpectedly. The burger is supposed to rotate around itself at a 45-degree angle, but instead, it rotates from the upper left corner. How can I rectify this and make it rotate properly?

Currently, when the burger rotates, it does so around the upper left corner instead of rotating around the middle of the bread as intended. It should rotate along the y-axis while maintaining the center point. Here is a visual representation of the issue: https://i.sstatic.net/TO6o0.gif

javascriptthree.jsthreejs-editor

Answer №1

The origin point of your hamburger model is not centered within its Axis Align Bounding Box.

To keep the burger geometry unchanged, you can connect it to an empty group with a local position set to the necessary offset. This will make the burger's pivot point appear at its visual center or any desired center point. Instead of directly adjusting the burger, you can now modify the parent group.

const burgerGroup = new THREE.Group();
burgerGroup.add(yourBurgerModel);
yourBurgerModel.position.x = 456; // Custom defined offset
yourBurgerModel.position.y = 456; // Custom defined offset
yourBurgerModel.position.z = 456; // Custom defined offset
scene.add(burgerGroup);

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

Node.js captures the Promise and provides detailed feedback

As I embark on my journey with Node.js + Express, currently in the process of structuring my HTTP APIs, I have a controller that utilizes a specific pattern: my_controller.js 'use strict'; var AppApiFactory = function (express, appService) { ...

javascriptnode.jsexpresspromise

Are there any alternative approaches to handling frequent database updates in web development aside from using Websockets/AJAX for coding?

Currently, I'm in the process of developing an HTML and Javascript game and looking to implement a feature that displays the player's gold balance on the screen. The goal is to have this balance decrement by 1 every time the player clicks on a sp ...

javascripthtmlsqlajaxwebsocket

Tips for saving a JavaScript function in JSON format

Looking to store a JS object in Local Storage for future reference, but struggling to convert it to a string. Here’s the code: JSON.stringify({ x: 10, y: function (input) { return input; } }) As a result, I get: "{"x":10}" Any su ...

javascriptjson

Leveraging JavaScript and Thymeleaf to manipulate a list

I am trying to access an object from a list in JavaScript, which is being passed from the controller. Currently, I am working with Thymeleaf and Spring Boot. The list is named ${collaborateurs}. The following code snippet is functional: <script th: ...

javascriptjqueryspringthymeleaf

Exclude a variety of keys using wildcards or regex when conducting comparisons

How can I exclude certain properties in a JSON object that contain specific characters? var obj1 = {name: "James", age: 17, creation: "13-02-2016", deletion: "13-04-2016", foo_x:"", foo_y:"", foo_z:""} var obj2 = {name: "Maria", age: 17, creation: "13-02- ...

javascriptjsonunderscore.js

Displaying JSON data in HTML proves to be a challenge

I have collected JSON data and organized it into two arrays, then displayed it in JSON format. Now I'm trying to showcase this data in HTML using two loops by correlating the IDs of one array with the userIds of another array. {"personaldetails":[{"i ...

javascriptphpjqueryhtmljson

Error: The property 'scrollIntoView' cannot be read because it is null

class MessageApp extends Component { constructor(props) { super(props) this.state = { text: "", messages: [] } } componentDidMount() { const config = { apiKey: "<api-key>", authDomain: "<projec ...

javascriptreactjs

Challenges with browsing navigation in Selenium WebDriver

Recently, I began my journey of learning selenium WebDriver. In an attempt to automate the task of logging into an account using the Firefox browser, I encountered a discrepancy. Manually opening the browser and clicking on the login link from the homepag ...

javascriptjavaseleniumselenium-webdriverautomated-tests

Preventing SQL Injection by properly formatting SQL queries

In my Node.js application, I need to construct an SQL query that looks like the one shown below. SELECT * FROM my_table WHERE my_column IN ['name1','name2'] The user inputs an array, such as ['name1', 'name2'], whic ...

javascriptsqlnode.jspostgresqlsql-injection

Can you notify all channels when the discord bot experiences a crash?

Is there a way to have my discord bot send a message in a specific channel when it crashes, similar to what I've seen with other bots? ...

javascriptnode.jsdiscord.js

Vue.js2 - Detection of Observer in Array

A question for beginners in vue.js. I am trying to display data using the CanvasJS Library that is received via websocket. Everything works fine with the data until I introduce vue components into the mix. Let me clarify: export default { data() { r ...

javascriptvue.jsvuejs2

The type '{ children: Element[]; }' does not include the properties 'location' and 'navigator' that are present in the 'RouterProps' type

Struggling to implement React Router V6 with TypeScript, encountering a type error when including Routes within the `<Router />` component. The error message indicates that the children property passed to the Router is of an incorrect type, despite u ...

javascriptnode.jsreactjstypescriptreact-router-dom

Having trouble with Instafeed JS loading?

I am currently experimenting with instafeed.js, but I am encountering difficulties getting it to load on a basic bootstrap page. While everything else on my page loads successfully, this particular container remains empty without any Instagram code presen ...

javascriptbootstrap-4instafeedjs

Pass data from a JavaScript function to Objective-C in Xcode by returning an array

How can I retrieve an array of strings from Javascript in my iPhone app code? I am calling a Javascript function, and once it completes, I need to send the array of strings back to the Objective-C code. What is the best way to return the array and how can ...

javascriptiphonexcodearrays

SonarLint versus SonarTS: A Comparison of Code Quality Tools

I'm feeling pretty lost when it comes to understanding the difference between SonarLint and SonarTS. I've been using SonarLint in Visual Studio, but now my client wants me to switch to the SonarTS plugin. SonarLint is for analyzing overall pr ...

javascriptangulartypescriptsonarqubesonarlint

Tips for setting environmental variables to match ID values in html documents

In my API reference call, I have stored the key in a separate file and protected it using .gitignore since I am using GitHub. However, I am facing an issue on how to transfer that key from my JavaScript file into the HTML data-key attribute using a variab ...

javascripthtmlapigithub

Changing the context results in the entire component being re-rendered

Currently, I am encountering a challenge where I have two different components within my Layout.js component that need to "share" props with each other. To address this issue, I introduced a ContextProvider named IntegrationProvider. However, a new proble ...

javascriptreactjs

Using NextJS to render a Link component by creating an element

Struggling to use createElement in NextJS to render a Link, but facing issues. Code: import {createElement} from "react"; import Link from "next/link"; createElement( item.href ? Link : "div", { href: item.hre ...

javascriptreactjsnext.js

Navigate to the next page in Angular ui-grid when the down key is pressed on the last row of the grid

Is there a way to navigate to the next page if the down key is pressed in the last row of the grid? const gridScope = angular.element(document.getElementById("MainWrap")).scope(); gridScope.gridApi.pagination.nextPage(); What is the best method to detect ...

javascriptangularjsui-grid

What is the best way to display an HTML page located in a subfolder with its own unique stylesheets and scripts using Express and Node?

I am looking to display an HTML page that is located within a subfolder along with its own unique style-sheets and scripts. I am using Express and Node for this purpose, and have already acquired a separate login page that I would like to render in a sim ...

javascriptnode.jsexpress