import old three.js element into react three fiber?

[nikolaigeorgie]

I'm migrating an old project to react-three-fiber...

Is it possible to create a jsx component out of THREE.js and declare it in react-three/fiber?

const OldBox = () => {
   const geometry = new THREE.BoxGeometry( 1, 1, 1 );
   const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
   const cube = new THREE.Mesh( geometry, material );
   return cube
}

import { Canvas } from '@react-three/fiber'
const App = () => {
   return (
    <Canvas>
       <OldBox />
       <mesh
      {...props}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
    </mesh>
    </Canvas>
  )
}

[CodyJasonBennett]

You could put existing scene objects into primitives, often done with things created outside of fiber from loaders:

<primitive object={myThreeObject} />

But a better way would be to wrap your objects into classes and extend them, that way you get to take advantage of the whole react lifecycle.

import { extend } from '@react-three/fiber'

class MyObject extends THREE.Mesh {
  constructor() {
    const geometry = new THREE.BoxGeometry(1, 1, 1)
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
    super(geometry, material)
  }
}

// register object as a native jsx element
extend({ MyObject })
<myObject />

https://docs.pmnd.rs/react-three-fiber/api/objects#putting-already-existing-objects-into-the-scene-graph