en App.jsx importar lo necesario

import { useState, useRef, useEffect, Suspense } from "react";
import "./App.css";
import{Canvas} from "@react-three/fiber"; //básico de importar
import gsap from "gsap"; //libreria para
import {ScrollTrigger} from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

también en la carpeta src crear un Scene.jsx

import React,{userRef,useEffect} from 'react'
import {useFrame} from '@react-three/fiber'
import { Environment, PerspectiveCamera } from '@react-three/drei'
import gsap from "gsap"; //libreria para
import {ScrollTrigger} from "gsap/ScrollTrigger";
 
gsap.registerPlugin(ScrollTrigger);
 

export const Scene = () => {
  return (
    <>
        <PerspectiveCamera fov={45} near={.1} far={1000} makeDefault position = {[0,0,10]}/>
        <Environment present="city" />

    </>
  )
}

Escena 3D

hay que crear un archivo Scene.jsx, aquí va todo lo del 3D: modelos (cada modelo en sí es otro archivo), camara, luces, hdri, etc. y este a su vez va en el Canvas
al principio importar esto

import React,{userRef,useEffect} from 'react'
import {useFrame} from '@react-three/fiber'
import { Environment, PerspectiveCamera } from '@react-three/drei'
import gsap from "gsap"; //libreria para
import {ScrollTrigger} from "gsap/ScrollTrigger";

agregar objetos 3D al proyecto

Para cada modelo se necesitan 2 archivos, por ejemplo un modelo 3D de un reloj, el que llamaremos "watch":

watch.glb

• siempre deben ir en la carpeta public
• hay que pasarlo por la página gltf.pmnd.rs, lo configuras y copias el código que te da en el .jsx

watch.jsx (no es necesario que lleve el mismo nombre que el glb)

• se hace referencia a este archivo dentro el canvas (que está en App.jsx)
• debes crearlo en la carpeta src o alguna subcarpeta dentro de esta

  EJEMPLO DE ESTRUCURA DE CARPETAS DE SOURCE
  src
  |-components //aquí van componentes generales como botones, layouts
  |-models //aquí van .jsx que representan modelos 3D
  

cosas que cambiar en el .jsx

//ESTE ES UN ARCHIVO DE EJEMPLO, NO ESTÁ COMPLETO PERO SIRVE PARA EXPLICAR
//hay que 

import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei' 

export function Watch(props) { //Aquí en vez de "Watch" poner el nombre que pones en el .jsx
  const { nodes, materials } = useGLTF('/apple_watch_ultra_2.glb') //Aquí asegurarse que esté bien escrito el nombre del glb
  return (
    <group scale={[35,35,35]} {...props} dispose={null}> //con la etiqueta scale puedes manipular la escala, en este caso lo puse 35 en todos los ejes
      <group name="USDRoot" scale={0.01}>
        <mesh
          name="NONHYSHLUQzoyez"
          castShadow
          receiveShadow
          geometry={nodes.NONHYSHLUQzoyez.geometry}
          material={materials.JSFaTttTQosHtdR}
        />
        
        ....
                <mesh
          name="AGCoudWoaDmiMRH"
          castShadow
          receiveShadow
          geometry={nodes.AGCoudWoaDmiMRH.geometry}
          material={materials.edhWAPEBZsqCLTg}
        />
      </group>
    </group>
  )
}

useGLTF.preload('/apple_watch_ultra_2.glb')	//Aquí asegurarse que está bien escrito el nombre del glb
        
        

Animación

funcionamiento

para empezar el progreso del scroll de la página (desde arriba hasta abajo) está normalizado de 0-1
luego en un timeline se meten diferentes animaciones una detrás de otra, por ejemplo 3 animaciones, cada una representa un 33% de progreso
luego se remapea el progreso del scroll para encajar en la animación que toque en el timeline
por ejemplo, si avanza 0.3, completará la primera animación, si sigue avanzando irá reproduciendo la segunda animación y así...

pasos

en App.jsx

function App() {
	const mainRef=useRef(null)
	const mainRef=useRef(null)

curva de blender a R3F

EN BLENDER
Por comodidad que sea una curva (en mi caso spline type: bezier) dentro de Blender, pero en el export necesita llegar como una malla, además de que debe de tener un grosor
Darle un bevel de 0.001 a la curva (con una curva normal o con GN)

EXPORTAR
SELECCIONAR TODO (o lo que quieras exportar)
export/gltf (Format: .gtfb binary)
Data/Mesh/apply modifiers