How to add ItemModels to ViewportFrame after clicking that item's Image

so… I am trying to add ItemModels to ViewportFrame after clicking that item’s image
Something like this
Screenshot_72
The script to show clicked item’s infos


local ShopGuiThing = script.Parent

local ServerStorage = game:GetService("ServerStorage")

local ReplicatedStorage = game:GetService("ReplicatedStorage")

local toolConfig = require(ReplicatedStorage:WaitForChild("ToolConfig")) -- !!!!!!!!

local DNAConfig = require(ReplicatedStorage:WaitForChild("DNAConfig")) -- !!!!!!!!

local RankConfig = require(ReplicatedStorage:WaitForChild("RankConfig")) -- !!!!!!!!

local Frame = ShopGuiThing.Frame

local Container =Frame.ShopMain.ScrollingContainer

local ItemTemplate = script.Template

local InfoFrame= Frame.ShopMain.InfoFrame

local InfoViewportFrame = InfoFrame.ViewportFrame

local InfoBuyButton = InfoViewportFrame.ItemBuyButton

local InfoItemName = InfoFrame.ItemName

local InfoStrengthFrame = InfoFrame.ItemStrength

local InfoItemPrice = InfoFrame.ItemPrice

local Shop = {}

Shop.__index = Shop

function Shop:Click()  -- This part shows clicked item's name strenght and price in infoFrame 
 	ShowInfoFrame(true)
	print(self.Name)
	print(self.Strength)
	print(self.Price)
	InfoItemName.Text = self.Name
	InfoItemPrice.Text = self.Price
	InfoStrengthFrame.Text = self.Strength
end

Toolmodels
Screenshot_71

Screenshot_70

Seems you’re on the right track so far! Assuming that these weapon models are mostly the same visual proportions, the easiest way to go about it would be to add something like this into the Click function:


local InfoViewportFrame = InfoFrame.ViewportFrame
local InfoBuyButton = InfoViewportFrame.ItemBuyButton
local InfoItemName = InfoFrame.ItemName
local InfoStrengthFrame = InfoFrame.ItemStrength
local InfoItemPrice = InfoFrame.ItemPrice

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local ToolModels = ReplicatedStorage:WaitForChild("ToolModels")

local Shop = {}
Shop.__index = Shop

function Shop:Click()  -- This part shows clicked item's name strenght and price in infoFrame
	local oldModel = InfoViewportFrame:FindFirstChildWhichIsA("Model")
    local modelSrc = ToolModels:FindFirstChild(self.Name)
    
    if oldModel then
        oldModel:Destroy()
    end
    
    if modelSrc and modelSrc:IsA("Model") then
        local newModel = modelSrc:Clone()
        newModel.Parent = InfoViewportFrame
        newModel:PivotTo(CFrame.identity) -- Could also be CFrame.Angles(0, 0, math.rad(45))
    end

 	ShowInfoFrame(true)
    
	print(self.Name)
	print(self.Strength)
	print(self.Price)
    
	InfoItemName.Text = self.Name
	InfoItemPrice.Text = self.Price
	InfoStrengthFrame.Text = self.Strength
end

For it to work correctly, you’ll want to make sure the ViewportFrame’s Camera is positioned such that it’s looking at the world origin [0, 0, 0]

The code I added:

  • Gets a safe reference to the ToolModels folder.
  • Checks for and deletes an existing single Model inside of the ViewportFrame.
  • Creates a clone of a child in the ToolModel folder (if said child is a Model with the same name as self.Name), parenting it to the ViewportFrame.
  • Uses PivotTo to move the cloned model into focus at the world origin.
2 Likes

It worked! sorry for late reply I just had time to test it


well it doesn’t show on frame probably because of the camera. I will try to add it once I learn how to add camera and manipulate it correctly.
Thanks

In edit mode, set the value of the ViewportFrame’s CurrentCamera property to the Camera object in the Workspace and it will start matching the Camera’s perspective. You can then move studio’s camera to focus on a part positioned at 0,0,0 and that should give you a proper view of the tool at runtime. Just make sure you unset the property once you’re done positioning it.

Alternatively you can manually generate a camera at runtime for it to work with:

local camera = Instance.new("Camera")
camera.CFrame = CFrame.new(0, 0, -5)
camera.FieldOfView = 70
camera.Parent = InfoViewportFrame

InfoViewportFrame.CurrentCamera = camera
2 Likes

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.