base on Easily display interactive 3D models on the web and in AR! # The `<model-viewer>` project This is the main GitHub repository for the `<model-viewer>` web component and all of its related projects. **Getting started?** Check out the [`<model-viewer>`](packages/model-viewer) project! The repository is organized into sub-directories containing the various projects. Check out the README.md files for specific projects to get more details: 👩‍🚀 **[`<model-viewer>`](packages/model-viewer)** • The `<model-viewer>` web component (probably what you are looking for) ✨ **[`<model-viewer-effects>`](packages/model-viewer-effects)** • The PostProcessing plugin for `<model-viewer>` 🌐 **[modelviewer.dev](packages/modelviewer.dev)** • The source for the `<model-viewer>` documentation website 🖼 **[render-fidelity-tools](packages/render-fidelity-tools)** • Tools for testing how well `<model-viewer>` renders models 🎨 **[shared-assets](packages/shared-assets)** • 3D models, environment maps and other assets shared across many sub-projects 🚀 **[space-opera](packages/space-opera/)** • The source of the `<model-viewer>` [editor](https://modelviewer.dev/editor/) ## Development When developing across all the projects in this repository, first install git, Node.js and npm. Then, perform the following steps to get set up for development: ```sh git clone --depth=1 [email protected]:google/model-viewer.git cd model-viewer npm install ``` Note: depth=1 keeps you from downloading our ~3Gb of history, which is dominated by all the versions of our golden render fidelity images. The following global commands are available: Command | Description ------------------------------ | ----------- `npm ci` | Install dependencies and cross-links sub-projects `npm run build` | Runs the build step for all sub-projects `npm run serve` | Runs a web server and opens a new browser tab pointed to the local copy of modelviewer.dev (don't forget to build!) `npm run test` | Runs tests in all sub-projects that have them `npm run clean` | Removes built artifacts from all sub-projects You should now be ready to work on any of the `<model-viewer>` projects! ## Windows 10/11 Setup Due to dependency issues on Windows 10 we recommend running `<model-viewer>` setup from a WSL2 environment. * [WSL2 Install walkthrough](https://docs.microsoft.com/en-us/windows/wsl/install-win10) And installing Node.js & npm via NVM * [Node.js/NVM install walkthrough](https://docs.microsoft.com/en-us/windows/nodejs/setup-on-wsl2) You should clone model-viewer from _inside_ WSL, not from inside Windows. Otherwise, you might run into line endings and symlink issues. To clone via HTTPS in WSL (there are known file permissions issues with SSH keys inside WSL): ``` git clone --depth=1 https://github.com/google/model-viewer.git cd model-viewer npm install ``` To run tests in WSL, you need to bind `CHROME_BIN`: ``` export CHROME_BIN="/mnt/c/Program Files/Google/Chrome/Application/chrome.exe" npm run test ``` Note that you should be able to run the `packages/model-viewer` and `packages/model-viewer-effects` tests with that setup, but running fidelity tests requires GUI support which is only available in WSL on Windows 11. <details> <summary>Additional WSL Troubleshooting – provided for reference only</summary> > These issues should not happen when you have followed the above WSL setup steps (clone via HTTPS, clone from inside WSL, bind CHROME_BIN). The notes here might be helpful if you're trying to develop model-viewer from inside Windows (not WSL) instead (not recommended). ### Running Tests Running `npm run test` requires an environment variable on WSL that points to `CHROME_BIN`. You can set that via this command (this is the default Chrome install directory, might be somewhere else on your machine) ``` export CHROME_BIN="/mnt/c/Program Files/Google/Chrome/Application/chrome.exe" npm run test ``` Tests in `packages/model-viewer` and `packages/model-viewer-effects` should now run properly; fidelity tests might still fail (see errors and potential workarounds below). ### Error: `/bin/bash^M: bad interpreter: No such file or directory` **Symptom** Running a .sh script, for example `fetch-khronos-gltf-samples.sh`, throws an error message `/bin/bash^M: bad interpreter: No such file or directory` Alternative error: ``` ! was unexpected at this time. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! @google/[email protected] prepare: `if [ ! -L './shared-assets' ]; then ln -s ../shared-assets ./shared-assets; fi && ../shared-assets/scripts/fetch-khronos-gltf-samples.sh` ``` **Solution** This is caused by incorrect line endings in some of the .sh files due to git changing these on checkout on Windows (not inside WSL). It's recommended to clone the model-viewer repository from a WSL session. As a workaround, you can re-write line endings using the following command: ``` sed -i -e 's/\r$//' ../shared-assets/scripts/fetch-khronos-gltf-samples.sh ``` ### Error: `ERROR:browser_main_loop.cc(1409)] Unable to open X display.` **Symptom** When trying to `npm run test`, errors are logged similar to: ``` ❌Fail to analyze scenario :khronos-IridescentDishWithOlives! Error message: ❌ Failed to capture model-viewer's screenshot [836:836:0301/095227.204808:ERROR:browser_main_loop.cc(1409)] Unable to open X display. ``` Pupeteer tests need a display output; this means GUI support for WSL is required which seems to only be (easily) available on Windows 11, not Windows 10. https://docs.microsoft.com/de-de/windows/wsl/tutorials/gui-apps#install-support-for-linux-gui-apps So, the workaround seems to be running Windows 11 (but not tested yet). ### Error: `ERROR: Task not found: "'watch:tsc"` **Symptom** Running `npm run dev` in `packages/model-viewer` on Windows throws error `ERROR: Task not found: "'watch:tsc"`. **Solution** (if you have one please make a PR!) </details> ", Assign "at most 3 tags" to the expected json: {"id":"6194","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"