Pet Model Doesn't Appear On The ViewportFrame - Help With ViewportFrame

You can write your topic however you want, but you need to answer these questions:

Hello, Developers

I having Trouble Displaying the Pet Model on a ViewportFrame. The ViewpoerFrame displays Grey Box or Color on it. Could Anybody Help Me Out

  1. What do you want to achieve? Keep it simple and clear!

    I’m trying to make The Pet Model to show on the ViewportFrame On the Pet Ui.

  2. What is the issue? Include screenshots / videos if possible!

The ViewportFrame Appears Gray
If anybody Recommend How to do it or have a solution. I Would Really Appreciate it.
image

—Table—

---Table---
local PetList = {
	Pets = {
		["Aqua Dragon"] = {
			Chance = 10,
			Rarity = "Ultra Rare",
			Name = "Aqua Dragon",
			Model1 = game.Workspace:WaitForChild("Pets"):WaitForChild("Aqua Dragon").MeshPart
		},
		
		["Dog"] = {

			Chance = 15,
			Rarity = "Rare",
			Name = "Dog",
			Model1 = game.Workspace:WaitForChild("Pets"):WaitForChild("Dog").MeshPart
		},
		
		["Cat"] = {
			Chance = 15,
			Rarity = "Rare",
			Name = "Cat",
			Model1 = game.Workspace:WaitForChild("Pets"):WaitForChild("Cat").MeshPart
		},
		
		["Bear"] = {
			Chance = 25,
			Rarity = "Uncommon",
			Name = "Bear",
			Model1 = game.Workspace:WaitForChild("Pets"):WaitForChild("Bear").MeshPart
		},
		
		["Ice Golem"] = {
			Chance = 35,
			Rarity = "Common",
			Name = "Ice Golem",
			Model1 = game.Workspace:WaitForChild("Pets"):WaitForChild("Ice golem")["Meshes/sil (38)"]
		}
		
	}
}

—Function&Tween—

---function---
local size = UDim2.new(0, 100, 0, 100)
local TS = game:GetService("TweenService")

function PetList.Sort(Player : Player)
wait(5)
	local PetFrame =  Player.PlayerGui.ScreenGui.HatchFrame.PetList.PetInfo
	
	for i,v in pairs(PetList.Pets) do
		local PortNew = Instance.new("ViewportFrame")
		local New = PetFrame:Clone()
		PortNew.Parent = New
		PortNew.Position = UDim2.new(0.5,0,0.5,0)
		PortNew.Size = size
		PortNew.AnchorPoint = Vector2.new(0.5, 0.5)
		New.AnchorPoint = Vector2.new(0.5,0.5)
		New.Parent = Player.PlayerGui.ScreenGui.HatchFrame.PetList
		New.Name = v.Name
		warn(tostring(v.Chance).." , "..v.Name.." , "..v.Rarity)
		New.Chance.Text = tostring(v.Chance)
		New.Rarity.Text = v.Rarity
		New.PetName.Text = v.Name
		local Cam = Instance.new("Camera")
		PortNew.CurrentCamera = Cam
		Cam.Parent = PortNew
		print(Cam.Parent)
		
		

		
		Cam.CFrame = CFrame.new( v.Model1.Position , v.Model1.Position)
		print("done!")
		
		local cameraGoal = {
			CFrame = CFrame.new(Vector3.new(0, 6, 4), game.Workspace.PlayerBan.Position),
		}

		local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)

		local tween = TS:Create(Cam, tweenInfo, cameraGoal)
		
		tween:Play()
	end
end

return PetList

  • If Anybody could Help I would really appreciate
1 Like

At first you are setting the camera to see the model inside the ViewportFrame:
Cam.CFrame = CFrame.new( v.Model1.Position , v.Model1.Position)

Then you are moving the camera to look to the PlayerBan thing in workspace. And changing the position of the camera to (0, 6, 4) too.
You are making the camera to look where your Pet model is not located. Thats why the ViewportFrame seems empty. It only contains the Pet model, and your camera is not facing to the Pet.

