Three.js - Exploring Camera Rotation and Transformations

I have a three.js scene where I can add and edit objects. Recently, I added a checkbox for "Rotate Camera" which is working well. However, the issue I am facing is that the transformControls attached to the object seem to rotate differently: when I stop the rotation, the controls are displaced in comparison with the object. Here is my function:

function enableCameraRotation() {
        "use strict";
        return {
            ROTATE_ON_Y_AXIS : false
        };
    }
    var rotationSettings = enableCameraRotation();

My GUI.DAT button:

guiCamera.add(rotationSettings, 'ROTATE_ON_Y_AXIS').name('Enable Rotation');

And my animate() function:

function animate() {
    requestAnimationFrame( animate );
    THREE.AnimationHandler.update( 0.05 );
    if (rotationSettings.ROTATE_ON_Y_AXIS) {
        scene.rotation.y = (scene.rotation.y + 0.005 * 4)  % (Math.PI * 2);
    }
    renderer.render( scene, camera );
    update();
}

Can anyone help me identify where the problem lies?

Answer №1

After some tweaking, I managed to fix my if statement within the animate() function as shown below:

if (rotationOption.ROTATION_Y_AXIS) {
    var timer = Date.now() * 0.0001;

    camera.position.x = Math.cos( timer ) * 200;
    camera.position.z = Math.sin( timer ) * 200;
    camera.lookAt( scene.position );

    renderer.render( scene, camera );
}

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

"Want to know the best way to retrieve the most recent form input value using jQuery or Javascript

I've been reading a lot about using jQuery to set and get field values, but I'm encountering an issue where I can't retrieve the value after submitting, editing it in an input field, and then submitting again. It works the first time, but no ...

The ReactJS code encountered an error when attempting to access the 'location' property of an undefined or null reference

My Reactapp is encountering an error due to a specific file. import React from 'react'; import { Router, Route } from 'react-router'; import App from './components/App'; import About from './components/About'; im ...

Exploring the capabilities of Angular's ngResource library and how it

Currently, I am developing a Twitch app and instead of using $http, I opted for ngresource to explore new possibilities. However, I encountered an issue with the offline tab where the users are visible but their logo or username is not displayed. This happ ...

Is it possible to make a shape remain visible in Three.js, even when it's obstructed from view?

   I want to ensure that a specific set of objects remain visible at all times, even if they are obscured by other objects. These objects are in mesh form, not particles or sprites. Here is an image showing the effect I am aiming for, which was achieved ...

IE8 does not show AJAX response right away

I have encountered a peculiar problem with the code below. In Internet Explorer 8, the content retrieved through xmlHttpRequest does not appear immediately after clicking the link. It only displays after moving the mouse or cursor following the click. < ...

Experiencing incorrect outcome when using the Number.isInteger() function in JavaScript

I have been experimenting with the Number.isInteger() method on the Chrome console. After running a for loop and checking the result using console.log(arr);, I noticed that the array only contains a single value of 1, like this: [1]; var arr = [1, 2, 3, ...

Understanding the significance of an exclamation point preceding a period

Recently, I came across this code snippet: fixture.componentInstance.dataSource!.data = []; I am intrigued by the syntax dataSource!.data and would like to understand its significance. While familiar with using a question mark (?) before a dot (.) as in ...

Setting up numerous instances of TinyMCE for use

I am having trouble initializing two instances of tinymce on my webpage. Even after following the guidance provided in this particular thread, I am unable to get it working. Could it be possible that I need to introduce a timeout between initializing the ...

JavaScript button mouse enter

There seems to be an issue with this code. The button is not functioning properly after hovering over it, even though it was copied from the instructional website where it works fine. <html> <head> <title>Button Magic</t ...

Troubleshooting issue with ng-value in Ionic framework and AngularJS not

I'm facing an issue with an ng-value assigned to an input field. I want to pass the userID to the input field so it can be submitted when the form is clicked. Below is the HTML code snippet: <div ng-repeat="chats in chat"> <form ng-su ...

Improving Performance When Handling Multiple Events with Socket.io

Exploring socket.io event handling. Which is the more effective approach: socket.on('message', function (message) { if(message.message1) { // perform action } else if (message.message2) { // take alternative action } else ...

Change the controller's classes and update the view in Angular

In my angular application, I have a popup window containing several tabs. These tabs are styled like Bootstrap and need to be switched using Angular. The code for the tabs is as follows (simplified): <div class="settingsPopupWindow"> <div> ...

Can you identify the reason for the hydration issue in my next.js project?

My ThreadCard.tsx component contains a LikeButton.tsx component, and the liked state of LikeButton.tsx should be unique for each logged-in user. I have successfully implemented the thread liking functionality in my app, but I encountered a hydration error, ...

Tips for retrieving values from numerous checkboxes sharing the same class using jQuery

Currently, I am struggling with getting the values of all checkboxes that are checked using jquery. My goal is to store these values in an array, but I am encountering difficulties. Can anyone provide me with guidance on how to achieve this? Below is what ...

Using SASS variables in JavaScript: A guide

My JavaScript file contains a list of color variables as an Object. export const colors = [ { colorVariable: "$ui-background" }, { colorVariable: "$ui-01" }, { colorVariable: "$ui-02" }, ... ] The Object above is derived from a scss file whic ...

Tips for selecting each item from an array in their own sequence? (using jQuery and JavaScript)

Here's my code: I've come to understand that my for loop assigns all array elements to the variable pickSound, hence it only plays the last element. How can I modify it so that each element plays in order and starts over once finished? functio ...

What is the reason onbeforeunload does not fire requests in Safari browser?

Is there a way to ensure that data is saved to the database when a user interacts with the page and also when they refresh it? I have tried using onbeforeunload event, but Safari does not wait for the server request to finish before reloading the page, c ...

Guide to moving a three-dimensional object using the "WASD" keys within a mapbox setting

I am currently working on animating my 3D object within a scene created in Mapbox. To achieve this, I have implemented a custom layer using Three.js, as demonstrated in the following code snippet: var map = action.map; var orign = { lo ...

When hovering over a select option, a description and clickable link will be displayed

I need to display a description with a clickable link when hovering over any option in the select tag. <div class="col-lg-4"> <div class="form-group"> <label class="form-label">Goal</label> <select name="semiTaskType ...

Obtain offspring from a parent element using jQuery

$(document).ready(function() { $.ajax({ type: "POST", url: 'some/url', data: { 'name':'myname' }, success: function (result) { var result = ["st ...