Camera control via HTML

[mikkoh]

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.

[cabanier]

I think your request lines up more the the detached CSS proposal.