Easily edit the materials in your beautifully crafted threejs scene. Compatible vanilla and react.
MIT License
A GLSL editor for Threejs materials. Automatically detect the WebGL programs and provide live edit for the shaders. The editor can generates an onBeforeCompile function and possess a diff editor to analyze your changes.
yarn add -D @three-material-editor/vanilla
import {
MaterialEditor,
useEditorComposer,
} from '@three-material-editor/vanilla';
// add the editor in the init function of your app
MaterialEditor(scene, renderer, {
camera: camera, // handle responsize dpr for fullscreen
});
let composer = new EffectComposer(renderer);
useEditorComposer(composer);
Demo : codesandbox
See more - @three-material-editor/vanilla
yarn add -D @three-material-editor/react
import {
MaterialEditor,
useEditorComposer,
} from '@three-material-editor/react';
<Canvas>
<MaterialEditor />
<EffectComposer ref={useEditorComposer()}>...</EffectComposer>
</Canvas>;
Demo : codesandbox
See more - @three-material-editor/react
The Material Editor is automatically remove from the production build based on the process.env.NODE_ENV
.
To render the editor in production :
import { MaterialEditor } from '@three-material-editor/vanilla/dist/vanilla.cjs.development';
OR a custom env variable is available :
process.env.TME_PROD === 'SHOW';
In one terminal, run tsdx watch in parallel:
yarn start
In another terminal, run tsdx example:
yarn start:app // react -> localhost:1234
// OR
yarn start:vanilla // vanilla -> localhost:1234/vanilla.html
If you like this project, please consider helping out. All contributions are welcome as well as donations to paypal.me/renaudrohlinger
or by BTC : 3DxQy7MAaFgJpuMpn8oHTyc679vREq5g6p