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.
For a step-by-step walkthrough, see the Frames.
Code Samples
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)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.
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.
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
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.
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
IsMirrored
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.