Camera control via HTML

Has a consideration been made to position a camera via HTML attributes or CSS?

Assume that you're attempting to render a series of 3D models from different views in a page. With the current proposed API the code would look as follows:

<model id="model-1" style="width: 400px; height: 300px">
    <source src="assets/example.glb" type="model/gltf-binary">
</model>
<script>
  document.querySelector("model-1").setCamera({
    pitch: 0,
    yaw: 0,
    scale: 1.5,
  })
</script>
<model id="model-2" style="width: 400px; height: 300px">
    <source src="assets/example.glb" type="model/gltf-binary">
</model>
<script>
  document.querySelector("model-2").setCamera({
    pitch: 30,
    yaw: 45,
    scale: 1.5,
  })
</script>

It should also be noted that since setCamera returns a promise that the action would not be immediate and so the developer may want to hide the model until the setCamera Promise is resolved making the implementation more complex.

Where maybe ideally it would look as follows:

<model camera="0deg 0deg 1.5" style="width: 400px; height: 300px">
    <source src="assets/example.glb" type="model/gltf-binary">
</model>
<model camera="30deg 45deg 1.5" style="width: 400px; height: 300px">
    <source src="assets/example.glb" type="model/gltf-binary">
</model>

Or an alternative would be to define initial camera settings via inline CSS. We already have the perspective css property which is sort of driving in that direction.

The issue names no files, tests, or entry points. Start by reviewing the proposed setCamera API and comparing the declarative camera attribute with the CSS alternative described here; done would require a settled design for initial camera settings and its effect on model loading.