A ViewportFrame uses a camera to render 3D objects into a 2D viewport. Ideal use cases include:
- A minimap of your experience directly in the corner of a user's screen.
- 3D models of items in an inventory menu.
- Rotating objects that a character has equipped.
Viewport configurations
3D objects that users view through a ViewportFrame can either move with their camera, remain static, or rotate within the ViewportFrame. This object can also include a Sky child as a cubemap for reflections.
If you want a 3D object to move with the camera:
Position your camera view within the experience so that the object you want to see within the frame is visible.
Add a new ViewportFrame to the screen and then make sure it's selected in the Explorer.
In the Properties window, assign the CurrentCamera property to the camera:
- Select the CurrentCamera property. Your cursor changes.
- In the Explorer window, click on the top-level Camera object.
Parent the desired 3D object to the new ViewportFrame. Note that if you still want to see the object within your experience, you must duplicate it in the Workspace and then parent the duplicate object to the ViewportFrame.
When you move your camera, the object will also move within the ViewportFrame.
When you want to update the view of your ViewportFrame, be sure to update the camera, not the objects within the view.
Lighting and appearance
Lighting within a ViewportFrame is controlled through three properties:
| Property | Description |
|---|---|
| Ambient | Determines the overall lighting hue applied to the area within the viewport frame. Defaults to Color3.fromRGB(200, 200, 200) (ghost grey). |
| LightDirection | A Vector3 representing the direction of the light source from position (0, 0, 0). Defaults to (-1, -1, -1). |
| LightColor | Color of the directional light. Defaults to Color3.fromRGB(140, 140, 140) (silver). |
Additionally, you can adjust the overall rendered appearance of the viewport throuugh the following properties:
| Property | Description |
|---|---|
| ImageColor3 | Changes the image color/tint without modification of the rendered object. The default colorization value is Color3.new(1, 1, 1) (white) at which no color modification occurs. |
| ImageTransparency | Changes the image transparency without modification of the rendered object. A value of 0 (default) is completely opaque and a value of 1 is completely transparent (invisible). |