Help needed in moving and rotating the camera in React Three Fiber

Questions
, , ,
1

I am trying to move and rotate the camera in my scene so that it moves in front of the side that is facing the -x axis when the cube is clicked and back to its original position when clicked again. I tried doing it with TweenJS and Camera-Controls but I am unable to implement it. Any help would be great!

to-test-camera-controls - CodeSandbox?
file=/src/components/Cube.js:106-149

1 Like
2

you don’t need to insert a camera, canvas already has one, you can access it everywhere as

function Foo() {
  const camera = useThree(state => state.camera)

the problem you are facing is that you have two controls: orbit-controls whose job it is to pull on the camera, and gsap doing the same. when both pull at the camera it moves nowhere.

do you need to pull the camera itself or is it enough to move an object or a group? and if you use the camera, are you willing to give up orbit? if you can’t give up orbit you need to sync the two (orbit and gsap), for instance disabling orbit if gsap is pulling and vice versa.

1 Like
3

i tried it with gsap, hope it helps you !

import React, { useState } from "react";
import { useFrame, useThree } from "@react-three/fiber";
import * as THREE from "three";
import * as TWEEN from "@tweenjs/tween.js";
const clock = new THREE.Clock()
import { gsap } from 'gsap'

export default function Cube() {
  let isClick = false;
  const { gl, camera } = useThree();

  let oldPos  = {
    x: camera.position.x,
    y: camera.position.y,
    z: camera.position.z
  }

  useFrame((state, delta) => {
    const time = clock.getElapsedTime()

    if (isClick) {
      gsap.to(camera.position, {
        x: () => 0,
        y: () => 0,
        duration: 0.5
      }) 
    } 
    if (!isClick) {
      gsap.to(camera.position, {
        x: () => oldPos.x,
        y: () => oldPos.y,
        duration: 0.5
      })
    }
  });
  return (
    <>
      <mesh
        onPointerDown={() => {
          if (isClick === false) {
            oldPos = {
              x: camera.position.x,
              y: camera.position.y,
              z: camera.position.z
            }
            isClick = true
          }
        }}
        onPointerUp={() => isClick = false}
        position={[
          0,
          0.5,
          0
        ]} /*onClick={//Move Camera so that it looks at the face pointing to -x axis on clicking the cube}*/
      >
        <boxBufferGeometry args={[1, 1, 1]} />
        <meshNormalMaterial />
      </mesh>
    </>
  );
}
1 Like
4

So I was just testing it out on a cube, I actually want it look like something in the picture. Though I never thought that I could move the objects but I don’t know if its easier to move the camera or the whole scene. Like the three-js journey website, where you switch between the levels is the camera or the scene moving ?
I saw that camera-controls is like OrbitControls with some more features so that’s why I thought of using it.
Also, when the camera is looking at the whole scene there’s orbit but when its focused on the screen there’s no orbit.

Thanks for your comment.

Screenshot 2022-08-07 183044
Screenshot 2022-08-07 1830441203×422 39.5 KB

5

could get complicated fast, so you want something like constrained orbit but then it has to zoom to places. maybe try this:

this uses drei/presentationcontrols which moves the entire group instead of the cam, so you’re free to animate. otherwise i also have an example where it’s zooming towards objects using dfrei/bounds but i think it’s too loosely constrained for your case, although it does combine orbit with zooming (by syncing the two)

6

Thank you so much. Really appreciate it. One question though, I’ll be doing this movement for two cases and I was wondering if it’s like over-engineering by using a library like GSAP or is it okay to do so in the development world. Also can this be done with TweenJS as well ?

Thanks again.

7

Ah okay, thank you so much. I really need to learn this stuff. Do you cover things like these in your lessons by any chance ?

9

Thank you, I will considered it

10

I think TweenJS can make with but i haven’t try
Have you seen this?, even though its not r3f but i think it can solve your problem

https://www.youtube.com/watch?v=rxTb9ys834w&t=26776s

11

Yeah I have bookmarked this video but never thought it would help me. Also what are your thoughts about the over-engineering thing I mentioned.

12

Hi! I know it’s o long time since the initial discussion, but I’m trying to get the exact same result and I’ve been struggling for a while. Did you manage to do it in the end? If yes, how? :grinning:

13

using camera-controls
https://codesandbox.io/p/sandbox/enter-portals-9m4tpc?file=%2Fsrc%2FApp.js

using position and quaternion

1 Like