PcoWSkbVqDnWTu_dm2ix
We use cookies on this site to enhance your user experience
Collapse Sidebar

ViewportFrame

Show deprecated

ViewportFrame

Show deprecated

A GuiObject|GUI that can display children 3D objects inside its viewport. Children objects will not be rendered in the main scene. Background color is transparent.

This is a great way to display 3D objects/models in a 2D GUI space like a ScreenGui.

ViewportFrame Catalog
ViewportFrame Model

Caveats

  • Currently 3D objects can only be displayed on ScreenGui|ScreenGuis or PluginGui|PluginGuis
  • Objects inside ViewportFrames are rendered using a fixed Lighting|lighting setting
  • No shadow or post effects are available. Neon and Glass Enum/Material|materials will be rendered on lowest quality

Using ViewportFrames

Through Studio UI

  1. Add a ViewportFrame into a LayerCollector|GuiLayerCollector, such as a ScreenGui or SurfaceGui. This will cause a blank UI element to appear in the main window.

ScreenGui->ViewportFrame in Explorer
Empty ViewportFrame in Workspace

  1. Add a model that you want to show in the ViewportFrame into Workspace. Target your camera towards the Model|model.

Model being displayed by ViewportFrame

  1. Set ViewportFrame/CurrentCamera to Workspace.Camera. Drag the model into the ViewportFrame. The model should show up there.

ScreenGui->ViewportFrame->Model in Explorer
ViewportFrame Rendering Model

  1. You can change the size, position or other properties of ViewportFrame like other GUIs. Now the CurrentCamera is a reference to the main camera in Workspace, so if you move the camera in the main scene, it will also affect ViewportFrame. When you find a good position, duplicate the camera and make sure it is not the one Workspace is using. Then set it to ViewportFrame.CurrentCamera so the camera won’t be changed by Workspace operations.

Gif of ViewportFrame Rendering Model

Through Scripts

You can also set up a ViewportFrame using scripts. Add the following LocalScript into a ScreenGui (or other proper Guis), run the game and you will get a BasePart|Part rendered inside a ViewportFrame.

local vf = Instance.new("ViewportFrame", script.Parent)
vf.Size = UDim2.new(0.5, 0, 0.5, 0)
vf.Position = UDim2.new(0.25, 0, 0.25, 0)
vf.BackgroundColor3 = Color3.new(1, 1, 1)

local part = Instance.new("Part", vf)
part.Position = Vector3.new(0, 0, 0)

local camera = Instance.new("Camera", vf)
vf.CurrentCamera = camera

local cameraPosition = Vector3.new(3, 3, 3)
camera.CFrame = CFrame.new(cameraPosition, part.Position)

ViewportFrame rendering Part from LocalScript

See also

If you are looking for an in-depth article exploring how the ViewportFrame GUI can render 3D objects inside its bounds, including a strep-by-step walkthrough, take a look at the articles/ViewportFrame GUI|ViewportFrame-GUI article.

Properties

Camera

CurrentCamera

[NotReplicated]

Camera that is used to render children objects

Color3

ImageColor3

Determines how a rendered image will be colorized

float

ImageTransparency

Determines the transparency of the rendered image

Inherited from GuiObject: Show Hide

bool

Active

Determines whether a UI element sinks input

SizeConstraint

SizeConstraint

Selects the GuiObject/Size axes that a GuiObject|GUI will be based relative to the size of its parent

UDim2

Position

Determines the pixel and scalar position of a GUI

UDim2

Size

Determine the pixel and scalar size of a GuiObject|GUI

int

ZIndex

Determines the order in which a GuiObject|GUI renders relative to other GUIs

int

LayoutOrder

Controls the sort order of a GuiObject|GUI when used with a UIGridStyleLayout

bool

Visible

Determines whether a GuiObject/GUI and its descendants will be rendered

Vector2

AnchorPoint

Determines the origin point of a GuiObject|GUI, relative to its absolute size

GuiObject

SelectionImageObject

Overrides the default selection adornment (used for gamepads)

bool

ClipsDescendants

Determines if descendant GuiObject|GUIs outside of the bounds of a parent GUI element should render

float

BackgroundTransparency

