Display jus a Texture image in case mesh is not found

Questions
1

Hi there,
I have imported mesh link from github but didnt add mesh name. If in case a mesh is not found then i want to display a texture image instead of error message. Am i implementing in right way? Suggestions please.

Here is pg link.

2

I believe not. Since all I get are multiple errors :wink:
Let’s just take this from the start because I’m not sure I understand what you want.
Do you want to display an image while the mesh is loading? Or do you want to replace a mesh with an image? Or do you want to customize an alert with a design?
Obviously, a texture can only display when assigned to a mesh. Using i.e. the 2D GUI you can display a texture in a container. Or on the html/doc side, you could display an alert with css design. Or do you want a loading screen that would display if a mesh cannot load? You will have to clarify that for us.

1 Like
3

If in case mesh is not availabe, then i want to replace a mesh with an image which is used as texture image(image URL), here i mean to say, image URL.

4

So you want to display in the 3D scene, an image instead of your mesh, is that it?
Problem is you would need to know the size of this mesh first. If you know this then you could replace it with i.e. a sprite or an ADT for mesh (a plane). But without knowing the size of this mesh (and then position and rotation), how would you know where and at what size to create your sprite?

Edit: can you please confirm the above. You want to replace a mesh that generates an error with a 2D image representation? In case, I’ll try call-in some people because aside from providing the information in a header (i.e. in a JSON file) or storing them in BJS, I have no faen clue if there’s any way to retrieve the bounding box information from an import that did not fully load. I’m afraid this is beyond my expertise.

2 Likes
5

Yes mawa, an image instead of mesh on a plane and and image size is 720 x 480 pixels.

6

Or can we call a function in ImportMesh?
For example :

    BABYLON.SceneLoader.ImportMeshAsync("",
      "Model_URL",
      "Modelname.glb", scene, onError={onError})
Note : This onError will work in an image tag, Im not sure in here. :neutral_face:

So that i can define a function called onerror to put an image something like this,

 const[error, setError] = useSate("");

const onError (){
setError(<img src={} alt={} />)
}
7

Replacing with a plane of a known size and assuming the model is also positionned in BJS, that would work. For the rest, I really don’t know. May be @Blake has an idea?

8

It looks like the issue in the PG is that you’re trying to use success and error callbacks that don’t exist for the function ImportMeshAsync. EG you could pass onFullfilled and onRejection callback functions to .then() like below instead. :slight_smile:

But like @mawa IDK how you will decide where to place the plane placeholder mesh and what size to use if it’s an unloaded arbitrary/user model that failed to load, otherwise if it’s a known model then you would know that of course… Yawn I’m still waking up but I suppose that makes sense now if I understand the situation right LOL. :wink:

3 Likes
9

Ok, let’s talk about this again. You have just one single mesh (or may be more) but YOU DO KNOW the size of each mesh and THE POSITION, ROTATION AND SCALING in the 3D scene.
With this, we can work something. However, the size expressed in pixels is incorrect. The size we need is the size of the mesh in BJS values.

Here’s what I suggest to move forward:

  1. Draw a simple cube around your mesh(es) in your 3D app. Remove the mesh(es), import the cube(s).
  2. Within BJS, position, scale and rotate your cube(s) (mesh(es) representation) the way it/they should be.
  3. Share this PG with me/us.
10

Thanks @Blake and @mawa .
I have tried it this way. When there is not model to display then with error, im displaying a plane with texture. Is it fine to approach this way ?

Here is a pg link.

1 Like
11

Okay @mawa . I will follow as you suggested and get back.

12

Hmm if it’s not meant to replace the mesh in the 3D scene but instead is just a visual error message to show the user then using Babylon GUI might be a good approach, eg to put an error message/image where the user can see it and have them click a button button to dismiss it… I’m still not for sure which is the goal thou or what kind of app/website you’re making? :slight_smile:

13

Yes, I guess it is. Looks like you already did it yourself.
You just need to make sure your plane matches the size, position, rotation of your mesh(es).
If you have multiple of these you can just store the information for each mesh as options to generate a plane. But I’d say the base is here now. GJ, :smiley:

3 Likes
14

GJ on @mawa and @Blake too for the awesome and kind help :slight_smile:

2 Likes
15

Thanks for advice @Blake. Let me tell you what im trying to approac with my UI.
I have a 3D models and when user wanted to add custom image on 3D model(For preview) to see how the product wlll look like after priniting the image. I have products lile, wall frame, Mug, Pillow, canvas, and in future will have many products. Goal is to apply texture image and 3D priview of the Product to give them real time experince.

16

If I can allow myself, in terms of UX and speaking about a 3D environment, the user expects to see the result in 3D. These objects don’t look to me like they would be very complex (and you can still use LOD). I believe it should be possible to render the customized object close to real time (with less than 1 to 2 sec delay). Of course, my opinion only.