Hello,I had the problem,The model was loaded normally when vue2 was used previously,But I’m using vue3 and I don’t know if it’s a version issue, the model doesn’t load, May I ask what the problem is?
error message:
code:
As I’ve commented on your other post, it would be helpful if you can share your project.
- If the model does not load, it may be that there is a problem with the model path, or there is a problem with the model, and the model and the model path are checked.
- getBoundingInfo usage error, this method does not recursively calculate the child mesh, and Mesh[0] is an empty transform mesh, and the boundingBox you get is not correct. getHierarchyBoundingVectors should be used instead, see the documentation for details:Mesh | Babylon.js Documentation.
- “@babylonjs” mixing with “babylonjs” packages can cause unexpected problems. You should install the extension @babylonjs/loaders to use SceneLoader.
Here is my project address, and I would appreciate it if you could help me find the problem
Thanks for your advice, I modified the code according to your advice, but the model still failed to load successfully. I have just built a vue2 project, which can load the model normally,The code is pretty much the same, but one is vue2 and the other is vue3. I don’t quite understand what the problem is. I believe you can see that I haven’t learned the rendering model systematically. I hope you can point out the problem for me, thank you
This is the error message after I modified it：
The yellow error means that the package to load gltf files was not found. Do you have import "@babylonjs/loaders/glTF"; in your script?
Yes, the error disappeared when I kept @babylonjs/loaders and @babylonjs/core versions the same, but I went back to the original error
I’m sure my model file is fine because I can load it when I use vue2
First, this isn’t the cause of the issue, but take care to not mix UMD (babylonjs) and ES6 (@babylonjs) packages in your package.json. This can cause other conflicts:
"@babylonjs/core": "^6.21.1",
"@element-plus/icons-vue": "^2.1.0",
"axios": "^1.5.1",
"babylonjs": "^6.21.1",
"babylonjs-loaders": "^6.21.1",
I recommend using just @babylonjs/core and @babylonjs/loaders.
Second, the actual cause of the issue is the mockjs library being used in the code. It seems that this library is replacing XMLHttpRequest and making it return incorrect data:
You can see that it is returning the response as a string, when it should be an ArrayBuffer. If you comment out the line that imports the mock code: blog/src/main.ts at dev · 2309241494/blog (github.com), the model will appear
This is really a problem caused by my negligence,thank you very much for your help
No problem, this is really an unexpected side effect of the mockjs library 
Yes, mockjs caused unexpected problems, but I was impressed with the way you found the problem, I never thought mockjs caused the problem, your technical level is really impressive，Thank you for solving the problem that has been bothering me for days
1 Like
Excuse me, can I ask you a question, my camera is always on the back of the model, can you help me look at the problem?thank you
RenderTargetTexture Water Sphere | Babylon.js Playground (babylonjs.com)
Here’s an example of a focu mesh that should help you.
Not all models have a bounding box center point that matches the actual anchor point.
Assuming that the origin of the scene is the center point of the model, it is likely that the model is too large and the camera cannot see the complete model, or the actual location of the model is far away from the center point and the model cannot be seen.
The model can’t tell which direction is front or back, so the alpha and beta values of the camera are usually fixed values.
Okay, thank you