Determines the transparency of the GuiObject|GUI's background and border

float

Rotation

Determines the number of degrees by which a UI element is rotated

Color3

BorderColor3

Determines the color of a GuiObject|GUI's border

GuiObject

NextSelectionRight

Sets the GuiObject which will be selected when the Gamepad selector is moved in this direction

GuiObject

NextSelectionDown

Sets the GuiObject which will be selected when the Gamepad selector is moved in this direction

GuiObject

NextSelectionLeft

Sets the GuiObject which will be selected when the Gamepad selector is moved in this direction

GuiObject

NextSelectionUp

Sets the GuiObject which will be selected when the Gamepad selector is moved in this direction

float

Transparency

[Hidden] [NotReplicated]

A mixed property of BackgroundTransparency and TextTransparency

bool

Selectable

Determine whether the object can be selected by a gamepad.

int

BorderSizePixel

Determines the pixel width of a UI element’s border.

Color3

BackgroundColor3

Determines the color of a UI element’s background.

Inherited from GuiBase2d: Show Hide

LocalizationTable

RootLocalizationTable

A reference to a LocalizationTable to be used to apply automated localization to this GuiBase2d and its descendants.

bool

AutoLocalize

When set to true, localization will be applied to this GuiBase2d and its descendants based on the GuiBase2d/RootLocalizationTable specified for this GuiBase2d.

Vector2

AbsoluteSize

[ReadOnly] [NotReplicated]

Describes the actual screen size of a UI element, in pixels.

float

AbsoluteRotation

[ReadOnly] [NotReplicated]

Describes the actual screen rotation of a UI element, in degrees.

Vector2

AbsolutePosition

[ReadOnly] [NotReplicated]

Describes the actual screen position of a UI element, in pixels.

Inherited from Instance: Show Hide

int

DataCost

[ReadOnly] [NotReplicated]

The cost of saving the instance using data persistence.

Instance

Parent

Determines the hierarchical parent of the Instance.

bool

RobloxLocked

If true, the Instance and its descendants cannot be indexed or edited by a Script or LocalScript and will throw an error if it is attempted.

string

ClassName

[ReadOnly] [NotReplicated]

A read-only string representing the class this Instance belongs to.

string

Name

A non-unique identifier of the Instance.

bool

Archivable

Determines if an Instance can be cloned using /Instance/Clone or saved to file.

Functions

Inherited from GuiObject: Show Hide

bool

TweenPosition ( UDim2 endPosition , EasingDirection easingDirection , EasingStyle easingStyle , float time , bool override , Function callback )

Smoothly moves a GUI to a new DataType/UDim2

bool

TweenSize ( UDim2 endSize , EasingDirection easingDirection , EasingStyle easingStyle , float time , bool override , Function callback )

Smoothly resizes a GUI to a new DataType/UDim2

bool

TweenSizeAndPosition ( UDim2 endSize , UDim2 endPosition , EasingDirection easingDirection , EasingStyle easingStyle , float time , bool override , Function callback )

Smoothly moves a GUI to a new size and position

Inherited from Instance: Show Hide

Array

GetDescendants ( )

[CustomLuaState]

Returns an array containing all of the descendants of the instance

Objects

GetChildren ( )

Returns an array containing all of the Instance's children.

void

Destroy ( )

Sets the Instance/Parent property to nil, locks the Instance/Parent property, disconnects all connections and calls Destroy on all children.

Instance

FindFirstChild ( string name , bool recursive )

Returns the first child of the Instance found with the given name.

RBXScriptSignal

GetPropertyChangedSignal ( string property )

Get an event that fires when a given property of an object changes.

string

GetFullName ( )

Returns a string describing the Instance's ancestry.

Instance

FindFirstChildWhichIsA ( string className , bool recursive )

Returns the first child of the Instance for whom Instance/IsA returns true for the given className.

bool

IsAncestorOf ( Instance descendant )

Returns true if an Instance is an ancestor of the given descendant.

bool

IsDescendantOf ( Instance ancestor )

Returns true if an Instance is a descendant of the given ancestor.

Instance

FindFirstChildOfClass ( string className )

Returns the first child of the Instance whose Instance/ClassName|ClassName is equal to the given className.

