TSL in React Three Fiber

Questions
1

Hello folks, I’m having trouble getting R3F to play nicely with NodeMaterials.

I use: import * as THREE from "three/webgpu"

Then I extend the material like this:
extend({ MeshPhongNodeMaterial: THREE.MeshPhongNodeMaterial });

But any form of <meshPhongNodeMaterial color="pink" />

Results in: chunk-FPFMJI6N.js?v=0b37eb67:16845 Uncaught TypeError: Cannot read properties of undefined (reading 'replace')

hopefully, this is a simple issue. I’ve seen some use of these materials elsewhere but for the life of me cannot figure out how to get from import to usage.

Any ideas, gratefully received.

B

2

Okay, not sure entirely why but this does work:


import * as THREE from 'three/webgpu'
import * as TSL from 'three/tsl'
import { Canvas, extend, useFrame, useThree } from '@react-three/fiber'
import ReactDOM from 'react-dom/client'


const root = ReactDOM.createRoot(document.querySelector('#root'));
extend (THREE)      
root.render(

   <Canvas
    gl={async (props) => {
      const renderer = new THREE.WebGPURenderer(props)
      await renderer.init()
      return renderer
    }}>
      <mesh>
        <meshBasicNodeMaterial color="red"/>
        <boxGeometry />
      </mesh>
  </Canvas>
 
)
1 Like