Get position of orbit controls every time it moves

Questions
,
1

Hi, this just come’s to my mind. Does OrbitControls give a certain position set when I’m moving it?

I’m doing it in my r3f but it seems it likes not working.

Suppose this is the display in method

return (
    <>
            <OrbitControls ref={cameraRef} target={[0,0,0]} args={[camera,domElement]} />
    </>
)

and this is the functionality.

    const cameraRef = useRef()
    const {
        camera, gl:{domElement},
    } = useThree()

    useEffect(() => {
        camera.position.set(5,2,0)
    },[])

    useEffect(() => {
        console.log(cameraRef.current.position)
    },[cameraRef])

but it doesn’t seem it tracks the position of the OrbitControls. Anyone can help me through this?

2

Nvm I manage to solve it.

    const cameraRef = useRef()
    const {
        camera, gl:{domElement},
    } = useThree()

    useEffect(() => {
        camera.position.set(5,2,0)
        cameraRef.current = camera
        console.log("Camera",cameraRef.current.position)
    },[camera])

    useFrame(() => {
        if (cameraRef.current) {
            // console.log(cameraRef.current.position)
        }
    },[])

            <OrbitControls 
                ref={cameraRef} 
                target={[0,0,0]} 
                args={[camera,domElement]} 
                onUpdate={
                    () => {
                        // console.log(cameraRef.current?.position)
                    } 
                }
            />
3

Okay there is another error here.

I thought useFrame would be useful to use a getposition everytime orbit controls move but its not…Here is the code, can anyone help me? Thanks.

    const cameraRef = useRef(null)
    const {
        camera, gl:{domElement},
    } = useThree()

    useEffect(() => {
        camera.position.set(5,2,0)
        cameraRef.current = camera
        console.log("Camera",cameraRef.current.position)
    },[camera])

    useFrame(() => {
        // console.log(cameraRef.current.position)
    })

    useEffect(() => {
        console.log(cameraRef.current.position)
    },[cameraRef])

    let positions = useMemo(() => {
        if (cameraRef.current) {
            let pos = [
                {x:-2,y:0,z:0},
                {x:2,y:0,z:0},
                {x:0,y:2,z:0},
                {x:0,y:-2,z:0},
                {x:0,y:0,z:2},
                {x:0,y:0,z:-2}
            ].map(pos => 
                [
                    (cameraRef.current?.position.x - 5)+ pos.x, 
                    (cameraRef.current?.position.y - 2) + pos.y, 
                    (cameraRef.current?.position.z) + pos.z
                ]
            )
    
            console.log(pos)
            return pos
        }
    },[cameraRef])

And here is the display

            <OrbitControls 
                ref={cameraRef} 
                target={[0,0,0]} 
                args={[camera,domElement]} 
                // onUpdate={
                //     () => {
                //     } 
                // }
            />
            <color attach={"background"} args={[0,0,0]}></color>
            {/* Initializing Point Light Of the Box Created */}
            {/* This six point lights should follow where-ever the camera goes to make it look like 
                a normal map effect in lights
            */}
            {positions?.map((position, index) => {
                console.log(position)
                return (
                    <pointLight key={index} color={"white"} intensity="5" position={position} />
                )
            })}

As you see there is useFrame wherein I can see the updates in the cameraRef.position but I cannot pass it in my positions (x,y,z) and I don’t know why…I don’t understand, what I am missing here guys?

4

controls don’t move, they move the camera. you can access the camera everywhere but it would make most sense inside a useFrame. i don’t understand why you use references, useThree already gave you the camera, why sticking it into a ref? and useFrame has state, it contains the same state model as useThree.

useFrame((state) => {
  state.camera.positon

the calculation itself should be in useFrame, not useMemo, memo is for computations that execute when the component renders. useFrame executes every frame (120 times per second), so that’s what you need for animations.

im guessing you want the pointlights to animate, simple:

const lights = useRef()

useFrame((state) => {
  lights.current.children.forEach((light) => {
    // use lerp or damp for smooth animation towards a point
    light.position.lerp(state.camera.position, 0.1)
  })
})

return (
  <group ref={lights}>
      {Array.from({ length: count }, (_, index) => <pointLight key={index} color={"white"} intensity="5" />)}
5

Oh I already got my own solution sir but thanks for the feedback,

Here is my solution.

    useFrame((state) => {
        cameraRef.current = camera;
        if (cameraRef.current) {
            let pos = [
                { x: -2, y: 0, z: 0 },
                { x: 2, y: 0, z: 0 },
                { x: 0, y: 2, z: 0 },
                { x: 0, y: -2, z: 0 },
                { x: 0, y: 0, z: 2 },
                { x: 0, y: 0, z: -2 }
            ].map(pos => [
                (cameraRef.current.position.x - 5) + pos.x,
                (cameraRef.current.position.y - 2) + pos.y,
                (cameraRef.current.position.z) + pos.z
            ]);
            setPositions(pos);
        }
    });
6

if you want, read through this: React Three Fiber Documentation it might change your perspective. also the camera ref. you get the camera straight from useFrame(state, it looks like you’re passing values around for no reason there.

7

I don’t know hahaha, I thought camera is a constant that’s why I think it is not re-rendering hahaha…sorry for that I’ll keep that in my mind because useFrame is still confusing to me sometimes.

8

the camera is a THREE.Camera with which fiber renders out the scene. it is the same object throughout, unless you change it. useFrame just binds your component to the renderloop, it executes 120 times per second, this is the place you would want to use for interpolation/animation.