React-three-fiber, an already created vanilla WebGLRenderer

I want to port an already created vanilla WebGLRenderer to the Canvas tag.

        this.renderer = new three.WebGLRenderer({
            alpha: options.canvasAlpha,
            premultipliedAlpha: options.canvasPremultipliedAlpha,
            antialias: options.antialias,
            depth: false,
            powerPreference: 'high-performance',
        });
        const renderer = this.renderer;

Please advice on what to do

<Canvas>
    <Renderer />
</Canvas>
<Canvas gl={(canvasNode) => {
  return ....
}>

the canvasNode arg is a plain dom <canvas> tag, you can ignore it, or use it.

1 Like