Wrong position of canvas when using react-three-fiber

[bcjohnblue]

I want to apply react-three-fiber in remotion. However, when I follow the official tutorial to create two cubes. I find the position of canvas is not set correctly. (The two cubes will show on the upper left instead of showing on the middle)

I don't quite sure that the problem is caused by remotion or not. Could someone give me some advice? The canvas-offset-bug is a simple repository that can reproduce this situation.

For reference, How to SET canvas size Declarative? might be useful for this problem.

[JonnyBurger]

Hey @bcjohnblue! Great question!

I think it's probably a bug from an external library, not in Remotion. Remotion renders a canvas with width 1920, height 1080 and applies a scale, like 0.66.

When we pass 100%/100% to the canvas, some logic in react-three-fiber wants to make the width 1267px. But since Remotion applies scale 0.66 again, it becomes too small.

But I am very interesting in react-three-fiber, so I looked for a solution. Thanks for the great repro! I found a hacky solution:

Create a CSS file and put

canvas {width: 100% !important; height: 100% !important;}

in it, then import it with import './index.css'. That fixes it!

I noticed three other things (for none of which you are to blame for since you probably wanted to sort this bug out first):

• You are setting the transform imperatively which won't work well since it should be animated based on the useCurrentFrame hook. Also R3F seems to use pure components and will not react to hook changes, so I had to pass it as a prop-
• It seems to take a bit to load the canvas, so I hooked into the onCreated event and added a delayRender / continueRender to make sure the renderer waits until it's ready
• Bug in Remotion actually: A file from R3F was not able to be compiled because of a bad Webpack config. I released a new version of Remotion and updated your project

After that was done, perfect 3D cubes! 🥳

https://user-images.githubusercontent.com/1629785/109849194-61352480-7c51-11eb-88b5-e9bf407c22ba.mp4

I am making a PR ;)