What you want to achieve with the Tween? Like spinning around the object? A panning? a specific camera focus/plane?

I think you should Tween the camera relative to the model you want to watch, in order to keep the focus on that model

EDIT:
A ViewportFrame needs a part/model inside the ViewportFrame in order to have something to display. I think you are not placing a model inside the ViewportFrame

Im Basically Trying to Tween the Camera to the Pet Model

Yeah, but I think your ViewportFrame has not a Model/Part to show.

You should place the Pet to show inside the ViewportFrame, so the Camera that ViewportFrame is using has something to display.

I dont see where in your code you are placing anything inside the ViewportFrame

I have put the model Inside ViewPortFrame. Put Still Displays Gray

local size = UDim2.new(0, 100, 0, 100)
local TS = game:GetService("TweenService")

function PetList.Sort(Player : Player)
wait(5)
	local PetFrame =  Player.PlayerGui.ScreenGui.HatchFrame.PetList.PetInfo
	
	for i,v in pairs(PetList.Pets) do
		local PortNew = Instance.new("ViewportFrame")
		local New = PetFrame:Clone()
		PortNew.Parent = New
		PortNew.Position = UDim2.new(0.5,0,0.5,0)
		PortNew.Size = size
		PortNew.AnchorPoint = Vector2.new(0.5, 0.5)
		New.AnchorPoint = Vector2.new(0.5,0.5)
		New.Parent = Player.PlayerGui.ScreenGui.HatchFrame.PetList
		New.Name = v.Name
		warn(tostring(v.Chance).." , "..v.Name.." , "..v.Rarity)
		New.Chance.Text = tostring(v.Chance)
		New.Rarity.Text = v.Rarity
		New.PetName.Text = v.Name
		local Cam = Instance.new("Camera")
		PortNew.CurrentCamera = Cam
		v.model.Parent = PortNew
		
		print(Cam.Parent)
		
		

		
		Cam.CFrame = CFrame.new(v.model.Position, v.model.Position)
		print("done!")
		
		local cameraGoal = {
			CFrame = CFrame.new(Vector3.new(v.model.Position, v.model.Position))
		}

		local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)

		local tween = TS:Create(Cam, tweenInfo, cameraGoal)
		
		tween:Play()
	end
end

image
image

Try this first, without the Tween and the changes I made for the Pet function:

function PetList.Sort(Player : Player)
	task.wait(5)
	local PetFrame =  Player.PlayerGui.ScreenGui.HatchFrame.PetList.PetInfo

	for i,v in pairs(PetList.Pets) do
		local PortNew = Instance.new("ViewportFrame")
		
		local New = PetFrame:Clone()
		PortNew.Parent = New
		PortNew.Position = UDim2.new(0.5,0,0.5,0)
		PortNew.Size = size
		PortNew.AnchorPoint = Vector2.new(0.5, 0.5)
		
		New.AnchorPoint = Vector2.new(0.5,0.5)
		New.Parent = Player.PlayerGui.ScreenGui.HatchFrame.PetList
		New.Name = v.Name
		
		warn(tostring(v.Chance).." , "..v.Name.." , "..v.Rarity)
		
		New.Chance.Text = tostring(v.Chance)
		New.Rarity.Text = v.Rarity
		New.PetName.Text = v.Name
		
		local Cam = Instance.new("Camera")
		Cam.CameraType = Enum.CameraType.Scriptable
		PortNew.CurrentCamera = Cam
		Cam.Parent = PortNew
		warn("camera:", Cam)
		
		local clonedModel = v["Model1"]:Clone()
		clonedModel.Parent = PortNew -- clone and parent to viewport

		--Cam.CFrame = CFrame.new(v.model.Position, v.model.Position)
		Cam.CFrame = Cam.CFrame * CFrame.new(0,0,5)
		Cam.CFrame = CFrame.new(Cam.CFrame.Position, clonedModel.Position)
		warn("camera done!")
		
		--[[
		local cameraGoal = {
			CFrame = CFrame.new(Vector3.new(v.model.Position, v.model.Position))
		}
		local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)
		local tween = TS:Create(Cam, tweenInfo, cameraGoal)
		tween:Play()
		]]
	end
