Geometría de buffer circular longitud theta animada con GSAP y react-three-fiber.

14 Jun, 2023 Programación 0

Me gustaría animar mi ringBufferGeometry como en el ejemplo a continuación, pero me gustaría usar GSAP para animar esta ringBufferGeometry durante cierta cantidad de tiempo y luego detenerla cuando thetaLength sea igual a algún valor. Algo como en el ejemplo a continuación pero sin el uso de Math.sin().

https://stackoverflow.com/questions/44751130/three-js-ringbuffergeometry-update-thetalength

Esto es lo que quiero lograr (link a continuación), pero quiero detener la animación cuando llegue a la forma de triángulo completa.

https://jsfiddle.net/02oyunbj/1/

Mi código

importar React desde ‘react’
import ReactDOM from ‘react-dom’
import App from ‘./App’

function Container(props) {
return

}

ReactDOM.render(

,
document.getElementById(‘root’)
)

“ `

“ `
importar {useRef, useEffect} desde ‘react’
importar {Lienzo} de ‘@react-three/fiber’
importar {OrbitControls} de ‘@react-three/drei’
importar * como THREE desde ‘three’
import gsap desde ‘gsap’

export default function App() {
volver (

  <trianglering></trianglering>
</lienzo>

)
}

const TriangleRing = () => {
const triangleRingRef = useRef()

const parametersObj = {
innerRadius: 4,
outerRadius: 8,
thetaSegments: 1,
phiSegments: 30,
thetaStart: 1.55,
thetaLength: 0,
}
const parameters = [
parametersObj.innerRadius,
parametersObj.outerRadius,
parametersObj.thetaSegments,
parametersObj.phiSegments,
parametersObj.thetaStart,
parametersObj.thetaLength,
]

useEffect(() => {
console.log(triangleRingRef.current)
const triangleGeometry = triangleRingRef.current.geometry

gsap.set(triangleGeometry, {
  parameters: {...parametersObj, thetaLength: 0},
})
const tl = gsap.timeline({defaults: {ease: 'power3.inOut'}})
tl.to(triangleGeometry, {
  parameters: {...parametersObj, thetaLength: 6.3},
  duration: 4,
})

})
volver (

)
}

“ `

Enlace a sandbox:

davy.ai

June 14, 2023 at 1:38 pm

Para lograr esto, puedes modificar la función tl.to() para que tenga un callback que detenga la animación una vez que thetaLength sea igual al valor deseado. Aquí tienes un ejemplo de código que logra esto:

import { useRef, useEffect } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import * as THREE from "three";
import gsap from "gsap";

export default function App() {
  return (
    <canvas camera="{{" position:="" [0,="" 0,="" 15]="" }}="">
      <color attach="background" args="{["black"]}"></color>
      <orbitcontrols></orbitcontrols>
      <spotlight position="{[15," 15,="" 15]}="" angle="{0.3}" color="{"white"}"></spotlight>
      <trianglering></trianglering>
    </canvas>
  );
}

const TriangleRing = () => {
  const triangleRingRef = useRef();

  const parametersObj = {
    innerRadius: 4,
    outerRadius: 8,
    thetaSegments: 1,
    phiSegments: 30,
    thetaStart: 1.55,
    thetaLength: 0,
  };
  const parameters = [
    parametersObj.innerRadius,
    parametersObj.outerRadius,
    parametersObj.thetaSegments,
    parametersObj.phiSegments,
    parametersObj.thetaStart,
    parametersObj.thetaLength,
  ];

  useEffect(() => {
    console.log(triangleRingRef.current);
    const triangleGeometry = triangleRingRef.current.geometry;

    gsap.set(triangleGeometry, {
      parameters: { ...parametersObj, thetaLength: 0 },
    });
    const tl = gsap.timeline({
      defaults: { ease: "power3.inOut" },
      onComplete: () => {
        // Detiene la animación cuando alcanza la forma completa del triángulo
        if (parametersObj.thetaLength === 6.3) {
          tl.pause();
        }
      },
    });
    tl.to(triangleGeometry, {
      parameters: { ...parametersObj, thetaLength: 6.3 },
      duration: 4,
    });
  }, []);
  return (
    <mesh ref="{triangleRingRef}">
      <ringbuffergeometry args="{parameters}" name="TriangleRing"></ringbuffergeometry>
      <meshtoonmaterial side="{THREE.DoubleSide}" color="{0xffffff}"></meshtoonmaterial>
    </mesh>
  );
};

En el callback onComplete de gsap.timeline(), puedes verificar si thetaLength es igual al valor deseado, y si lo es, puedes pausar el timeline para detener la animación.

Ten en cuenta que como el valor thetaLength se actualiza dentro del objeto parametersObj, debes verificar el valor de parametersObj.thetaLength dentro del callback.

es.davy.ai

¿Tienes una pregunta?

Geometría de buffer circular longitud theta animada con GSAP y react-three-fiber.

Answer

davy.ai