The camera completes seven full rotations around its axis using THREE.JS and GSAP

I'm currently working on an online gallery and I am having trouble with the camera movement when scrolling.

Whenever I try to rotate it along the Y axis, it ends up rotating three times around its axis which is not the desired behavior!

I am trying to achieve a similar effect like the one at this 

https://virtual.plus-ex.com/showroom
website where, in easy mode, the camera moves and rotates automatically.

You can check out my pen here: 

https://codepen.io/lucas23456/pen/jOzpVYd

The goal is for the camera to look at the wall with pictures once trigger 4 is passed.

javascriptthree.jscameragsapscrolltrigger

Answer №1

One issue that needs to be addressed is the rotation range specified in the GUI:

cameraFolder.add(camera.rotation, 'y', -100, 100)

It's important to remember that Euler rotations are measured in radians, not degrees. This means that setting a range from 0-100 radians will result in the camera spinning approximately 15 times!

Degrees Radians
360° Math.PI * 2 = ~6.28
180° Math.PI = ~3.14
90° Math.PI / 2 = ~1.57

To address this discrepancy, you can easily convert degrees to radians using the following equation:

camera.rotation.y = degrees * Math.PI / 180;

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

Is it normal for Tailwind animation to loop twice when transitioning between pages in Next.js?

I'm currently utilizing react-hot-toast for displaying alerts and animating them during page transitions. The animation involves a double fade-in effect when transitioning between pages. In my project, I've integrated tailwindcss-animate within ...

javascriptreactjsanimationnext.jstailwind-css

Encountering the ECONNREFUSED 127.0.0.1:3306 error message while trying to launch my node.js application

After launching my node.js application, I encountered the following error message: SequelizeConnectionRefusedError: connect ECONNREFUSED 127.0.0.1:3306 This is what I was trying to do: - create a user: CREATE USER 'main'@'localhost' ...

javascriptmysqlnode.jssequelize.js

The video is not displaying on the webpage when connected locally, but it appears when the source is a URL

Recently, while practicing some basic tasks on a cloud IDE called Goorm, I encountered an issue with displaying a video on a simple webpage. The EJS file and the video were located in the same folder, but when I set the src attribute of the video tag to "m ...

javascripthtmlnode.jsexpress

"Dynamic Axis Scaling in Bokeh: A Versatile Feature

I have a situation similar to the one discussed in this question on Stack Overflow, but with additional code examples. In my Django app, I've built a Bokeh chart that visualizes the times swam in competitive swimming events over time. The chart utiliz ...

javascriptpythondjangobokeh

I am currently studying react.js and struggling to comprehend how the deployment process for a react app functions

Will the server only serve the index.html file or is there a way for the client to run that html file as it's not a regular html file? Do I need a backend node to make it work? I'm having trouble understanding the entire process. Normally, a cli ...

javascriptreactjsreact-router

Unable to display Vue image within v-for loop

I'm facing an issue with rendering images from an array of objects. Even though the paths to the images are correct, the images are not displaying. I've been following a tutorial at which suggests specifying the image URLs as links. I've t ...

javascriptlistvue.jsrendering

Upon loading, the Carousel is visible instead of being hidden, which is contrary to its intended behavior

Any help would be greatly appreciated as I am struggling with creating a web page featuring tabs for "London, New York, Shanghai". The initial page displayed is the "welcome" page with the other tabs hidden on load. I successfully implemented a carousel f ...

javascripthtmlcsstailwind-cssdisplay

The class 'ConsoleTVsChartsCharts' could not be located

Attempting to implement Laravel charts using the package consoletvs/charts:6.*, Utilizing service providers ConsoleTVs\Charts\ChartsServiceProvider::class, With an alias: 'Charts' => ConsoleTVs\Charts\Charts::class, ...

javascriptphplaravelcharts

The body parser is preventing the NODE from loading on localhost

