Topics

3D Model

Use a 3D Model element to place a live model on a page. A visitor can orbit around it, follow a camera move or use a slider to inspect its animation.

Add a GLB and frame it

Add a 3D Model element and choose a .glb file, or drop the file onto the canvas. GLB stores the model, materials and any built-in animations together. Sitely reads the file’s cameras and animations after loading it.

Choose Fit to keep the whole model in the frame, or Fill to cover the frame even if some edges are cropped. The model renders over a transparent background with built-in studio lighting.

Choose who controls the camera

Choose Interactive to let the visitor drag around the model. Use Edit Initial View to frame the opening angle. Choose Animated to direct the camera along a motion path.

In Animated mode, choose a preset such as 360° Turntable, Tilted Orbit or Idle Sway, or a one-shot move such as Pull-back Reveal, Crane Down or Hero Swing. Use a camera From File when the GLB supplies one.

Edit a custom camera move

Choose Custom and open Edit Motion. Add, duplicate, reorder or remove camera keyframes. Set the distance, azimuth and elevation, the Target X/Y/Z, and the FOV or Zoom for each view. Transition sets the time to the next view; Easing shapes that movement.

Use the editor’s playback controls to inspect the path between keyframes. Set the page trigger to Automatically, On Hover or While Scrolling, or choose Never for a still view. Loop repeats the motion, and Allow Interaction lets visitors interrupt a supported automatic path.

Play the model’s built-in animations

The Model Animation section lists the clips stored in the GLB. Enable the ones to play. The camera and the model’s own motion can run together. A model without clips still supports camera movement.

Connect a slider

Add a Slider to the same page. Select the model, choose Controlled by Slider for playback, then choose the Slider. Reverse Direction flips the progress. The example above uses an animated camera with a custom orbit. The slider controls the camera’s position along that path.