Closed bcjohnblue closed 3 years ago
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):
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-onCreated
event and added a delayRender
/ continueRender
to make sure the renderer waits until it's readyAfter that was done, perfect 3D cubes! 🥳
https://user-images.githubusercontent.com/1629785/109849194-61352480-7c51-11eb-88b5-e9bf407c22ba.mp4
I am making a PR ;)
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.