var express = require('express'); var app = express(); var bodyParser = require('body-parser'); //ISSUE LINE **app.use(parser.json);** /////////////// var todos = []; var nextTodoItem = 1; app.use(bodyParser.json); ap ...

javascriptnode.jsbashexpress

"Using version 4.2.6 of NodeJS, create a constructor that takes a literal object as a

Currently, I am using NodeJS v4.2.6 which unfortunately has an issue with Block-Scoped declarations not being fully supported yet. Due to certain constraints, I am restricted to this version and have resorted to including the "use strict"; line to prevent ...

javascriptnode.jsnpm

Incorporate a 'back' button in the tab content of vue-form-wizard

Currently, I'm working on implementing a vue form wizard from the repository: https://github.com/BinarCode/vue-form-wizard My challenge is to include a button in the second tab-content itself instead of having it placed in the footer. I attempted th ...

javascriptvue.js

Using the global value in a Javascript replace() function causes ng-bind-html to malfunction

When trying to utilize ng-bind-html alongside JavaScript's replace() function, everything works smoothly without using a global value in the replace(). However, as soon as I add something like replace(/test/g, 'TEST'), an error appears in th ...

javascriptangularjsreplaceng-bind-html

Exploring the wonders of retrieving JSON data in PHP through an Ajax request

A front-end developer is sending an array of data formatted as a JSON object using an Ajax call. The JSON object structure is shown below: { "name": " Test Name ", "image_url": "test URL", "include": [ "1" ], "dimension": [ null ], "media_type" ...

javascriptphpjqueryajaxjson

Is it possible to have a div set to close upon loading the page?

Is there a way to have the toggle function set up so that when the page loads, the div being toggled starts out closed? I don't want them to be visible until clicked on. Best regards, Joey <script type="text/javascript> $(document ...

javascriptjquerytoggle

Effective strategies for minimizing the bundle size of your NextJs application

Recently, I launched my first NextJS app and was surprised to see that the initial bundle size is around 1.5Mb, which seems quite large for me as a beginner in using Nextjs. I have shared an image of the yarn build and also my package.json. All the pages ...

javascriptreactjsnext.jsrendering

Is there a way to disregard the data returned from previous AJAX calls?

I've been wondering about a strategy for managing delayed AJAX data returns in a scenario where newer calls should take precedence over earlier ones. For instance, if a first data fetch initiated at 12:01:33 is delayed and comes back at 12:01;39, whil ...

javascriptajaxfetch

positioning a text input in the center instead of at the top of the page

Hello everyone, I am just starting out with HTML and I have a question. How can I make the Username: <input type="text" name="Username" style="- margin-top: 200px;"> appear in the center of the page instead of at the top? I've tried changing the ...

javascripthtml

I'm a newbie when it comes to working with streams, but I recently encountered a task that involves downloading a file from an FTP server and then sending it as a stream to an Azure storage

When trying to save data using the Azure stageblock method, I encountered an error stating that the body must be a string, Blob, ArrayBuffer, ArrayBufferView, or a function returning NodeJS.ReadableStream. It seems that FTP sends data in a writable strea ...

javascriptnode.jsftpazure-blob-storage

The .SVC file's generated Javascript proxy URL fails to function properly when used with SSL

The ASP.Net web site I have deployed in IIS 7.5 includes a file named Cart.svc, which is used for accessing JavaScript from the browser. While the JavaScript functions fine without SSL, enabling SSL causes it to stop working. Interestingly, removing the / ...

asp.netjavascriptwcf

Finding the number of ways to extract arrays with 7 elements from a larger array of 49 elements in Javascript

I have a task to create unique groups of 7 elements from an array of 49 and determine the number of possible outputs. For example: [A,a,B,b,C,c,D,d,E,e,F,f,G,g,H,h,I,i,J,j,K,k,L,l,M,m,N,n,O,o,P,p,Q,q,R,r,S,s,T,t,U,u,V,v,W,w,X,x,Y] The desired outputs are ...

javascriptarrays