Resizing a React Three Fiber canvas in respect to zoom

1.5k views Asked by At

I'm being ambitious and attempting to show a React Three Fibre Canvas inside of a React Flow node.

This works, however when the view zooms, the canvas resizes inside the node

Zoomed out

zoomedout

Zoomed in

zoomed in

I'm trying to figure out who to affect the size of the canvas so the image stays the same size (and the other things that will be appearing above it)

The canvas wrapper is

const Wrapper = styled.div`
  width: 100%;
  height: 100%;
  margin: 0 0;
  padding: 0 0;
`;

And the image is scaled to fit to screen

  const scale = useAspect(
    1024, // Pixel-width
    512, // Pixel-height
    1, // Optional scaling factor
  );

The node container is fixed

style={{ width: '200px', height: '200px' }

I suppose I need to work out what is changing when you zoom on the ReactFlow diagram, and how I can adjust the size of the container or Three viewport to respect this zoom level?

0

There are 0 answers