# Render Text3D inside CurveModifier

**URL:** <https://discourse.threejs.org/t/render-text3d-inside-curvemodifier/57044>\
**Category:** Questions\
**Tags:** react-threedrei, text, react-three-fiber\
**Created:** [October 15, 2023, 11:09pm UTC](https://discourse.threejs.org/t/render-text3d-inside-curvemodifier/57044 "2023-10-15T23:09:23Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mapache](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mapache/32/40973_2.png) [@Mapache](https://discourse.threejs.org/u/Mapache)\
**Post date:** [October 15, 2023, 11:09pm UTC](https://discourse.threejs.org/t/render-text3d-inside-curvemodifier/57044/1 "2023-10-15T23:09:23Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/1/6138b6f8449ae27cda0f81534be79a5befe99b2c.png)

Here is the code

```javascript
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>

  );
}

```

---

<div class="post-metadata">

**Author:** ![Usnul](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/usnul/32/2355_2.png) [@Usnul](https://discourse.threejs.org/u/Usnul)\
**Post date:** [October 16, 2023, 12:23am UTC](https://discourse.threejs.org/t/render-text3d-inside-curvemodifier/57044/2 "2023-10-16T00:23:11Z")

</div>

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:

```js
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.