https://github.com/polygonjs/polygonjs-threejs-raymarching-example

Example repository to show how to add raymarching materials created with Polygonjs to Threejs
https://github.com/polygonjs/polygonjs-threejs-raymarching-example

Last synced: 4 months ago
JSON representation

Example repository to show how to add raymarching materials created with Polygonjs to Threejs

• Host: GitHub
• URL: https://github.com/polygonjs/polygonjs-threejs-raymarching-example
• Owner: polygonjs
• Created: 2022-10-23T22:48:54.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-10-24T14:02:30.000Z (over 3 years ago)
• Last Synced: 2025-08-23T12:37:25.679Z (10 months ago)
• Language: GLSL
• Size: 6.4 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Raymarching + Threejs

This repo demonstrates how to add raymarching materials created with [Polygonjs](https://polygonjs.com) to any threejs scene. See [live example](https://polygonjs.com/demo?example=bynode/mat/raymarchingbuilder/refractions)

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

If you do not know anything about Polygonjs, learn first [how to create your first scene](https://polygonjs.com/docs/getting_started).

Assuming you have saved a scene called `scene_01`, all you need to add are those 2 snippets:

This imports your polygonjs scene and adds it to the threejs scene:

``` ts

// 1. import the polygonjs scene

import { fetchSceneAndMount_scene_01 } from './polygonjs/scenes/scene_01/autogenerated/fetchSceneAndMount';

import { PolySceneWithNodeMap_scene_01 } from './polygonjs/scenes/scene_01/autogenerated/PolySceneWithNodeMap';

let polygonjsScene: PolySceneWithNodeMap_scene_01|undefined;

fetchSceneAndMount_scene_01({

  createViewer:false, // we do not create a polygonjs viewer here, since we use threejs WebGLRenderer

  autoPlay:true // we play the scene after it is loaded

}).then(loadedData=>{

  polygonjsScene = loadedData.scene;

  // 2. add the threejs scene created by polygonjs to our original threejs scene

  scene.add(polygonjsScene.threejsScene());

})

```

And make sure to run `.update(delta)` in the render loop:

``` ts

const renderState = {scene}; // create a renderState, which is a simple container for the scene

const clock = new THREE.Clock(); // create a clock

function animation( time:number ) {

  const delta = clock.getDelta();

  

  // pass the delta and render state to PolyScene.update() method

  polygonjsScene?.update(delta, renderState);

  renderer.render( scene, camera );

}

```

# Open Polygonjs Editor

- 1: install dependencies, with `yarn` or `npm install`

- 2: run: `yarn polygon` or `npm run polygon`

- 3: open your browser on `http://localhost:8091`

If you have any trouble installing it, the docs may be able to help: [https://polygonjs.com/docs/](https://polygonjs.com/docs/)