Images not rendered in Camera

Author: erkanarslanCreated May 22, 2024Updated Oct 12, 2025
Labelsb-bugc-accepteda-2d

Describe the bug Img elements are not rendered correctly when used in Camera element.

To Reproduce Try this code:

typescript
export default makeScene2D(function* (view) {
	const camera = createRef<Camera>();
	const browserRef = createRef<Img>();

	view.add(
		<Camera ref={camera}>
			<Img ref={browserRef} src={browser} height={400} width={1000} position={[0, 0]} shadowBlur={10} shadowColor="#0004" />
		</Camera>,
	);

	yield* waitFor(10)
});

You get this: image

Expected behavior When the image is directly added to the scene, there is not issue:

typescript
export default makeScene2D(function* (view) {
	const camera = createRef<Camera>();
	const browserRef = createRef<Img>();

	view.add(
		<Img ref={browserRef} src={browser} height={400} width={1000} position={[0, 0]} shadowBlur={10} shadowColor="#0004" />
	);

	yield* waitFor(10)
});

image

Console errors There is no error in the console or debug screen.

Package versions:

  • core: 3.16.0
  • two: 3.16.0
  • ui: 3.16.0
  • vitePlugin: 3.15.1

Source: motion-canvas/motion-canvas