# \[React Three Fiber\] Tunnel tube with CatmullRomCurve3

**URL:** <https://discourse.threejs.org/t/react-three-fiber-tunnel-tube-with-catmullromcurve3/21277>\
**Category:** Questions\
**Tags:** react-three-fiber, geometry\
**Created:** [December 5, 2020, 4:45pm UTC](https://discourse.threejs.org/t/react-three-fiber-tunnel-tube-with-catmullromcurve3/21277 "2020-12-05T16:45:15Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Audreyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/audreyk/32/6334_2.png) [@Audreyk](https://discourse.threejs.org/u/Audreyk)\
**Post date:** [December 5, 2020, 4:45pm UTC](https://discourse.threejs.org/t/react-three-fiber-tunnel-tube-with-catmullromcurve3/21277/1 "2020-12-05T16:45:15Z")

</div>

Hi everyone!

I’m trying to create a tunnel tube with React Three Fiber. From the documentation, I’m understanding that I need to create a tube geometry + a curve with CatmullRomCurve3.

Here is the tutorial I am using as a base (using vanilla threejs):

> **[Infinite Tubes with Three.js | Codrops](https://tympanus.net/codrops/2017/05/09/infinite-tubes-with-three-js/)**
>
> Some WebGL experiments where the viewer seemingly travels through a textured tunnel. Powered by Three.js and inspired by the effect seen on fornasetti.com.

I’m having troubles translating this react-fiber, as I’m getting an error “Cannot read property ‘computeFrenetFrames’ of undefined”. Here is what I got so far:

> **[tunnel - CodeSandbox](https://codesandbox.io/s/tunnel-8ny2p?file=%2Fsrc%2Fcomponents%2FEnvironment%2Findex.js)**
>
> tunnel by AudreyKj using lodash, react, react-dom, react-scripts, react-three-fiber, styled-jsx, three

so I am having problems creating a tube based on the curve by CatmullRomCurve3.

any help would be appreciated!! Thank you!

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [December 6, 2020, 8:45am UTC](https://discourse.threejs.org/t/react-three-fiber-tunnel-tube-with-catmullromcurve3/21277/2 "2020-12-06T08:45:14Z")

</div>

you’re mixing up constructor args and named instance props:

```javascript
<tubeGeometry
  path={curve}
  tubularSegments={70}
  radius={0.02}
  radialSegments={50}
  closed={false} />

```

translates roughly to:

```javascript
const tube = new THREE.TubeGeometry()
tube.path=curve
tube.tubularSegments=70
tube.radius=0.02
tube.radialSegments=50
tube.closed=false

```

which is [invalid according to threejs docs](https://threejs.org/docs/index.html#api/en/geometries/TubeBufferGeometry), none of these properties exist. the correct way is

```javascript
<tubeGeometry args={[curve, 70, 0.02, 50, false]} />

```

which translates to:

```javascript
new THREE.TubeGeometry(curve, 70, 0.02, 50, false)

```

saw some other mistakes as well, fixed some of it: [https://codesandbox.io/s/tunnel-forked-swvwk?file=/src/components/Environment/index.js](https://codesandbox.io/s/tunnel-forked-swvwk?file=/src/components/Environment/index.js)

i added orbitcontrols to be able to zoom in, it does create a tube but your camera settings are too far away to see it.

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [December 6, 2020, 8:57am UTC](https://discourse.threejs.org/t/react-three-fiber-tunnel-tube-with-catmullromcurve3/21277/3 "2020-12-06T08:57:17Z")

</div>

another thing that was weird, the way you treat suspense. suspense awaits async components.

```javascript
import { Suspense } from "react"

function Foo() {
  const texture = useLoader(TextureLoader, url)
  return (
    <mesh>
      <meshBasicMaterial map={texture} />
   </mesh>
  )
}

function Fallback() {
  return (
    <mesh>
      <boxBufferGeometry />
   </mesh>
  )
}

function App() {
  return (
    <Suspense fallback={<Fallback />}>
     <Foo />
   </Suspense>
  )
}

```

the app component renders `Foo` but that component will suspend due to the useLoader. while it’s loading a fallback will be shown, a boxbuffergeo. the suspense must be outside the component that is async.

---

<div class="post-metadata">

**Author:** ![Audreyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/audreyk/32/6334_2.png) [@Audreyk](https://discourse.threejs.org/u/Audreyk)\
**Post date:** [December 6, 2020, 12:49pm UTC](https://discourse.threejs.org/t/react-three-fiber-tunnel-tube-with-catmullromcurve3/21277/4 "2020-12-06T12:49:12Z")

</div>

@drcmda thanks a lot for your help! I’ll edit my code!

---

<div class="post-metadata">

**Author:** ![Gislason](https://avatars.discourse-cdn.com/v4/letter/g/47e85d/32.png) [@Gislason](https://discourse.threejs.org/u/Gislason)\
**Post date:** [December 7, 2020, 9:56am UTC](https://discourse.threejs.org/t/react-three-fiber-tunnel-tube-with-catmullromcurve3/21277/5 "2020-12-07T09:56:21Z")

</div>

I had doubts about this when I saw it. When I tried it out I realized that writing threejs code declaratively was sooo nice. I don’t think I’d go back to using vanilla threejs SPAM LINK REMOVED