How to rotate the camera - gsap

Questions
1

So I am trying to rotate the camera I am using orbit controls I am using gsap
I want to rotate it so basically it’s kind of like a birds eye view on the scene but for some reason the tween never starts using camera.rotation how ever if I use for example camera.position or controls.target the camera will move so I know there’s no error with the code anyways how can I rotate the camera so it’s looking ‘down’ here is a snippet that won’t work:

 gsap.to(camera.rotation, {
				duration: 3,
				
				y: 2.3,
				z:0.6,
				
				onUpdate: function () {
				
					//
				}
			} );

Any idea’s I can zoom and changing the position pretty easily but can’t seem to rotate for some reason…Thank you for reading.

2

Seems to work: three.js dev template - module - JSFiddle - Code Playground

Please update the live example to demonstrate the animation failure.

3

I have the same problem.
I can’t open this link https://jsfiddle.net/2v7bf85L/
Please, how did you solve it ?

4

This is the code from the fiddle:

var mesh, renderer, scene, camera, controls;

init();
animate();

function init() {

  // renderer
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
  document.body.appendChild(renderer.domElement);

  // scene
  scene = new THREE.Scene();

  // camera
  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(20, 20, 20);

  // controls
  controls = new OrbitControls(camera, renderer.domElement);

  // ambient
  scene.add(new THREE.AmbientLight(0x222222));

  // light
  var light = new THREE.DirectionalLight(0xffffff, 1);
  light.position.set(20, 20, 0);
  scene.add(light);

  // axes
  scene.add(new THREE.AxesHelper(20));

  // geometry
  var geometry = new THREE.SphereGeometry(5, 12, 8);

  // material
  var material = new THREE.MeshPhongMaterial({
    color: 0x00ffff,
    flatShading: true,
    transparent: true,
    opacity: 0.7,
  });

  // mesh
  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  gsap.to(camera.rotation, {
    duration: 1,
    y: Math.PI * 0.25
  });

}

function animate() {

  requestAnimationFrame(animate);
  renderer.render(scene, camera);

}
5

So this usage, when it comes to my code, it works but when I change it, it doesn’t work.

image
image989×564 27.6 KB

This is why I changed the rotation：

After dragging the model with DragControls and animating it with GSAP Position, I tried to face the model directly and found that there was always a wrong Angle. But when I use OrbitControls to rotate the model, I do the same thing, and it works

This is the effect.

1 Like