end

It Still Display Grey And Not the Pet Model

Ok, I will test your code in studio :yum:

Well, first thing I missed in this code is this line:
Cam.CFrame = Cam.CFrame * CFrame.new(0,0,1)

Change it to:
Cam.CFrame = clonedModel.CFrame * CFrame.new(0,3,5)

Then. I made some adjustments in order to test it in studio, this is working normally for me, its displaying the stuff in workspace inside the ViewportFrames:

local size = UDim2.new(1, 0, 1, 0)
local TS = game:GetService("TweenService")

---Table---
local PetList = {
	Pets = {
		["Aqua Dragon"] = {
			Chance = 10,
			Rarity = "Ultra Rare",
			Name = "Aqua Dragon",
			Model1 = game.Workspace:WaitForChild("Pets"):WaitForChild("Aqua Dragon"):WaitForChild("Part")
		},

		["Dog"] = {

			Chance = 15,
			Rarity = "Rare",
			Name = "Dog",
			Model1 = game.Workspace:WaitForChild("Pets"):WaitForChild("Dog"):WaitForChild("Part")
		}

	}
}

function PetList.Sort(Player : Player)
	warn("ran")
	--task.wait(5)
	local PetFrame = script:WaitForChild("PetInfo")

	for i,v in pairs(PetList.Pets) do
		local PortNew = Instance.new("ViewportFrame")
		
		local New = PetFrame:Clone()
		PortNew.Parent = New
		PortNew.Position = UDim2.new(0.5,0,0.5,0)
		PortNew.Size = size
		PortNew.AnchorPoint = Vector2.new(0.5, 0.5)
		
		New.AnchorPoint = Vector2.new(0.5,0.5)
		New.Parent = Player.PlayerGui.ScreenGui.HatchFrame.PetList
		New.Name = v.Name
		
		--warn(tostring(v.Chance).." , "..v.Name.." , "..v.Rarity)
		
		--New.Chance.Text = tostring(v.Chance)
		--New.Rarity.Text = v.Rarity
		--New.PetName.Text = v.Name
		
		local Cam = Instance.new("Camera")
		Cam.CameraType = Enum.CameraType.Scriptable
		PortNew.CurrentCamera = Cam
		Cam.Parent = PortNew
		warn("camera:", Cam)
		
		local clonedModel = v["Model1"]:Clone()
		clonedModel.Parent = PortNew -- clone and parent to viewport

		--Cam.CFrame = CFrame.new(v.model.Position, v.model.Position)
		Cam.CFrame = clonedModel.CFrame * CFrame.new(0,3,5)
		Cam.CFrame = CFrame.new(Cam.CFrame.Position, clonedModel.Position)
		warn("camera done!")
		
		--[[
		local cameraGoal = {
			CFrame = CFrame.new(Vector3.new(v.model.Position, v.model.Position))
		}
		local tweenInfo = TweenInfo.new(2, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)
		local tween = TS:Create(Cam, tweenInfo, cameraGoal)
		tween:Play()
		]]
	end
end

PetList.Sort(game.Players.LocalPlayer)

I created only 2 parts, and referenced as your Aqua Dragon and Dog

EDIT:
I forgot to mention, that I changed where “PetInfo” (“frame”) is located. Cause that thing will be cloned to be used in GUI, I placed it inside the script, to clone it and place it in the GUI.

Ok, Let Me Test it in Studio Rn :smiley:

I mean, my Screen gui and its script and thing to clone, looks like this for me:
image

Could This Work in A Module Script

1 Like

It Works! :smiley: . Thank you so much just have to fix a few bug on the part

1 Like

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