Text3D from Three Drei doesn't rotate

52 views Asked by At

I a problem with the components CurveModifier and Text3D. For some reason when Text3D is inside the CurveModifier component the text is generated upside down.This is what happen

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
          lineHeight={0.7} 
          letterSpacing={-0.05} 
          font={jsonFont} 
          height={0.2} 
          curveSegments={10} 
        >
          {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>

  );
}

I tried to apply rotation={[Math.Pi, 0, 0]} to it's container but just changes que direction of movement from left to right.

0

There are 0 answers