Camera moving with the custom shape curve or the CatmullRomCurve

Questions
, ,
1

I’m trying to make a animation movement in camera wherein it follow the circle (or ellipse) of the movement but it seems like it doesn’t work very well as I wanted to.

Basically here is the code

import { CubeCamera, Environment, EnvironmentCube, Lightformer, Line, OrbitControls, Stage } from '@react-three/drei'
import { Canvas, useFrame, useThree } from '@react-three/fiber'
import React, { useEffect, useMemo, useRef } from 'react'
import * as THREE from 'three'


function CatmullRomCurve() {

    const { camera } = useThree()
    const points = useMemo(() => new THREE.EllipseCurve(0, 0, 30, 30, 0, 2 * Math.PI, false, 0).getPoints(100), [])
    const numPoints = points.length

    useFrame(() => {
        const t = new THREE.Clock().getElapsedTime()
        const index = Math.floor(t * numPoints) % numPoints
        camera.position.copy(points[index])
        camera.lookAt(1,1,1)
    })

    return (
        <>
            <Line worldUnits points={points} color="turquoise" lineWidth={0.1} rotation={[Math.PI / 2, 0, 0]} />
        </>
    )
}

const Scene = () => {


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

    useEffect(() => {
        camera.fov = 40
        camera.position.set(15,4,0)
        camera.lookAt(0,0,0)
    },[camera])


    return <>
        <OrbitControls 
            args={[camera,domElement]} 
        />

        <color attach={"background"} args={[255,255,255]}></color>
        <fog attach={"background"} color={"white"}></fog>

        <group>
            <mesh
                receiveShadow
                castShadow
                scale={[1,1,1]}
                rotation={[Math.PI/2,0,0]}
            >
                <planeGeometry args={[10,10,32,32]}></planeGeometry>
                <meshStandardMaterial
                    roughness={0.3} 
                    metalness={0.3}
                    color={"white"}
                    side={THREE.DoubleSide}
                />
            </mesh>
            <mesh
                receiveShadow
                castShadow
                scale={[1,1,1]}
                position={[0,0.1,0]}
                rotation={[0,0,0]}
            >
                <boxGeometry args={[7,0.2,7]}></boxGeometry>
                <meshStandardMaterial
                    roughness={0.3} 
                    metalness={0.3}
                    color={"gray"}
                    side={THREE.DoubleSide}
                />
            </mesh>
        </group>

        <group position={[0,0,11]}>
            <mesh
                receiveShadow
                castShadow
                scale={[1,1,1]}
                rotation={[Math.PI/2,0,0]}
            >
                <planeGeometry args={[10,10,32,32]}></planeGeometry>
                <meshStandardMaterial
                    roughness={0.3} 
                    metalness={0.3}
                    color={"white"}
                    side={THREE.DoubleSide}
                />
            </mesh>
            <mesh
                receiveShadow
                castShadow
                scale={[1,1,1]}
                position={[0,0.1,0]}
                rotation={[0,0,0]}
            >
                <boxGeometry args={[7,0.2,7]}></boxGeometry>
                <meshStandardMaterial
                    roughness={0.3} 
                    metalness={0.3}
                    color={"gray"}
                    side={THREE.DoubleSide}
                />
            </mesh>
        </group>

        <CatmullRomCurve></CatmullRomCurve>

        <Environment preset='city'>

        </Environment>


    </>
}

const MainViewer = () => {
    return (
        <Canvas
        className='intro-canvas'
        shadows 
        dpr={[1,2]}
        gl={{antialias:true}}
        >
            <Scene></Scene>
        </Canvas>
    )
}

export default MainViewer

And as you see this code

function CatmullRomCurve() {

    const { camera } = useThree()
    const points = useMemo(() => new THREE.EllipseCurve(0, 0, 30, 30, 0, 2 * Math.PI, false, 0).getPoints(100), [])
    const numPoints = points.length

    useFrame(() => {
        const t = new THREE.Clock().getElapsedTime()
        const index = Math.floor(t * numPoints) % numPoints
        camera.position.copy(points[index])
        camera.lookAt(1,1,1)
    })

    return (
        <>
            <Line worldUnits points={points} color="turquoise" lineWidth={0.1} rotation={[Math.PI / 2, 0, 0]} />
        </>
    )
}

the camera is not working so you can just comment the whole code in the useFrame() function so you can see the camera position, but when I tried to copy the points of the circle it doesn’t work. Can anyone tell me how would this work?