https://github.com/polygonjs/polygonjs-react-three-fiber-raymarching-example

Example of a raymarching material created with Polygonjs integrated to a react-three-fiber scene
https://github.com/polygonjs/polygonjs-react-three-fiber-raymarching-example

Last synced: 21 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/polygonjs/polygonjs-react-three-fiber-raymarching-example
• Owner: polygonjs
• Created: 2022-10-24T14:18:40.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-10-24T14:33:20.000Z (about 2 years ago)
• Last Synced: 2024-04-17T22:14:51.619Z (7 months ago)
• Language: GLSL
• Size: 5.01 MB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Raymarching + React-Three-Fiber

This repo demonstrates how to add raymarching materials created with [Polygonjs](https://polygonjs.com) to any react-three-fiber scene, using the [Polygonjs R3F component](https://github.com/polygonjs/polygonjs-react-three-fiber).

![Raymarching_with_threejs](https://github.com/polygonjs/polygonjs-react-three-fiber-raymarching-example/blob/main/assets/r3f.gif?raw=true)

See [live example](https://polygonjs.com/demo?example=bynode/mat/raymarchingbuilder/refractions) or learn more about [Polygonjs](https://polygonjs.com)

# How it works

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

2. create and save [your first scene](https://polygonjs.com/docs/getting_started) using the editor. This will save several files under `src/polygonjs/scenes/`.

3. import the polygonjs scene, using the created files.

``` ts

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';

```

4. mount the  component

``` ts

 

    sceneName={'scene_01'}

    loadFunction={loadScene_scene_01 as any}

/>

```

And you're done. Check [index.ts](./src/index.tsx) 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.