Instance

FindFirstAncestorWhichIsA ( string className )

Returns the first ancestor of the Instance for whom Instance/IsA returns true for the given className.

Instance

FindFirstAncestorOfClass ( string className )

Returns the first ancestor of the Instance whose Instance/ClassName is equal to the given className.

Instance

FindFirstAncestor ( string name )

Returns the first ancestor of the Instance whose Instance/Name is equal to the given name.

bool

IsA ( string className )

Returns true if an Instance's class matches or inherits from a given class

Instance

WaitForChild ( string childName , double timeOut )

[CustomLuaState] [CanYield]

Returns the child of the Instance with the given name. If the child does not exist, it will yield the current thread until it does.

string

GetDebugId ( int scopeLength )

[NotBrowsable]

Returns a coded string of the Instances DebugId used internally by Roblox.

Instance

Clone ( )

Create a deep copy of a Roblox instance and descendants where Archivable = true.

void

ClearAllChildren ( )

This function destroys all of an Instance's children.

Events

Inherited from GuiObject: Show Hide

RBXScriptSignal

InputChanged ( Instance input )

Fired when a user changes how they’re interacting via a Human-Computer Interface device (Mouse button down, touch begin, keyboard button down, etc)

RBXScriptSignal

InputEnded ( Instance input )

Fired when a user stops interacting via a Human-Computer Interface device (Mouse button down, touch begin, keyboard button down, etc)

RBXScriptSignal

InputBegan ( Instance input )

Fired when a user begins interacting via a Human-Computer Interface device (Mouse button down, touch begin, keyboard button down, etc)

RBXScriptSignal

MouseWheelForward ( int x , int y )

Fires when a user scrolls their mouse wheel forward when the mouse is over a GUI element

RBXScriptSignal

MouseWheelBackward ( int x , int y )

Fires when a user scrolls their mouse wheel back when the mouse is over a GUI element

RBXScriptSignal

MouseMoved ( int x , int y )

Fires whenever a user moves their mouse while it is inside a GUI element

RBXScriptSignal

MouseLeave ( int x , int y )

Fires when a user moves their mouse out of a GUI element

RBXScriptSignal

MouseEnter ( int x , int y )

Fires when a user moves their mouse into a GUI element

RBXScriptSignal

SelectionGained ( )

Fired when the GuiObject is being focused on with the Gamepad selector

RBXScriptSignal

SelectionLost ( )

Fired when the Gamepad selector stops focusing on the GuiObject

RBXScriptSignal

TouchTap ( Array touchPositions )

Fires when the player performs a tap gesture on the UI element

RBXScriptSignal

TouchSwipe ( SwipeDirection swipeDirection , int numberOfTouches )

Fires when the player performs a swipe gesture on the UI element

RBXScriptSignal

TouchRotate ( Array touchPositions , float rotation , float velocity , UserInputState state )

Fires when the player performs a rotation gesture using two fingers on the UI element

RBXScriptSignal

TouchPinch ( Array touchPositions , float scale , float velocity , UserInputState state )

Fires when the player performs a pinch or pull gesture using two fingers on the UI element

RBXScriptSignal

TouchPan ( Array touchPositions , Vector2 totalTranslation , Vector2 velocity , UserInputState state )

Fires when the player moves their finger on the UI element

RBXScriptSignal

TouchLongPress ( Array touchPositions , UserInputState state )

Fires when the player starts, continues and stops long-pressing the UI element

Inherited from Instance: Show Hide

RBXScriptSignal

DescendantRemoving ( Instance descendant )

Fires immediately before a descendant of the Instance is removed.

RBXScriptSignal

AncestryChanged ( Instance child , Instance parent )

Fires when the Instance/Parent property of the object or one of its ancestors is changed.

RBXScriptSignal

ChildAdded ( Instance child )

Fires when an object is parented to this Instance.

RBXScriptSignal

ChildRemoved ( Instance child )

Fires when a child is removed from this Instance.

RBXScriptSignal

DescendantAdded ( Instance descendant )

Fires when a descendant is added to the Instance.

RBXScriptSignal

Changed ( string property )

Fired immediately after a property of an object changes.