https://github.com/devcybiko/glsmodel
https://github.com/devcybiko/glsmodel
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/devcybiko/glsmodel
- Owner: devcybiko
- Created: 2022-03-23T02:37:08.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-01-19T15:20:25.000Z (over 3 years ago)
- Last Synced: 2025-08-03T14:48:43.089Z (11 months ago)
- Language: JavaScript
- Size: 53.6 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# glsModel Demo
I rewrote the excellent example by TL Ford to create a more declarative method of embedding models and clicking on them in the model viewer.
## Model Files
The `glsModel` requires that the model files be created with names for each material. In Blender this is usually "Model.001," "Model.002," etc... But you can give more descriptive names if you like.
Older versions of this code used special values in the BCF (baseColorFactor). This is a tedious process and error prone. While `glsModel` still supports this mechanism, material "names" are the recommended route.
## Model Viewer
The Model Viewer is a Google-supplied plugin and is documented here: https://modelviewer.dev/.
There is also an excellent model editor here: https://modelviewer.dev/editor/
The Model Viewer can be placed anywhere on the HTML page by specifying an `id="name"` attribute on a tag. Any tag can be used, but the `
` is the best choice.
Also any `action` can be performed when a `material` is clicked. Currently, three actions exist:
* `update` will send user-defined HTML to a user-specified `
`.
* `debug` will report the material.name to the user-specificed ``.
* `error` will report errors in read to the user-specified ``.
## Running the example program
Sadly, modern browsers don't allow running local file examples. You'll need to run a `server` of some sort. Python and PHP servers are readily available but will need to be installed. Alternatively, there is a plugin for VSCode that will launch an HTML file on a local server. See this: https://www.youtube.com/watch?v=Wd7cVmtiFUU
## HTML Code
You must include both the `model-viewer` and `glsModel` scripts in the `` portion of your HTML.
```html
```
To facilitate inserting the `model-viewer` and its associated model into your HTML page, you must add `div` tags with appropriate `id="..."` attributes. Here is a sample.
* DIV WITH ID
```html
```
You must also add a call to the `glsModel.load()` function at **the very end** of your HTML.
* glsModel.load()
```html
glsModel.load("./data/buttonOnBox.json");