How to make Viewport models actually look good?

[NinjoOnline]

I got 2 models, an oven and a seat. The oven is facing forward which is kinda correct, the seat however is facing its side

This is the seat the right way

Code referenced below

local viewport = Instance.new('ViewportFrame')
	viewport.AnchorPoint = Vector2.new(0.5, 0.5)
	viewport.BackgroundTransparency = 1
	viewport.Size = UDim2.new(0.8, 0, 0.8, 0)
	viewport.Position = UDim2.new(0.5, 0, 0.5, 0)
	viewport.BackgroundColor3 = Color3.new(1, 1, 1)

	local camera = Instance.new('Camera')
	viewport.CurrentCamera = camera
	
	local clone = item:Clone()
	clone:SetPrimaryPartCFrame(CFrame.new(0, 0, 0))
	clone.Parent = viewport

	local cameraPosition = Vector3.new(0, 1, 5) -- Been playing round with these numbers
	camera.CFrame = CFrame.new(cameraPosition, clone.PrimaryPart.Position)

Or how to even have it looking like this

ViewportFrame Release

(ImageTransparency/ImageColor3 would be appreciated, I had to change the transparency of each individual part to fade out)

Or even like this

ViewportFrame Release

I’m using it to give a 3D preview of buildings players can build in my game: http://doy2mn9upadnk.cloudfront.net/uploads/default/original/4X/3/7/8/378b131ea2643866e40541da227b92438dc383b2.mp4

[Operatik]

A trick is to rotate the PrimaryPart and resizing it so the lookVector(or whatever vector is) faces towards the desired direction. Trial and error.

[Quoteory]

Yeah that is the way to go

I explained this in my reply here

Making a model face forwards?

First we have to setup the pet first have your pet and a small cube (1x1x1) size is usually perfect [image] ignore the guy in the back please set the cubes front surface to hinge [image] this is so we can see the front direction easily position the cube inside the pet [image] and align the pets face with the hinge direction now just group those together and set the primary part to the cube after you have done that place the pet in ReplicatedStorage [image] create a local script loc…

[NinjoOnline]

What about getting the model to rotate then?

[Quoteory]

I was creating the script as you typed that haha

you don’t want the model to rotate, you want the camera to rotate which keeps everything consistent and provides an illusion of the model rotating

LocalScript Example

local Player = game.Players.LocalPlayer
local RotateGui = script.Parent.Background

local Replicated_Storage = game:GetService("ReplicatedStorage")
local Folder = Replicated_Storage:WaitForChild("Folder"):GetChildren()
local ViewportFrame = Replicated_Storage:WaitForChild("ViewportFrame")
print(#Folder)

for i = 1, #Folder do -- loops through all children of Folder
	local Clone = Folder[i]:Clone() -- clones the child
	local PrimaryPart = Clone.PrimaryPart -- the clones primary part
	local Offset =  CFrame.new(0, 0, 7) -- the offset 
	-- cloning and setting up the viewportframe
	local ViewportClone = ViewportFrame:Clone()
	local Camera = Instance.new("Camera", ViewportFrame)
	ViewportClone.CurrentCamera = Camera
	Clone.Parent = ViewportClone
	ViewportClone.Parent = RotateGui
	
	spawn(function()
		while true do
			for i = 1, 360 do
				Camera.CFrame = PrimaryPart.CFrame * CFrame.Angles(0,math.rad(i),0) * Offset
				wait()
			end
		end
	end)
end

btw the red part is the primarypart I showed how to set it up in a reply above

[NinjoOnline]

That seems to work pretty well

Are there any tricks to getting model sizes to look the same in the frame, even if one is much larger than another in the real world space?

Like this for example, the white object is a smaller model, and thus appears smaller on the frame, however the seat object (the red one) is a larger model, and just takes up basically the entirety of the frame (can’t even see the entirity of the model)

Are there work arounds to this? I don’t wanna set the camera to be far away to fit in larger models as then smaller models would be too small to see at all

[Quoteory]

you can add more consistency by adding the models size to the offset I believe, I’d try Model:GetExtentsSize

also your UI is amazingly clean I love it bit offtopic but I had to say it

heres how to do it

change your offset variable to something like this

local Offset =  CFrame.new(0, 0, Clone:GetExtentsSize().z * 2)

the Z offset is now the model’s size * 2

appears like this in viewportframes

the actual model size is like this

[Operatik]

Looking good, I’ll find these resources useful and soon will be integrated in my personal stuff, gotta see how ViewportFrame works.

[RRandomkrys (Random)]

I suggest using coroutines instead of spawn. Also, you can even use a ModuleScript that takes an object and angle offset (if it faces the wrong way) so you can organize the code better.

But great job! I’m happy you guys found a solution

[NinjoOnline]

Getting problems with newer models.

local offset =  CFrame.new(0, 0, clone:GetExtentsSize().Z*1.25)

Ends up having these models

Look like this in the UI

The L shaped couch is incredibly small. The smallest couch (in the middle of the UI) is the larger.
Here the hitboxes have been made half transparent. The Hitboxes are the PrimaryPart for each model. The L shaped couch uses two parts unioned together to make 1 hitbox.

Guessing the hitbox sizes have something to do with it. These have to be sized like this and the PrimaryPart as I use them for placement. Would I need to add another part like you have (the red dot part) in like the centre, that way it’s all the same size and position, etc.?

[Operatik]

It’s obvious. You should really apply that to the models.

[NinjoOnline]

What do you mean by that???

[Operatik]

Elaboration: Centering it may or may not require another part(or CFrame for slightly advanced method)

GetExtentsSize().Z makes them look smaller, it zooms away from the object. Right now it’s trial and error to find the expected result. OOF!

An ideal way to deal with this is to use an invisible part that is the largest possible model that can be added. Using that part, we can now have consistent model sizes in ViewportFrame.

[NinjoOnline]

Well I’ve used a part that is centralised inside the model. However this would kinda make :GetModelExtentSize() not work

The small blue cube is 1x1x1 and in the exact centre of each model. However the models still appear incredibly small. Removing :GetModelExtentSize() and setting the Z on the offset to say 10 just means that bigger items may be too big to fit and smaller items will be too small to see

Model on the left is too big, middle model is a decent size, and the model on the right is still too big

[Operatik]

Did you try the solution of using a fixed large part for its ‘fake’ hitbox in the ViewportFrame to create a fixed GetExtentsSize().Z?

[Quoteory]

That is not a ideal way as size does not matter, the issue here is shape if you scroll up you can see I posted a huge chair and a smaller one and both looked the same in viewport

[Quoteory]

Use the method I showed you with the red cube in the center, it works fine for me

[NinjoOnline]

The first image in my reply above uses a part in the centre of each model, however, each one has a completely different size to them

Maybe it’s because of the way the model is shaped makes it look smaller, but even so, if I take examples from the sims 4 ui

All the items are big and clear, and even tho the items in sims have different sizes, they all look big and clear in the UI, while the items inside my viewports look real bland, and small

[Quoteory]

It’s hard to keep rotation and make them look “Big” especially with L shaped couches

[NinjoOnline]

Hmmm that would make sense. What would be the best way then to get the objects to look the same as the objects in the sims ui? No rotation. Just position of the camera and getting the model to face forward