3D Model

Displays a single 3D model.

The 3D Model element displays an interact-able 3D model in a room.

349

If the 3D Model URL property is not set, a placeholder rounded cube is rendered.

👍

Try it out!

Check out our published sample rooms 3D Planet and 3D Sculpture Garden.

How can users interact with the 3D model?

  • Users can rotate the camera via click-and-drag
  • Users can trigger an configurable action by clicking on the model
  • The model can automatically rotate over time
  • You can project an image, video, or even a user onto the model

How would I use a 3D Model in my room?

  • Add visual interest to an existing room with a decorative 3D trinket that users can interact with
  • Add a unique way to display a user's video by projecting them onto an appropriately shaped 3D model like a mask or a mirror
  • Add a game-like mechanic by triggering an action when a part of the model is clicked

📘

Have any ideas or suggestions?

Post on our community forum or hop on our Discord to join the conversation!

Tips

  • Click and drag the mouse to rotate the camera
    • Camera rotation is synchronized across all users (one user rotating the camera will rotate it for all users)
  • Use the 3D Camera properties to change camera position programmatically e.g. through an Action Button
  • To adjust 3D projections, rotate the camera and invoke the 3D Reproject action

Properties

  • 3D Camera Alpha: The camera's longitudinal rotation around the model, in radians (details).

  • 3D Camera Beta: The camera's latitudinal rotation around the model, in radians (details).

  • 3D Camera Radius: The distance from the camera to the model (details).

  • 3D Model Auto Rotation: The amount of <x>,<y>,<z> rotation to apply to the model on every frame. For example, the default auto rotation value of 0,1,1 will add 1 unit of Y-rotation and 1 unit of Z-rotation every frame.

  • 3D Model Click Action: The action to be triggered when a user clicks on the model. Similar to an Action Button.

  • 3D Model Click Target ID: The optional ID of a submesh in the model to trigger the 3D Model Click Action. Set this if you only want click actions to trigger when part of the model is clicked. If unset, clicking anywhere on the model will trigger the click action.

  • 3D Model URL: Upload a custom model or render a model at a given URL. We recommend using the *.glb file format. Other accepted file types include *.gltf, *.obj. *.stl, and *.babylon.

  • 3D Projection: The current projection mode. Supported modes include Image or Video (from the Asset Library) and User (a user in the room).

    • 3D Projection Media: Requires the 3D Projection property to be set to Image or video. The selected image or video will be projected onto the model.

    • 3D Projection User Tag: Requires the 3D Projection property to be set to User. The user with this tag will have their video projected onto the model.

Actions

  • 3D Reproject: Reprojects the user video or custom image onto the model from the current camera perspective. This reprojection is saved and synchronized for all users.

Examples

199

An example of image projection with the 3D Projection Media property.

205

An example of video projection with the 3D Projection Media property.

212

An example of user video projection with the 3D Projection User Tag property.