Skip to main content

Customize camera

Customize camera position with 'camera-orbit' and 'camera-target' attributes.

Attribute 'camera-orbit' specifies orbital position of the camera in form: "theta phi radius" where:

  • theta - polar angle in radians "rad" or degrees "deg", or "auto" which equals to 0deg;
  • phi - azimuthal angle in radians "rad" or degrees "deg", or auto which equals to 75deg;
  • radius - distance from target in meters "m", centimeters "cm", millimeters "mm" or percentages "%" (100% should fit the model inside the viewer) or "auto" which equals to "105%"; Every property also accepts css functions: calc() and env()

Attribute 'camera-target' specifies point that camera orbits around in form: "X Y Z". Each value should be specified in meters "m", centimeters "cm" or millimeters "mm". Each value can also accept "auto" which is equal to the center of the model bounding box

CSS

.viewer {
  width: 100%;
  height: 500px;
}

HTML

<see-my-model
  class="viewer"
  camera-orbit="40deg 60deg 70%"
  camera-target="0.1m 0.2m auto"
  interaction-prompt="none"
  model-access-key="5fca30bc5158fc001aa3a0b3"
></see-my-model>