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.