Renderer

The renderer in Meowshapes is responsible for setting up the THREE.js renderer as well as the HTML canvas and related components.


Setup

If you're using the meowshapes package, setup is pretty straight forward.

import { Renderer } from "meowshapes";

const renderer = new Renderer((ctx) => {
    // Draw 
});

document.body.appendChild(renderer.element());

Remember to dispose of the renderer when you're done to free up resources:

renderer.dispose();

Renderer

method
element(): HTMLDivElement
Returns the DOM element used by the inner THREE.js WebGLRenderer. Add this to your document to display the rendered content. The element tries to fill the size of its parent element.
method
dispose(): void
Disposes of the renderer and its resources. After calling this method, the renderer should not be used anymore. Also removes the renderer's DOM element from the document if it was added.