Spin everything around, even the camera, without relying on the orbit controller in THREE.JS

My goal is to rotate everything on the scene, including the camera, when a specific condition is met.

The rotation should be seamless for the user, with the camera still showing the same view even though the objects have been rotated.

I want to ensure that the orbit controller functionality remains intact during this process.

I've encountered some challenges in achieving this. When attempting to rotate the cube without the user noticing, I faced difficulties in synchronizing the camera rotation.

For example, I want to maintain certain faces of the cube pointing in specific directions while rotating others unnoticed by the user.

Although my code works for one direction of rotation, it falters when applying the rotation in another direction due to complications with the camera's orientation.

How can I achieve this seamless rotation where the camera and objects move together harmoniously?

javascriptthree.js

Answer №1

To enhance your scene, consider creating a THREE.Group element and incorporating all elements such as your cube, camera, and lights into it. Once done, you can easily rotate the entire group.

var group = new THREE.Group();
group.add(yourCube);
group.add(yourLight);
group.add(yourCamera);
scene.add(group);
// later...
group.rotateN(90 * Math.PI / 180); // use any rotation function

Any additions to the group will follow its coordinate system while those added directly to the scene will adhere to the global coordinate system.

Subsequent rotations of the group will result in all internal elements rotating together, whereas objects in the scene will stay stationary.

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

Dynamic element substitution

Can you provide guidance on how to create a smooth transition in the height of a container based on the child element's height? Currently, my code does not include any animation effects. setTimeout(() => { document.getElementById("page1").st ...

javascriptcss

modify the class's CSS style

Hey there! I'm having an issue with my code snippet. My goal is to change the background color of both fields with the class 'navicon', as shown in the function fu(). However, it's not working as expected. Changing the color based on id ...

javascripthtmlcss

Images stored locally are not appearing in React JS applications

I'm currently exploring React JS and Material UI to develop a dynamic web application. I'm attempting to link a local image using 'url(${process.env.PUBLIC_URL})' but unfortunately, the image is not showing up for some unknown reason. ...

javascriptreactjsmaterial-ui

What is the best way to ensure an AJAX get-request waits for the page to finish rendering before providing a response?

I've been working on a Greasemonkey Script for a specific section of this website (Site1). Site1 offers various deals and discounts, and my script is designed to perform the following task: When a user visits an offer on Site1, the script checks with ...

javascriptjqueryajaxgreasemonkeytampermonkey

Which element is undefined in this scenario - the Event Object or the inputs?

While working on OTP verification in Reactjs, I encountered an error message when running my code: Error: Cannot read properties of undefined (reading 'value') import { useState, useEffect, useRef } from 'react' import '../src/ ...

javascripthtmlcssreactjsnext.js

Sharing object beyond ng-repeat loop

As someone who is new to AngularJs, I am currently working on implementing table filtering and deleting the correct object when the delete button is clicked. This is my previous implementation before filtering: $scope.rowIndex = -1; $scope.selectRow = fu ...

javascriptangularjsangularjs-ng-repeat

Waiting for a webpage to fully load with JavaScript in Selenium

I am facing an issue where I need to wait for the page to fully load before executing a certain action. It is important for me that the loading circle on the browser tab stops spinning before proceeding. The current Ajax function I am using does not work c ...

javajavascriptseleniumwebdriverselenium-chromedriver

Implementing a translucent overlay onto a specific HTML section using sidebar.js/jQuery

Searching for a way to enhance the functionality of my website using Sidebar.js, I came across an interesting feature on hypebeast.com. When you click on the three-bar icon, the main container section's opacity changes. How can I achieve this effect? ...

javascriptjquerycss

I'm looking for a creative JavaScript prototype example that can help illustrate the concept of prototypes. Can someone share an interesting sample with me

I've been trying to wrap my head around prototypes, but I just can't seem to grasp their purpose and function. Is there anyone who can provide a straightforward example (such as a collegeStudent object) that will clarify the fundamentals of proto ...

javascriptjqueryprototype

Whenever a click event is triggered, the Vue method is executed twice

Why is the set method being executed twice? Check the console when you click the star. Removing @click="set(rating)" results in no action, indicating it is not called elsewhere. http://jsfiddle.net/q22tqoLu/ HTML <div id="star-app" v-cloak> ...

javascriptvue.jsvuejs2

As soon as I closed the modal, I noticed that the checked inputs reverted back to

I am using checkboxes within a modal to narrow down my search results. However, I have encountered an issue where when I check multiple checkboxes and then close the modal, the checked inputs become unchecked. Every time I open the modal, I want the check ...

javascriptangularjscheckboxangular-strapangularjs-ng-checked

Is it possible to utilize the onError attribute for activating an HTML data-remodal-target?

I've been working on a new website and recently incorporated Remodal into it. When using data-remodal-target to trigger modals, I noticed that if there is an error like a missing image or stylesheet, the site may not function properly. I am looking fo ...

javascript

Is it possible to utilize MongooseArray.prototype.pull() in typescript?

A problem has arisen in Typescript at this specific line of code: user.posts.pull(postId); An error message I'm encountering states: Property 'pull' does not exist on type 'PostDoc[]' The issue seems to be related to the fac ...

javascriptnode.jstypescriptmongodbmongoose

Validation of dynamically generated name fields using radio button group

CODE: html <form id="myform" type="post"> <fieldset id="myid1"> <input id="entries_8490_burn_id_1" name="entries[8490][burn_id]" value="1" type="radio"/> <input id="entries_8490_burn_id_2" name="entries[8490][burn ...

javascriptjqueryhtmlradio-button

Issue with displaying the glyphicon-chevron on the carousel control

Currently, I'm in the process of incorporating a straightforward modal into my gallery design. I have a slide carousel positioned at the top of the page, while at the bottom, there are thumbnails of the gallery. While the slide carousel control butto ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to add a border around an image along with a button using VueJS?

I am struggling to link a button and an image in VueJS to display a border around the picture. While I can successfully display the border on the button, I am unsure how to extend it to the image as well. Vue.component('my-button', 'my-img& ...

javascripthtmlcssvue.jsvuejs2

Including a cancel button to close the open window

var messagebox = Ext.widget("messagebox", { target: grid, progressMessage: "Loading" }); The message box displayed above indicates the loading progress bar that appears when the download button is clicked. I am looking to incorporate a cancel button i ...

javascriptextjs

Pass the ID of a dynamic textbox element to a child window upon clicking a link

One of the challenges I'm facing involves a textbox labeled "Branch Code" that links a branch to a corporate card transaction. At times, there is a requirement to split a transaction among multiple branches. To facilitate this process, I am constructi ...

javascriptc#jqueryasp.netasp.net-mvc-5

Tips for eliminating one or multiple spaces preceding text in an input field

I implemented input field validation to detect empty fields, but then I discovered that someone could enter white space and still submit the form. Can anyone assist me in removing white space before text while still allowing space in the middle of the text ...

javascriptjquery

Having trouble with my Express.js POST request - it's not successfully sending data to the database

I am currently developing a website that involves using a basic post code with Express. When I try to access the localhost site by making a request (in this case localhost:3002/putElement), I receive the error message 'cannot GET /putElement'. I ...

javascriptnode.jsreactjsdatabaseexpress