[React Three Fiber] Tunnel tube with CatmullRomCurve3

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):

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:

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

any help would be appreciated!! Thank you!

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

  closed={false} />

translates roughly to:

const tube = new THREE.TubeGeometry()

which is invalid according to threejs docs, none of these properties exist. the correct way is

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

which translates to:

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

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.

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

import { Suspense } from "react"

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

function Fallback() {
  return (
      <boxBufferGeometry />

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

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.

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

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

1 Like