Imports models in local, problem

Questions
,
1

Hello, I’m trying to import a 3D model to use with Babylon locally, but I haven’t been able to do it yet. I have checked that it works correctly in the sandbox, and it indicates that it’s appropriate. The model is exported in Blender as glTF2 (although the file extension is .glb, I’m not sure if that’s important because I also converted it to a .babylon file in the sandbox and the issue persists).
The code I’m using is from the documentation for ES6/NPM Support. I have only added the part that I believe should work for importing locally. Here it is:

(at first)
import { SceneLoader} from “@babylonjs/core/Loading/sceneLoader”;
(in the body)
SceneLoader.ImportMeshAsync([null], “./”, “model3d.glb”, scene).then((result) => {
var dude = result.meshes[0];

if (dude) {
// the model is ok
console.log(“Malla ok:”, dude);
//dude.scaling = new Vector3(0.5, 0.5, 0.5);
dude.position = Vector3(5,5,5)
} else {
// model not ok
console.log(“Error not ok.”);
}
console.log(“the dude is:”, dude);
});

I believe I have tried everything, changing the directory (the only one that at least passes within the if block doubt is this one. I believe it refers to the public folder (which I had to create myself after many trials and forum assistance because the documentation does not mention anything about it for local installation) where the model and HTML are located. I also tried manually changing the file extension to .glft and .glft2, converting the file to .babylon in the sandbox (and changing it in the code as well, of course, model3d.glft or model3d.glft2 or model3d.babylon).
The best results are not ok, and the dude is is =undefined.

The download I used is exactly the one from the documentation for ES6/NPM Support. I’ve been looking at the loaders for glTF, although I suspect they should come included by default. I’m not entirely sure how to use them either, but from what I understand, it would involve the function parameter at the end. I’m not sure. Nevertheless, I haven’t been able to make it work even in .babylon format. I’ve tried changing the numbers in the result.meshes array and within the function itself [null], [“1”,“2”], but nothing seems to work.

I have tried two dozen other things, and I don’t know where else to try. If anyone can help me, I would be very grateful. Greetings.

2

From my memory you have to set empty string as first parameter to load all meshes of file?

SceneLoader.ImportMeshAsync("", “./”, ...)

Also found Example PG of Docs:

Additionally you miss new-operator:

dude.position = new Vector3(5,5,5)
1 Like
3

From the example project linked on the docs: babylonjs-webpack-es6/src/scenes/loadModelAndEnv.ts at master · RaananW/babylonjs-webpack-es6 · GitHub, you’ll need to install the @babylonjs/loaders package to import the GLTF loader.

2 Likes
4

ufff, okay, that’s fine, very thanks again. I owe you two now XD. These details should be in the manual, shouldn’t it? Thanks also for the “new” thing. Now I have a different problem. The log tells me that the model is there, but the only thing that has changed is that the background of the scene has turned black. That makes me assume that the model must have appeared gigantic and is inside the floor plane (which I can see). I tried scaling it down with dude.scaling = new Vector3(0.01, 0.01, 0.01); and dude.position = new Vector3(0,0,0);, but it remains the same. Any ideas, if it’s not too much to ask?

5

Try scaling like this, because gltf uses right handed system with negative z-scaling:

dude.scaling.scaleInPlace(0.01)
1 Like
6

Ok, thank you for your clarification. Actually, I’m not using the example package. I downloaded the modules one by one as indicated in that part of the documentation. I checked, and the loaders folder is indeed present with the others, if that’s what you’re referring to. Should I use import { something } from "@babylonjs/loaders/something"; in order to use GLTF?

7

They are: Loading Any File Type | Babylon.js Documentation :slight_smile: But I do agree that sometimes it’s not obvious where stuff is on the docs

1 Like
8

Nop, everything remains the same, the floor in the center and the background black instead of blue as it should be. I tried moving the dude far away to see if the blue background would reappear, but with this configuration, the background remains black, and I can’t see the model.
dude.scaling.scaleInPlace(0.01)
//dude.scaling = new Vector3(0.01, 0.01, 0.01);
dude.position = new Vector3(1000000000,1000000000,1000000000)

9

I just noticed that the “fix” is only working with the .babylon model. When I use .glb or try to change the extension to .gltf or .gltf2 (if that’s even possible), it gives me errors and the model never loads. So, it seems that the solution for scaling with GLTF format wouldn’t be apply here. And I continue with half of the first problem xD. I can, or it seems like I can (because it’s not confirmed), import .babylon models (or darken the background to black), but I can’t do it with gltf-glb files.

10

You do just like the example package (you don’t need to use it, it’s just showing how to):

import "@babylonjs/loaders/glTF";
1 Like
11

Oh, I see. I hadn’t realized that. Thank you very much, now the gltf files work perfectly. Regarding the .babylon files, I’ve made progress since I imported the previous one. Now, if I scale it up around 100 times, I can see it at normal size, but the sky is still black, the model is upside down, and it lacks animation, unlike the gltf format, which works perfectly. However, this doesn’t bother me much anymore because I’m satisfied with using gltf for now. It’s also possible that these issues are due to export options since I did a quick export to test it. So, if you don’t think it’s something different, I’m good with it. Thank you very much for your help.