CODEWITHSUNDEEP
javascriptthree.jscameragsapscrolltrigger
LM3ALLEM
LM3ALLEM

Reputation: 15

Camera rotates 7 times around its axis THREE.JS GSAP

Im making online gallery and I need to move camera on scroll.

The problem is when I trying to rotate it by Y axis its rotate 3 times around its axis and thats wrong!

Im trying do somthing similar like this https://virtual.plus-ex.com/showroom when you enter easy mode, camera moves and rotate automaticly.

Here's my pen https://codepen.io/lucas23456/pen/jOzpVYd

When trigger 4 passed it should look at wall with pictures

Upvotes: 1

Views: 262

Answers (1)

M -
M -

Reputation: 28502

The problem is that you're allowing the rotation range to be from [-100, 100] when adding the GUI:

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

Keep mind that Euler rotations are in radians, not in degrees, so there is a big difference. Going from 0-100 radians will actually spin the camera about 15 times!

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

You'll have to convert from degrees to radians with a simple equation:

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

Upvotes: 1

Related Questions