Skip to content

Reducing the size of the a-frame canvas to show other HTML elements

If this is possible, can I change the size of the aframe canvas in code?

I would like to display a form so that users can modify object parameters in the aframe scene.

Answer

See this question. How to remove fullscreen styles in A-Frame, reduce canvas size, or scroll a page with A-Frame scene?

You can use the embedded component to remove fullscreen styles and make it embeddable within a web page. https://aframe.io/docs/1.1.0/components/embedded.html

<a-scene embedded> 
  <!-- scene stuff -->
</a-scene>

Then you are free the style <a-scene> how you wish

a-scene { display: block; width: 50%; }