Render Text3D inside CurveModifier

Questions
, ,
1

I’m trying to make an animation using the component CurveModifier from Drei but for some reason the component Text3D is generated upside down. I tried to use the prop rotation={[0, Math.Pi, 0]} but just changes the orientation of the spin.
This is what happen:

Captura de pantalla 2023-10-11 210815
Captura de pantalla 2023-10-11 210815733×497 13.3 KB

Here is the code

import React, { useMemo, useRef } from "react";
import { CurveModifier, Line, Text3D } from '@react-three/drei'
import { useFrame } from "@react-three/fiber";
import * as THREE from "three";


export default function ThreeAdapt(){
  const jsonFont = "/helvetiker_bold.typeface.json";
  const text = 'Frontend';

  const curveRef = useRef();
  const sizePoints = [0.2, 0.2, 0.2];
  const curvedPoints= [
    new THREE.Vector3(-1.5, 0, 1.5),  //Front left cube
    new THREE.Vector3(-1.5, 0, -1.5), //Back left cube 
    new THREE.Vector3(1.5, 0, -1.5),  //Back right cube
    new THREE.Vector3(1.5, 0, 1.5),   //Front right cube
  ];

  const curve = useMemo(() => new THREE.CatmullRomCurve3(curvedPoints, true, 'centripetal' ), [curvedPoints]);
  const points = curve.getPoints(50);


  useFrame( ()=> {
    if (curveRef.current) {
      curveRef.current.moveAlongCurve(0.001);
    }
  });

  return (
    <mesh >
      <CurveModifier curve={curve} ref={curveRef}>
      <Text3D font={jsonFont}  >
          {text}
          <meshNormalMaterial/>
      </Text3D>

      </CurveModifier>
      <Line points={points} lineWidth={2} color={"white"} />


      <mesh position={curvedPoints[0]}>
        <boxGeometry args={sizePoints} />
        <meshNormalMaterial/>
      </mesh>

      <mesh position={curvedPoints[1]}>
        <boxGeometry args={sizePoints} />
        <meshNormalMaterial/>

      </mesh>

      <mesh position={curvedPoints[2]}>
        <boxGeometry args={sizePoints} />
        <meshNormalMaterial/>

      </mesh>

      <mesh position={curvedPoints[3]}>
        <boxGeometry args={sizePoints} />
        <meshNormalMaterial/>
      </mesh>
    </mesh>

  );
}
2

I believe you are a victim of tangent initialization. When you define a curve - it doesn’t have up or down. So the curve interpolator has to guess. The guess ends up poorly for you.

My suggestion is to reverse the order of the points, like so:

const curvedPoints= [
    new THREE.Vector3(1.5, 0, 1.5),   //Front right cube
    new THREE.Vector3(1.5, 0, -1.5),  //Back right cube
    new THREE.Vector3(-1.5, 0, -1.5), //Back left cube 
    new THREE.Vector3(-1.5, 0, 1.5),  //Front left cube
  ];

This should flip the initial tangent guess by 180 degrees.

2 Likes