I am trying to use model-viewer to display glb models on a web page on my laptop (I do not currently have access to a web server). The model is showing up fine, but I cannot rotate, pan or zoom the model. I do not have Threejs installed on my laptop but am using a this CDN link “”
Here is a link to the model viewer to show what I am trying to achieve.
Here is a screen shot of what my web page looks like.
Can someone give me some advice of how to solve my issue?
Model viewer uses three internally but it’s like an engine with little to no relation to how you normally use threejs. You should go to the source to figure out issues.
Thanks for your reply. I just found their forum so I will post there. 
@ntxdave here is a simple model viewer example code that might help you. The html file is attached after the code and since it is standalone you should be able to open it in your internet browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="encoding" content="utf-8" charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Model Viewer Example">
<script async src="https://cdn.jsdelivr.net/npm/[email protected]/dist/es-module-shims.min.js"></script>
<script type="importmap">
{
"imports": {
"@google/model-viewer": "https://esm.sh/@google/model-viewer"
}
}
</script>
<style>
body, html {
position: relative;
display: block;
background-color: #10104b;
width: 100%;
min-height: 100vh;
border: none;
padding: 0;
margin: 0;
overflow-x: hidden;
}
.model_viewer {
background-color: transparent;
min-height: 100vh;
min-width: 100vw;
padding: 0;
}
</style>
<!-- Example usage of Google's Model Viewer element: https://github.com/google/model-viewer -->
<title>Model Viewer Example</title>
</head>
<body onload="document_ready();">
// This is the container where the model viewer component will be added after creation
<div id="div_mv"></div>
<script>
async function show_model_viewer() {
const { ModelViewerElement } = await import( "@google/model-viewer" );
self.ModelViewerElement = ModelViewerElement || {};
const m_viewer = document.createElement('model-viewer');
m_viewer.setAttribute( 'id', 'mv' );
m_viewer.setAttribute( 'loading', 'eager' );
m_viewer.setAttribute( 'autoplay', 'true' );
m_viewer.setAttribute( 'auto-rotate', 'true' );
m_viewer.setAttribute( 'touch-action', 'none' );
m_viewer.setAttribute( 'class', 'model_viewer' );
m_viewer.setAttribute( 'camera-controls', 'true' );
m_viewer.setAttribute( 'zoom-sensitivity', '0.15' );
m_viewer.setAttribute( 'interpolation-decay', '300' );
m_viewer.setAttribute( 'auto-rotate-delay', '20000' );
m_viewer.setAttribute( 'min-field-of-view', '0deg' );
m_viewer.setAttribute( 'max-field-of-view', '110deg' );
m_viewer.setAttribute( 'rotation-per-second', '30.5deg' );
m_viewer.setAttribute( 'src', 'https://raw.githubusercontent.com/GitHubDragonFly/GitHubDragonFly.github.io/main/viewers/examples/legobrick.glb' );
document.getElementById('div_mv').appendChild( m_viewer );
}
async function document_ready() {
await new Promise( resolve => setTimeout( show_model_viewer, 100 ) );
}
</script>
</body>
</html>
Model Viewer Example.zip (1.3 KB)
This example has auto-rotation set so you might consider removing those particular settings (auto-rotate and auto-rotate-delay and rotation-per-second). Just pay attention to the src setting which is currently using an example GLB file from my repository - you might be able to replace it with some of your models. The model viewer component has a bunch of other settings that could be added in the same manner as currently present settings.
If you do bother checking my repositories then you could notice that this code was extracted from the index.html file of my Main Webpage.
There is another similar but a little bit more complex usage example in the code of my GM Viewer.
Wow!
I downloaded your file and installed it on my laptop and ran it and it worked fine. There is tons of javascript code here that I do not really know but I wanted to try showing one of my models. I changed the src element and entered my model name. Since it is in the same folder as where I placed your html file, I just entered the name of my model. I did not show up. What should have I entered.
You would have to have some kind of server to fetch your model.
So, the line would normally be similar to this:
m_viewer.setAttribute( 'src', './your_model.glb' );
The simplest server would probably be python, assuming you have python3 installed on your computer, in which case you would use Terminal or Command Prompt and then:
index.html firstpython3 -m http.serverhttp://localhost:8000It should show you this html page and hopefully with the model loaded.
Other server options could possibly be Node.js and VS Code and whatever else you can find on the internet.
Optionally, if you have github account then just place your model there and use the URL similar to what I have posted in my code (but with your user name and repository that you would be using).
I have node.js installed but I do not (obviously) really do not know how to use it correctly.
Maybe I am too far in over my head. 
That is one of the things that happens as we age.
Just for a test, try loading your GLB model in my GM Viewer to see how it shows for you.
Since this viewer is based on the model viewer, whatever you see there would be what you should expect to see in your implementation.
It showed up fine and is exactly what I want to see. In my version on my laptop, the model also shows up fine, but I cannot rotate, pan, or zoom it.
Here is a screen shot of what I see in your viewer.
Thought I would share the page I am using to show the model. Feel free to look at the code in the attached text file and let me know what I am doing wrong.
index.txt (3.1 KB)
Here is your index.txt slightly modified.
Try it as it is since it currently has my GLB file in src field. At least, I can see it in my browser and use the mouse controls.
Then put your GLB model in the src field and test it again.
index.txt (2.7 KB)
With your model it works fine. With my model, I have the same problem as before. The model shows but I cannot rotate, pan, or zoom.
So there must be some problem with my model. Did it work for you? When I look at the modified page your sent me, I do not see what the difference is. What the heck am I missing?
I had to use https:// to specify the location of the glb file. I was not good at specifying sub folders though.
BTW: I REALLY appreciate what you are doing for me to help me resolve the issue and better understand what I am doing wrong.
You never provided any other file than that index.txt, so there is no way that I can test them.
The files that are specified in index.txt would be: styles.css, script.js and Payment Booth.glb
Also, you should not be using https for local files.
Here are the files:
Payment Booth.glb (1.3 MB)
script.js (587 Bytes)
styles.css (2.0 KB)
I only had to use https with the file you sent me. Otherewise, the model did not show up on the web page (which I really did not understand).
I used the python server and these files together with the index.txt file attached below (which was renamed to index.html for testing).
What I got to see is what the attached picture shows:
localhost:8000 which is from python serverindex.txt (2.6 KB)
This is just a speculation.
If you had your laptop connected to the web server when you were doing the initial testing then your browser probably cached that page.
Once you disconnected from the web server you could still see the model but could not interact with it,
If you clear the browser history and try loading the web page again it might not show you the model any longer.
A stupid question but, what web server?
So what are you telling me to do?
Do I need to be making some changes to my web page?
Is the index.txt file from your post where the model is showing what I should now use?
You need to use a server of some sort.
Browsers are not supposed to fetch local files without user intervention or the server.
Well, this is the only thing I have had a problem with. I have some other things like this but the model is loaded from a remote source.
I thought the model-viewer link to the remote JavaScript threeJS mini source was the solution. Ugh!
I also installed node.js but have not had any luck with that either but admit I am probably not accessing/launching that correctly.
To enable rotation just add the attribute camera-controls . <model-viewer> Staging & Camera Control
