Creating a 3D Background for a Model That Scales with a Screen UI Frame

Help and Feedback Scripting Support
, ,
#1

I’m trying to make a “3d” UI to use in displaying weapons on the screen. I know usually you would be using viewport frames but in my case I want to display particle emitters. The issue I’m currently having is that it is scaling up in size dependant on how far it is form the center of the screen.

local function updateBackgroundPartPosition()
        
        local uiPosition = inspectFrame.InspectFrame.ItemDisplayFrame.AbsolutePosition
        local uiSize = inspectFrame.InspectFrame.ItemDisplayFrame.AbsoluteSize
        
        local adjustedDistance = distanceFromScreen * 1.5
        
        local viewportHeightRatio = uiSize.Y / camera.ViewportSize.Y
        
        local centerUIPosition = uiPosition + (uiSize / 2)
        local centerRay = camera:ScreenPointToRay(centerUIPosition.X, centerUIPosition.Y)
        
        local centerWorldPos = centerRay.Origin + centerRay.Direction * adjustedDistance
        
        local frameWorldHeight = 2 * adjustedDistance * math.tan(math.rad(camera.FieldOfView / 2)) * viewportHeightRatio
        
        local aspectRatio = uiSize.X / uiSize.Y
        local frameWorldWidth = frameWorldHeight * aspectRatio
        
        self.Background.Size = Vector3.new(frameWorldWidth, frameWorldHeight, 0.001)
        self.Background.CFrame = CFrame.new(centerWorldPos, centerWorldPos - camera.CFrame.LookVector)
    end

This is the attempt I made. I’m trying everything I can to make it work with FOV but I’m having issues trying to do that

Ive made other attempts as well like:
Getting position for corners of the UI and scaling the 3D “UI” Using the distance between them. That made it appear even more distorted tho (for some reason)

Ive also tried using a Billboard GUI but the refresh rate of the Billboard GUI is too slow to catch up with the speed of the camera

image
image1419×666 76.7 KB

image
image1223×661 42.4 KB

I would greatly appreciate some help / guidance. Thank you

#2

Their are loads of guilt particle emitter modules why don’t you try those?

1 Like
#3

when games such as the source engine want to display something on a screen (basically the same idea as your gui), they have a far off room with the model being displayed. a part facing said model is inside this room and the player’s camera is set to be that part. this is probably one of the better ways to display a new item you have just got while being able to display particles. if moving the entire camera to some far off room isn’t your cup of tea, try what hya123456h suggested (“loads of guilt particle emitter modules”).

#4

Im not sure what a guilt particle emitter is

#5

I see, the issue is i am also attempting to do the same thing for the inventory. And if i do it that way it will be inconvenient for the player to move them to a whole new room every time.

Here is how it looks in the inventory, not as bad but i would still like the freedom of moving it around the screen to any position without worry

#6

could you not copy what you’ve done with the purple lightning to the smaller icons?

#7

I cant, roblox doesnt allow it since viewports dont render particle effects (for some reason). For the inventory ones im thinking i will just use drawn icons for it on a template knife. I think im close to the solution but i just cant seem to get it.

#8

so how does the purple lightning’s particles work if it’s in a viewport?

#9

Its not in a viewport, its a 3d model that im moving and scaling to Imitate a viewport while also allowing me to use particle emitters.

1 Like
#10

just do that for the inventory icon you can just do it for like ipairs to create the models and scale them to the ui

#11

Im not worried about inventory icons right now, im worried about the right side where the 3d Model is. I want to make the background of it scale properly

#12

Meant gui.

Autocorrect just hates me

#13

I think having a 3d thing is much more effective. Then you can see the actual model. And the 2d paritcle emitters wont make it look exactly like the actual thing.