Skip to content

Ros Player

ROSPlayer is a convinicent class for simply rendering a model. The ros-player is the equivalent custom html element

js
import { ROSPlayer, ROSModel } from "@tmrw-realityos/charm";

export async function ready() {
  const player = new ROSPlayer();
  player.environmentURL = "/charm-assets/environments/field.hdre";
  player.appendChild(
    new ROSModel(
      "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Assets/main/Models/DamagedHelmet/glTF-Binary/DamagedHelmet.glb",
    ),
  );
  const body = document.querySelector(".body");
  body.appendChild(player);
}

or as html custom element

html
<ros-player environment-url="/charm-assets/environments/field.hdre">
    <ros-model
        model-url="https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Assets/main/Models/DamagedHelmet/glTF-Binary/DamagedHelmet.glb"
    ></ros-model>
</ros-player>