Threejs and Model-Viewer

Thanks for the reply but I already had camera-controls included. I did adjust to add the touch-action=“pan-y” but it had no effect. I think the problem is that I need to have a web server running. I am going to do some more research. I am very near giving up on model-viewer and looking for another way to accomplish my task.

Again, thanks for the reply.

For authoring either use Live Server extension with VSCode or use https://simplewebserver.org/

I tried simplewebserver but that did not work either.

Can anyone suggest/recommend a web site where I can try showing my glb files on a web page? I have tried many things suggested in this forum thread and from suggestions on the ThreeJS forum but cannot not get anything to work (show my model is AR - pan, rotate, and zoom). I do not have a web site and I only have my laptop computer. The original post on this thread shows (I hope) what I want to accomplish. I have several models (glb files) of car wash equipment that I would like to present in AR mode on a set of web pages. I have shared one of my files with others and they were able to view them fine. When I try to do it on my laptop (as the topic says), it AR mode does not work. I do not have a web site and only have my laptop, so I do not have a web server.

Again, can anyone give me some idea of where I might be able to try my web page to make sure I am adding the right code of how I could get a server to work on my laptop? Are there any “free web site hosts” where I could try?

Once again, here is the model I am using for my testing purposes.
Payment Booth.glb (1.2 MB)

You could upload your model into a GitHub repo that you created, or forked.
e.g., I uploaded your Payment Booth.glb model to my assets repo, into the models folder.

GitHub : GitHub - Sean-Bradley/assets: A place to store assets when you just need somewhere to put them

You can then create a CDN link for it using JSDeliver → Tools → GitHub
JSDeliver GitHub Tool : Migrate from GitHub to jsDelivr

I created this CDN link using the JSDeliver tool,
Payment Booth.glb : https://cdn.jsdelivr.net/gh/Sean-Bradley/assets@main/models/Payment%20Booth.glb

And then I can reference it in a SBEDIT. Here it is your model in an XR example.

and here is a link without the code editor
https://sbedit.net/embed/9f6c29818aba230aa76b07b3946d3cd74cd2a713

3 Likes

Thanks for your reply. Now, let’s call me stupid. I do not see how this lets me view my model on my web page with the ability to pan, rotate and zoom. When I looked at your examples, I did not see any of those capabilities.

It appears (from all the examples I have seen online) that model viewer does exactly what I would like to do but I can not get it running on my laptop so that the AR functions (rotate, pan and zoom) work. The model shows up on my web page but without those AR functions working.

OK, I have really messed something up. I cannot see my model at all using Model-Viewer. I have uploaded 2 files. An index.html file and the model I am trying to view. I need some help:

  1. Can somone please tell me what is wrong? I had this working once before but I have made some type of change that now has model not showing up at all.

  2. I do not have access to a web site (I am trying to do this on my laptop) so if you correct my mistake can you tell me if you can zoom, the model. If not, can you tell me what to do to correct the issue.

  3. I need some advice as to whether I can run a web server on my laptop an if so, what one should I try and how to do start the web server.

I do not want to give up on this mission. I want to be able to show products/models in an interactive 3D format but I currently have limited resources to use.

index.html (1.1 KB)
Payment Booth.glb (1.3 MB)

I think the simplest solution is to host your glb models online and update the model-viewer src tag to point to these models.

Here is a link to your model hosted on TinyGLB:
https://cdn.tinyglb.com/public/assets/e3e066f74a934c06bea7338c569b0cf2.glb

So you would update the model-viewer src tag as follows:

<model-viewer src="https://cdn.tinyglb.com/public/assets/e3e066f74a934c06bea7338c569b0cf2.glb"

Alternatively, you could embed the models from TinyGLB using an iframe:

<iframe src="https://tinyglb.com/viewer/e3e066f74a934c06bea7338c569b0cf2" style="border: 0; height: 600px; width: 100%"></iframe>

You can also view your model directly on TinyGLB:

Disclaimer: I run TinyGLB, which provides free GLB model hosting (I hope you find it useful)

You have given me the capability of doing exactly what I have been trying to do. :+1: :+1:

Now, I tried both the iframe and model-viewer links and the iframe one worked perfectly but the model-viewer one gave me the same results I was getting before (the model did not show up). I think it has something to do with not having a web server running on my laptop.

Now, I have tried another model just for a test. Now some questions:

  1. Now that I have uploaded a model, is there a way to edit it after it has been there a while or must any editing be done at the time I upload it?

  2. How do I view the models I have already uploaded?

  3. Can I delete a model I have previously uploaded?

  4. Can others view the models I have uploaded (other than on the pages where I link to the model)?

You shouldn’t need a local web server to get model-viewer working using a hosted GLB. I’ve updated the index.html you provided with the GLB link and it works fine for me. Perhaps check the Developer Tools console in your browser to see if an error is reported.

Here is the updated index.html file for you to try:
index.html (1.2 KB)

In terms of your questions about TinyGLB:

  • It’s not currently possible to edit existing models, you need to upload a new one
  • You need to make a note of the links provided when uploading a model since there is not yet a login for viewing all of your uploads.
  • It’s not currently possible to delete a model (they are automatically deleted after 6 months)
  • Other people can only view your models if they know the URL of the model

Yes, the index.html file worked. :+1: :+1: :+1:

OK, the other answers are what I needed to know. I will do some more experimenting. You have put me in a direction to move forward.

Do you plan to add any of the features (updating models, deleting models, viewing all of my models)? In particular, if I purchase the plan, these are features I would like to see.

You have made my day. :grinning: :grinning: :grinning:

BTW: I now have the model-viewer link working as well.

I do plan to add user accounts to allow managing uploaded models, but I can’t give any timeframe on that right now.

1 Like

Great :+1::+1::+1::+1::+1:

I am building a set of web pages that I hope to share in a few days. Would you mind sharing your logo in a png format so I can recognize you on the pages?

OK, I used Gestaitor (trial version) to update my test model. I then used TinyGLB to test its features. Here is the updated Test Model.

I will now go look at a more complex model in Gestaitor and see how it goes.

I cannot get the glb file below to work on TinyGLB. When I try to publish it, I get an error message. Hoping someone can give me a clue about the problem and how to fix it.
Blower-Dryer-Mammoth.glb (3.2 MB)
This is one of the last elements I need to finish a project I am trying to complete so I can share it with everyone.

I finally got my web site on my laptop working using model-viewer thanks to TinyGLB. I tried to share web site in a zip file but it is too big.

Thanks to TinyGLB for giving me a solution.