/polygonjs-react-three-fiber-raymarching-example

Example of a raymarching material created with Polygonjs integrated to a react-three-fiber scene

Primary LanguageGLSL

Raymarching + React-Three-Fiber

This repo demonstrates how to add raymarching materials created with Polygonjs to any react-three-fiber scene, using the Polygonjs R3F component.

Raymarching_with_threejs

See live example or learn more about Polygonjs

How it works

  1. install polygonjs-editor with npm install polygonjs-editor

  2. create and save your first scene using the editor. This will save several files under src/polygonjs/scenes/<your scene name>.

  3. 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';
  1. 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.