ViewportFrame

Show Deprecated

A ViewportFrame is a type of GUI that can render 3D objects inside its bounds. This is a great way to display 3D objects/models in a 2D GUI space like a ScreenGui. At the moment, no shadow or post effects are available. Neon and Glass materials will be rendered on lowest quality. Nested GUIs aren't supported, which means GuiObjects don't work as expected under ViewportFrame.

For a step-by-step walkthrough, see the Frames.

Code Samples

ViewportFrame - Create GUI

local Players = game:GetService("Players")
local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")
local screenGui = Instance.new("ScreenGui")
screenGui.Parent = playerGui
local viewportFrame = Instance.new("ViewportFrame")
viewportFrame.Size = UDim2.new(0.3, 0, 0.4, 0)
viewportFrame.Position = UDim2.new(0, 15, 0, 15)
viewportFrame.BackgroundColor3 = Color3.new(0, 0, 0)
viewportFrame.BorderColor3 = Color3.new(0.6, 0.5, 0.4)
viewportFrame.BorderSizePixel = 2
viewportFrame.BackgroundTransparency = 0.25
viewportFrame.Parent = screenGui
local part = Instance.new("Part")
part.Material = Enum.Material.Concrete
part.Color = Color3.new(0.25, 0.75, 1)
part.Position = Vector3.new(0, 0, 0)
part.Parent = viewportFrame
local viewportCamera = Instance.new("Camera")
viewportFrame.CurrentCamera = viewportCamera
viewportCamera.Parent = viewportFrame
viewportCamera.CFrame = CFrame.new(Vector3.new(0, 2, 12), part.Position)
ViewportFrame - Control Camera

local Players = game:GetService("Players")
local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")
local screenGui = Instance.new("ScreenGui")
screenGui.Parent = playerGui
local TweenService = game:GetService("TweenService")
local viewportFrame = Instance.new("ViewportFrame")
viewportFrame.Size = UDim2.new(0.3, 0, 0.4, 0)
viewportFrame.Position = UDim2.new(0, 15, 0, 15)
viewportFrame.BackgroundColor3 = Color3.new(0, 0, 0)
viewportFrame.BorderColor3 = Color3.new(0.6, 0.5, 0.4)
viewportFrame.BorderSizePixel = 2
viewportFrame.BackgroundTransparency = 0.25
viewportFrame.Parent = screenGui
local part = Instance.new("Part")
part.Material = Enum.Material.Concrete
part.Color = Color3.new(0.25, 0.75, 1)
part.Position = Vector3.new(0, 0, 0)
part.Parent = viewportFrame
local viewportCamera = Instance.new("Camera")
viewportFrame.CurrentCamera = viewportCamera
viewportCamera.Parent = viewportFrame
viewportCamera.CFrame = CFrame.new(Vector3.new(0, 2, 12), part.Position)
task.wait(2)
local cameraGoal = {
CFrame = CFrame.new(Vector3.new(0, 6, 4), part.Position),
}
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)
local tween = TweenService:Create(viewportCamera, tweenInfo, cameraGoal)
tween:Play()

Summary

Properties

The lighting hue applied to the area within the ViewportFrame.

Camera that is used to render children objects.

NOT REPLICATED

Determines how a rendered image will be colorized.

Determines the transparency of the rendered image.

The color of the emitted light.

A Vector3 representing the direction of the light source from the position 0, 0, 0.

Methods

Events

Properties

Ambient

This property determines the lighting hue applied to the area within the ViewportFrame. This property defaults to 200, 200, 200 (ghost grey).

CurrentCamera

Not Replicated

This property is a Camera instance that is used to render children objects. Defaults to nil.

The Camera object will not replicate so the ViewportFrame.CurrentCamera won't replicate either. If you save a Camera in the server, it will not appear in the client. When you set this property, Camera.CFrame and Camera.FieldOfView will be saved and replicate with ViewportFrame internally so the client can render ViewportFrame without a Camera object. If you want to change the client's Camera, you have to create a new Camera using a LocalScript at runtime.

