i really like your channel. i hope you dont quit because it is really hard to find a tutorial on this topic in this quality i hope you continue this series for a long time and eventually teach us to make some advanced games with this library. please never quit! :)
Brilliant series. I do have a question about how the sandbox shows the model vs babylon. The sandbox is showing my scene in the "correct" way, how i want it. Im importing a model of a room, and in babylon, everything is inverted and mirrored. The objects that were on the left wall are displayed on the right wall and are flipped. So, if the original scene has a sofa and then a chair(from left to right), in babyon, it shows first a chair, then the sofa (from left to right). I get this scene exported from another program so i dont have them in blender. Is there a way to flip this back to original ie, how it is presented in the sandbox through code?
You can rotate the entire scene using the "root" object that gets imported with the rest of the imported scene. This is how you would do it: const { meshes } = await SceneLoader.ImportMeshAsync("", "path to model", "model.glb" ); meshes[0].rotation = new Vector3(0, Math.PI * 2, 0); Math.PI would essentially equal 180 degrees. Here I am taking the root node in the meshes array (which is always 0) and rotating it by providing a new Vector3 and changing the Y-axis to 360 degrees. If you provided Math.PI by itself it'll use 180 degrees, or if you wanted to rotate it 45 degrees you'd use Math.PI/4 etc. Note that if you intend to move other objects around within this scene, they would still be "mirrored" and may not move how you want because everything is rotated. In that case, I would use Blender or something similar to rotate it and save that rotation.
@@CodeSmall Thank you for your reply. Yes, the scene turns but the objects in the scene are still mirrored/fliped but i dont understand why or how Babylon does this? I have a scene with objects in order of 12345 in a glb file, i upload that file in the sandbox and it shows them as 12345 but when imported into Babylon, they are shown as 54321 for no reason. I tried meshes.reverse(); It sounded like that could be what im looking for but it had no impact
@@vedranostrugnjaj9116 I'm not really sure what the problem is but another thing you could look at is the camera. In a lot of BabylonJS examples they use "camera.setTarget(target)" which forces the camera to look at a specific object (the target) but this also rotates the camera. If you have something like that it would be causing those issues. The sandbox uses something like this to keep the model in view of the camera frustum, hence why it usually looks backward in the examples I show. If you use the same code I used in this video the camera won't have any rotation. If that still doesn't solve the issue then I would bring the entire model into a 3d application like Blender and save the rotation to match Babylon's coordinate system. I had plenty of issues myself trying to understand how to properly orient models in Babylon when I first started but those are the steps I'd take.
@@CodeSmall EDIT: I found a solution. Im writing the solution here at the top so you can ignore the question below but i will leave it in for context. So basically,the solution was to add the line: scene.useRightHandedSystem = true; right after creating the Scene and this flipped the scene in the "normal" way. Thank you for your patience, you were very helpful. Again, you can ignore the question below. ----------------------------****--------------------------------------- I have imported the model into Blender and everything looks fine there. I exported it like in the video and again, in the sandbox, its fine, in our project, its mirrored. I've searched the code and in node_modules/babylonjs/loaders/glTF/2.0/ there is a glTFLoader.js and this method that gets called (i've put a console log inside to confirm its being called): the exact line that is being executed when i was testing this is: case 10497 /* REPEAT */: return Texture.WRAP_ADDRESSMODE; GLTFLoader._GetTextureWrapMode = function (context, mode) { // Set defaults if undefined mode = mode == undefined ? 10497 /* REPEAT */ : mode;
switch (mode) { case 33071 /* CLAMP_TO_EDGE */: return Texture.CLAMP_ADDRESSMODE; case 33648 /* MIRRORED_REPEAT */: return Texture.MIRROR_ADDRESSMODE; case 10497 /* REPEAT */: return Texture.WRAP_ADDRESSMODE; default: Logger.Warn(context + ": Invalid value (" + mode + ")"); return Texture.WRAP_ADDRESSMODE; } }; When i hover over Texture.MIRROR_ADDRESSMODE; it says: "Texture is repeating and mirrored". So i comented that and other cases out but there is no impact at all.
@@vedranostrugnjaj9116 Glad you found the solution. That is a valid solution and something I've used in the past. I would recommend checking out the Babylon forums as well: forum.babylonjs.com/ they are quite active and you can also test stuff out on the playground: playground.babylonjs.com/
I didn’t create the assets but I believe that was done to group together meshes. Using empty meshes as the parent to contain multiple meshes is a common practice.
i really like your channel. i hope you dont quit because it is really hard to find a tutorial on this topic in this quality i hope you continue this series for a long time and eventually teach us to make some advanced games with this library. please never quit! :)
Glad you enjoy it. I have many more videos in the works.
@@CodeSmall Seriously... if you make a patreon or something I will gladly donate. This is too good and is exactly what I am needing.
Thanks, maybe in the future Ill consider it. Anything you’d like to see?
@@CodeSmall Character controller with animations =)
Good to know thanks!
This was a great vid - thanks for putting it together. Looking forward to what other stuff you have in the works!
Thanks!
Hey, thanks a lot for the detailed explanation!
Nice vids! Thank you!
Thanks!
Any ideas of why I get error 128 when I try to run npm install babylonjs/loaders ?
Gracias
Brilliant series. I do have a question about how the sandbox shows the model vs babylon.
The sandbox is showing my scene in the "correct" way, how i want it. Im importing a model of a room, and in babylon, everything is inverted and mirrored.
The objects that were on the left wall are displayed on the right wall and are flipped.
So, if the original scene has a sofa and then a chair(from left to right), in babyon, it shows first a chair, then the sofa (from left to right).
I get this scene exported from another program so i dont have them in blender.
Is there a way to flip this back to original ie, how it is presented in the sandbox through code?
You can rotate the entire scene using the "root" object that gets imported with the rest of the imported scene. This is how you would do it:
const { meshes } = await SceneLoader.ImportMeshAsync("", "path to model", "model.glb" );
meshes[0].rotation = new Vector3(0, Math.PI * 2, 0);
Math.PI would essentially equal 180 degrees. Here I am taking the root node in the meshes array (which is always 0) and rotating it by providing a new Vector3 and changing the Y-axis to 360 degrees. If you provided Math.PI by itself it'll use 180 degrees, or if you wanted to rotate it 45 degrees you'd use Math.PI/4 etc.
Note that if you intend to move other objects around within this scene, they would still be "mirrored" and may not move how you want because everything is rotated. In that case, I would use Blender or something similar to rotate it and save that rotation.
@@CodeSmall Thank you for your reply. Yes, the scene turns but the objects in the scene are still mirrored/fliped but i dont understand why or how Babylon does this? I have a scene with objects in order of 12345 in a glb file, i upload that file in the sandbox and it shows them as 12345 but when imported into Babylon, they are shown as 54321 for no reason.
I tried meshes.reverse();
It sounded like that could be what im looking for but it had no impact
@@vedranostrugnjaj9116 I'm not really sure what the problem is but another thing you could look at is the camera. In a lot of BabylonJS examples they use "camera.setTarget(target)" which forces the camera to look at a specific object (the target) but this also rotates the camera. If you have something like that it would be causing those issues. The sandbox uses something like this to keep the model in view of the camera frustum, hence why it usually looks backward in the examples I show.
If you use the same code I used in this video the camera won't have any rotation. If that still doesn't solve the issue then I would bring the entire model into a 3d application like Blender and save the rotation to match Babylon's coordinate system. I had plenty of issues myself trying to understand how to properly orient models in Babylon when I first started but those are the steps I'd take.
@@CodeSmall
EDIT: I found a solution. Im writing the solution here at the top so you can ignore the question below but i will leave it in for context. So basically,the solution was to add the line:
scene.useRightHandedSystem = true;
right after creating the Scene and this flipped the scene in the "normal" way. Thank you for your patience, you were very helpful. Again, you can ignore the question below.
----------------------------****---------------------------------------
I have imported the model into Blender and everything looks fine there. I exported it like in the video and again, in the sandbox, its fine, in our project, its mirrored.
I've searched the code and in node_modules/babylonjs/loaders/glTF/2.0/ there is a glTFLoader.js and this method that gets called (i've put a console log inside to confirm its being called):
the exact line that is being executed when i was testing this is: case 10497 /* REPEAT */: return Texture.WRAP_ADDRESSMODE;
GLTFLoader._GetTextureWrapMode = function (context, mode) {
// Set defaults if undefined
mode = mode == undefined ? 10497 /* REPEAT */ : mode;
switch (mode) {
case 33071 /* CLAMP_TO_EDGE */: return Texture.CLAMP_ADDRESSMODE;
case 33648 /* MIRRORED_REPEAT */: return Texture.MIRROR_ADDRESSMODE;
case 10497 /* REPEAT */: return Texture.WRAP_ADDRESSMODE;
default:
Logger.Warn(context + ": Invalid value (" + mode + ")");
return Texture.WRAP_ADDRESSMODE;
}
};
When i hover over Texture.MIRROR_ADDRESSMODE; it says: "Texture is repeating and mirrored". So i comented that and other cases out but there is no impact at all.
@@vedranostrugnjaj9116 Glad you found the solution. That is a valid solution and something I've used in the past. I would recommend checking out the Babylon forums as well: forum.babylonjs.com/ they are quite active and you can also test stuff out on the playground: playground.babylonjs.com/
Hi, what is the reason of having a parent object for each individual asset you have in blender ? eg. tmpParent001.
I didn’t create the assets but I believe that was done to group together meshes. Using empty meshes as the parent to contain multiple meshes is a common practice.
What if we dont use Blender? Why the TS fetish. If you use JS it's a universal tutorial. TypeScript is just another layer of unnecessary complexity.