This repo demonstrates how to add raymarching materials created with Polygonjs to any react-three-fiber scene, using the Polygonjs R3F component.
See live example or learn more about Polygonjs
-
install polygonjs-editor with
npm install polygonjs-editor
-
create and save your first scene using the editor. This will save several files under
src/polygonjs/scenes/<your scene name>
. -
import the polygonjs scene, using the created files.
import {PolygonjsScene} from '@polygonjs/react-three-fiber';
import {loadScene_scene_01} from './polygonjs/scenes/scene_01/autogenerated/loadScene';
import {
PolySceneWithNodeMap_scene_01,
PolySceneProps_scene_01,
} from './polygonjs/scenes/scene_01/autogenerated/PolySceneWithNodeMap';
- mount the component
<PolygonjsScene<PolySceneWithNodeMap_scene_01, PolySceneProps_scene_01>
sceneName={'scene_01'}
loadFunction={loadScene_scene_01 as any}
/>
And you're done. Check index.ts to see how it is set up in this repository. And note that while this demonstrates it in typescript, it works just as well in javascript.