Load 3D model in my website

Questions
1

Good morning. I’ve a question, but I’ve tried to load a 3D model, gltf format, in my own website, using SceneLoad Append method, but it doesn’t work why?

2

It definitely importing at its original position 0,0,0.
Try the following
BABYLON.SceneLoader.ImportMesh("",“gltf/”, “vintageFan_animated.gltf”, scene, function (newMeshes) {

	 newMeshes[0].position = new BABYLON.Vector3(x,y,z);
		});

where x,y,z is a position visible by your camera.
The strange thing with BABYLON is that although the gltf file may comprises of many meshes, when changing the position you have to treat it as a SINGLE mesh.
P.S. You can get the vintage fan sample from the List of available meshes page, open it in a playground and export it.

3

I tried your code, but the result is only a blue screen. Developer tools, report me me “failed to load resource”.

4

Hi @Elisa_Ltc and welcome to the forum. Where is you file stored relative to the index page of your website and how are you referencing it. Using your original code what messages do you get in the console?

5

Hi @JohnK, my file now is both on my website httpdoc subfolder and obviously on my local computer. When i try to import my model, result is

Unable to import meshes from ./babylonjstryStandGimatic.gltf: Error status: 404 Not Found - Unable to load ./babylonjstryStandGimatic.gltf

6

you prob forgot the slash at the end when importing
./babylonjstry/
try
BABYLON.SceneLoader.ImportMesh("",“babylonjstry/”, “StandGimatic.gltf”, scene, function (newMeshes)

7

Sorry, but not works. Maybe I’m not applying the right method to import 3D in my website? I read Babylonjs documentation, but I’m very confused.

8

also make sure you are running the HTML file from localhost

9

Now works, but there aren’t textures. Maybe I’ve to load tetxure in a folders?

10

I was hoping that you would give the file and folder structure of your app.

and the exact and complete line of code for your sceneLoader append.

However I am glad you have it working.

1 Like
11

the textures have to be in the same folder as your gltf file unless they point to another directory in the gjtf file definition. Open with an editor the gltf file to verify.

12

Some textures are loaded (as images textures), but for example the materials (example chromium material) applied to mesh are not loaded.

13

If you don’t see textures you should try to set an environment texture Use a HDR environment (for PBR) - Babylon.js Documentation

3 Likes
14

I’ve tried your code and that’s is right solution! Thank you very much

1 Like