Code Samples

ViewportFrame - Create GUI

local Players = game:GetService("Players")
local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")
local screenGui = Instance.new("ScreenGui")
screenGui.Parent = playerGui
local viewportFrame = Instance.new("ViewportFrame")
viewportFrame.Size = UDim2.new(0.3, 0, 0.4, 0)
viewportFrame.Position = UDim2.new(0, 15, 0, 15)
viewportFrame.BackgroundColor3 = Color3.new(0, 0, 0)
viewportFrame.BorderColor3 = Color3.new(0.6, 0.5, 0.4)
viewportFrame.BorderSizePixel = 2
viewportFrame.BackgroundTransparency = 0.25
viewportFrame.Parent = screenGui
local part = Instance.new("Part")
part.Material = Enum.Material.Concrete
part.Color = Color3.new(0.25, 0.75, 1)
part.Position = Vector3.new(0, 0, 0)
part.Parent = viewportFrame
local viewportCamera = Instance.new("Camera")
viewportFrame.CurrentCamera = viewportCamera
viewportCamera.Parent = viewportFrame
viewportCamera.CFrame = CFrame.new(Vector3.new(0, 2, 12), part.Position)
ViewportFrame - Control Camera

local Players = game:GetService("Players")
local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")
local screenGui = Instance.new("ScreenGui")
screenGui.Parent = playerGui
local TweenService = game:GetService("TweenService")
local viewportFrame = Instance.new("ViewportFrame")
viewportFrame.Size = UDim2.new(0.3, 0, 0.4, 0)
viewportFrame.Position = UDim2.new(0, 15, 0, 15)
viewportFrame.BackgroundColor3 = Color3.new(0, 0, 0)
viewportFrame.BorderColor3 = Color3.new(0.6, 0.5, 0.4)
viewportFrame.BorderSizePixel = 2
viewportFrame.BackgroundTransparency = 0.25
viewportFrame.Parent = screenGui
local part = Instance.new("Part")
part.Material = Enum.Material.Concrete
part.Color = Color3.new(0.25, 0.75, 1)
part.Position = Vector3.new(0, 0, 0)
part.Parent = viewportFrame
local viewportCamera = Instance.new("Camera")
viewportFrame.CurrentCamera = viewportCamera
viewportCamera.Parent = viewportFrame
viewportCamera.CFrame = CFrame.new(Vector3.new(0, 2, 12), part.Position)
task.wait(2)
local cameraGoal = {
CFrame = CFrame.new(Vector3.new(0, 6, 4), part.Position),
}
local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)
local tween = TweenService:Create(viewportCamera, tweenInfo, cameraGoal)
tween:Play()

ImageColor3

This property determines how a rendered image will be colorized. It allows you to change the image color without directly modifying the rendered object.The default colorization value is Color3.new(1,1,1) (white). When set to white no colorization occurs.

It functions similarly to ImageLabel.ImageColor3 and Decal.Color3except that it is applied to the rendered image.

The image below demonstrates the same ViewportFrame with two different colorizations. The first image has the default (white) colorization and the second image has a Color3.new(255, 255, 102) (yellow) colorization.

ViewportFrame with the default white colorization

ViewportFrame with a yellow colorization

See also:

ImageTransparency

This property determines the transparency of the rendered image. It allows you to change the image transparency without directly modifying the rendered object. A value of 0 is completely opaque, and a value of 1 is completely transparent (invisible). The default transparency is 0.

This property behaves similarly to GuiObject.BackgroundTransparency or BasePart.Transparency except that it is applied to the rendered image.

The image below demonstrates the same ViewportFrame with two different transparency. The first image has a transparency of 0 and the second image has a transparency of 0.5.

ViewportFrame with default 0 transparency

ViewportFrame with 0.5 transparencu

See also:

LightColor

The color of the emitted light. This property defaults to 140, 140, 140 (silver flip/flop).

LightDirection

A Vector3 representing the direction of the light source from the position 0, 0, 0. This property defaults to -1, -1, -1.

Methods

Events