Hi developers,
We are proud to announce the release of the ViewportFrame object in Studio! This object enables you to display 3D objects within 2D UI – particularly useful for things like in-game stores, 3D previews, modeling plugins, and much more!
For this beta release, the object can only be used in Studio. We plan to open this up for in-game use too.
Caveats:
- Currently 3D objects can only be displayed on ScreenGuis or PluginGuis. We will investigate expanding this to work in the 3D environment too.
- Objects inside ViewportFrames are rendered using a fixed lighting setting. More light settings may be released in the future. No shadow or post effects are available. Neon and Glass materials will be rendered on lowest quality.
Using ViewportFrames
Through Studio UI
- Add a ViewportFrame into a GuiLayerCollector, such as a ScreenGui or SurfaceGui. This will cause a blank UI element to appear in the main window.
- Add a model that you want to show in the ViewportFrame into Workspace. Target your camera towards the model.
- Set ViewportFrame.CurrentCamera to Workspace.Camera. Drag the model into the ViewportFrame. The model should show up there.
- You can change the size, position or other properties of ViewportFrame like other GuiObjects. 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.
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 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)
We will be providing documentation and more information in the coming weeks. Let us know what you think!