ViewportFrame
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
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)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.
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
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
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)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.
See also:
- ViewportFrame.ImageTransparency, determines the transparency of the rendered image
- ViewportFrame.CurrentCamera, the Camera that is used to render children objects
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.
See also:
- ViewportFrame.ImageColor3, determines how a rendered image will be colorized
- ViewportFrame.CurrentCamera, the Camera that is used to render children objects
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.