While I changed the position by the “Button +1”, I got unnecessary space between these rooms. Please check here:
I tried changing positions. But while I do that, it changes all the main room positions as well.
Hi –
When rooms are all moved to position (0,0,0) they should be perfectly aligned. However, they are not. Maybe this offset causes the space between rooms, when you change their positions?
– Pavel
2 Likes
Thank you for your response Pavel. Yeah, I noticed that.
While I set everything to 0 they are not in the same line.
In the Public folder, there is the Models folder. And there is the raw 3d file which I converted to GLTF by using NPX…
And after that, I remove their positions and gave by my own.
Do you think it’s the 3d objects Error? or in my Code?
Hi again –
I have no experience with React and I do not know what exactly happens under the hood. I tried the 3D models in another program and they appear to be OK. So, I think there is no problem with the GLTF files.
Here is what I tried: boytchev.github.io/suica/misc/qa/SK_01_01_2023
– Pavel
2 Likes
Hello Pavel 
I really appreciate it.
I checked your code. Can you please send me the file? So that I can have a look.
Hi –
All the files are here: github.com/boytchev/suica/tree/main/misc/qa/SK_01_01_2023. The actual code is in the file index.html.
– Pavel
1 Like
the models aren’t the same size it’s as simple as that. first of all when you use gltfjsx to convert them it has to cut off numbers somewhere, it has two digits by default, for instance position={[0.23, 1.56, 0.01]}. that might not be enough, do: npx gltfjsx model.glb --transform --precision=6
when you just load the scene though without the jsx graph:
export function RoomOne(props) {
const { scene } = useGLTF("./models/room1.glb")
return <primitive object={scene} {...props} />
and then move them all to [0,0,0] it becomes evident they’re not aligned.
1 Like
Doesn’t this demo provided by @PavelBoytchev demonstrate that the models are infact the same size and aligned to 0,0,0 correctly? It’s a very odd issue tbf.
boytchev.github.io/suica/misc/qa/SK_01_01_2023
No bro. If all the sizes are correct then why it’s not working on my react project?
Right now I’m trying to convert as @drcmda said. Let’s see if its works.
Do you know any solutions? I put my code there please check that.
they are not aligned, if you zoom in you’ll see it. the above screenshot i made has all models at 0/0/0.
2 Likes
as i said, you’re facing two issues, you converted the models with a precision that’s too narrow. that only applies when you are using the jsx graph. if you primitive object the scene the model will display as is, and the rooms are slightly offset from each other.
2 Likes
Hi –
The sizes are not exactly the same – even in my test case, when you change the positions, you can see slight change, usually within a pixel or less. The gaps in the original code, however, are much larger, by an order of magnitude.
When I put all models in (0,0,0), the results in React and in Suica differ significantly.
Although I cannot help any further, I’d be curious to learn the reason for this problem.
– Pavel
2 Likes
i think you put way too much effort into this 
, i’ve already explained where the bigger spaces came from (gltfjsx precision, i hope @Sayedul_Karim knows what i am referring to). im not sure what suica is, but in the end this is just a gltf rendering in threejs.
2 Likes
@drcmda –
Yes, you might be right that I put too much efforts into this. In any case, I managed to make the original code work (by patching coordinates in the code).
Could you try these 3 changes?
Room1.js, line 11, change:
<group {...props} dispose={null}>
into:
<group {...props} dispose={null} position={[0.45,0,0]}>
Room5.js, line 11, change:
<group {...props} dispose={null}>
into:
<group {...props} dispose={null} position={[-0.445,0,0]}>
PartOne.js, lines 28…35, change:
[0.0, 0.0, 0.0],
[-4.0, -2.7, 0.0],
[-0.5, -2.7, 3.6],
[-7.6, -5.5, 0.0],
[-4.5, -5.5, 3.6],
[-0.4, -5.5, 7.2],
[-7.6, -8.3, 3.55],
[-4.0, -8.3, 7.2]
into:
[0.0, 0.0, 0.0],
[-3.6, -2.7, 0.0],
[-0.0, -2.7, 3.6],
[-7.2, -5.4, 0.0],
[-3.6, -5.4, 3.6],
[-0.0, -5.4, 7.2],
[-7.2, -8.1, 3.6],
[-3.6, -8.31, 7.2]
– Pavel
1 Like
Thanks, for marking my patch as a solution, but it is not a true solution. It does not resolve the problem, it just hides it. It might be good to investigate more on the issue, why rooms 1 and 5 behave differently.
You may also consider the advice of @drcmda.
Good luck,
– Pavel
PS. I made a typing error – the y coordinate -8.31 in the last line is wrong, it should be -8.1.
2 Likes
I convert as you said and notice that room1 and room5 have default position values. Without changing room1 and room2 values all objects are perfectly angled.
But now after @PavelBoytchev code, it’s working fine for me.
But here’s a question I have. If I added another button Button + 2 how can I change the position by +2?
What function I should add in button +2 so that the position will increase by +2?
I mean kinda that
Here’s the code
Thank You, Man. You made my day. You are Awesome 
I really appreciate your effort and the time you spend on this. Hopefully Someday I can pay you back.
Btw I have another question
Here’s a question I have. If I added another button Button + 2 how can I change the position by +2?
What function I should add in button +2 so that the position will increase by +2?
I mean kinda that
Here’s the code