[React Three Fiber] Tunnel tube with CatmullRomCurve3

Questions
,
1

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!

2

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

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

translates roughly to:

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, 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.

3

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 (
    <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.

4

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

5

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