Fab's Viewport Tool Editor

Fab’s Viewport Tool Editor

A lightweight and intuitive editor designed for Roblox scripters. This tool enables precise adjustments to CFrame transformations, helping you seamlessly position cameras and objects within ViewportFrames for optimal results.

Why?

When creating inventory UIs or similar interfaces, I often find myself spending a lot of time testing various CFrame combinations to achieve the perfect positioning for tools or objects displayed within a ViewportFrame.

I searched for a tool that could simplify this process without requiring me to constantly restart my game, but most plugins I found only allowed me to position the viewport camera in front of an object. What I truly needed was a tool that could help me easily determine the ideal CFrame transformations for both the object and camera, aligning them perfectly with my creative vision.

Features

  • Intuitively modify both camera and object CFrames.
  • Smoothing for effortless visualization of modifications as you make them.
  • Copy and paste CFrame transformations directly into your scripts (with support for TypeScript).
  • Session persistence ensures your work is saved and ready when you return.
  • Export CFrame transformations directly to your target model using Attributes for seamless integration.

:warning: This plugin does not contain light theme support :warning:

Demonstration

You can download the plugin directly through this link FOR FREE

Feel free to reply with any suggestions/bug reports.

20 Likes

Amazing plugin, thank you for it!

Suggestions:

  1. Incremental Value Adjustment:
    Allow using keyboard keys (or buttons in the UI) to incrementally change a value. This would make fine-tuning much faster compared to erasing the last value and entering a new one. Ideally, the incremental step value should be modifiable in the settings.
  2. Camera Focus Button:
    Add a button to focus the camera on the object. Occasionally, my object starts completely out of the frame, and I have to input random values just to bring it into view. A focus button would save a lot of time in such cases.
  3. Object Manipulation in ViewportFrame:
    If possible, it would be incredible to use the plugin’s ViewportFrame to drag and rotate the object directly to the desired position and orientation. I understand this might be quite difficult or even impossible to implement, but it would be a game-changer.

Helpful Script for Testing:

While testing the plugin, I created this script to quickly visualize the results. It might be helpful for other users who, like me, aren’t proficient at programming. I’m sharing it below:

--Camera Export
local CameraCFrame = CFrame.new(0, -0.4, 6) * CFrame.Angles(math.rad(0), math.rad(0), math.rad(0))

-- Field of view 
FieldOFView = 70

-- Object Export
local ObjectCFrame = CFrame.new(0, 0.2, 3) * CFrame.Angles(math.rad(0), math.rad(0), math.rad(0))


local viewportFrame = script.Parent
local model = viewportFrame:FindFirstChildOfClass("Model")

if not model then
	warn("No model found in the ViewportFrame")
	return
end

-- Clone the model to avoid any issues with the original
local modelClone = model:Clone()
modelClone.Parent = viewportFrame

-- Set the CFrame of the model
local modelCFrame = ObjectCFrame

-- Calculate model size and adjust position
local primaryPart = modelClone.PrimaryPart or modelClone:FindFirstChildWhichIsA("BasePart")
if not primaryPart then
	warn("No PrimaryPart found in the model")
	return
end

modelClone:SetPrimaryPartCFrame(modelCFrame)

-- Set up the camera for the ViewportFrame
local camera = Instance.new("Camera")
camera.CFrame = CameraCFrame
viewportFrame.CurrentCamera = camera
camera.FieldOfView = FieldOFView

To use this script:

  1. Place the code in a LocalScript inside a ViewportFrame.
  2. Add your model to the ViewportFrame.
  3. Replace the CameraCFrame and ObjectCFrame values with the Export values from the plugin.

Results:
In plugin:


In game:
image

Thank you again for the great plugin! I hope these suggestions and the script can help improve the user experience. I will for sure use this plugin in the futur !:blush:

1 Like

This is awesome! I’ve been trying to use ViewportFrames myself and having no easy way to preview what an object within the viewport looks like has made them hard to work with.

Going off of @winpol’s suggestion, would it be possible to make the values sliders as well?

1 Like

I’ve revamped the code for the plugin (V - 0.2)

It now uses easily modifiable UI components.
I should also be able to modify the plugin way more easily than before.


This update contain:

  • Increment settings
  • Variable viewport size
  • Sliders !
1 Like

Great update, thank you!

The sliders are awesome.