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.

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

Code Samples

ViewportFrame - Create GUI

1local Players = game:GetService("Players")
2
3local player = Players.LocalPlayer
4local playerGui = player:WaitForChild("PlayerGui")
5local screenGui = Instance.new("ScreenGui")
6screenGui.Parent = playerGui
7
8local viewportFrame = Instance.new("ViewportFrame")
9viewportFrame.Size = UDim2.new(0.3, 0, 0.4, 0)
10viewportFrame.Position = UDim2.new(0, 15, 0, 15)
11viewportFrame.BackgroundColor3 = Color3.new(0, 0, 0)
12viewportFrame.BorderColor3 = Color3.new(0.6, 0.5, 0.4)
13viewportFrame.BorderSizePixel = 2
14viewportFrame.BackgroundTransparency = 0.25
15viewportFrame.Parent = screenGui
16
17local part = Instance.new("Part")
18part.Material = Enum.Material.Concrete
19part.Color = Color3.new(0.25, 0.75, 1)
20part.Position = Vector3.new(0, 0, 0)
21part.Parent = viewportFrame
22
23local viewportCamera = Instance.new("Camera")
24viewportFrame.CurrentCamera = viewportCamera
25viewportCamera.Parent = viewportFrame
26
27viewportCamera.CFrame = CFrame.new(Vector3.new(0, 2, 12), part.Position)
ViewportFrame - Control Camera

1local Players = game:GetService("Players")
2
3local player = Players.LocalPlayer
4local playerGui = player:WaitForChild("PlayerGui")
5local screenGui = Instance.new("ScreenGui")
6screenGui.Parent = playerGui
7
8local TweenService = game:GetService("TweenService")
9
10local viewportFrame = Instance.new("ViewportFrame")
11viewportFrame.Size = UDim2.new(0.3, 0, 0.4, 0)
12viewportFrame.Position = UDim2.new(0, 15, 0, 15)
13viewportFrame.BackgroundColor3 = Color3.new(0, 0, 0)
14viewportFrame.BorderColor3 = Color3.new(0.6, 0.5, 0.4)
15viewportFrame.BorderSizePixel = 2
16viewportFrame.BackgroundTransparency = 0.25
17viewportFrame.Parent = screenGui
18
19local part = Instance.new("Part")
20part.Material = Enum.Material.Concrete
21part.Color = Color3.new(0.25, 0.75, 1)
22part.Position = Vector3.new(0, 0, 0)
23part.Parent = viewportFrame
24
25local viewportCamera = Instance.new("Camera")
26viewportFrame.CurrentCamera = viewportCamera
27viewportCamera.Parent = viewportFrame
28
29viewportCamera.CFrame = CFrame.new(Vector3.new(0, 2, 12), part.Position)
30
31task.wait(2)
32
33local cameraGoal = {
34 CFrame = CFrame.new(Vector3.new(0, 6, 4), part.Position),
35}
36
37local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)
38
39local tween = TweenService:Create(viewportCamera, tweenInfo, cameraGoal)
40
41tween: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.

HIDDEN
NOT REPLICATED

The color of the emitted light.

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

Events

Methods

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.

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:

IsMirrored

Hidden
Not Replicated

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.

Events

Methods