diff --git a/.gitignore b/.gitignore index 846f4d17fd..0cde82ebad 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,6 @@ .vscode *.swp .DS_Store +lib node_modules +dist \ No newline at end of file diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000000..48082f72f0 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +12 diff --git a/.travis.yml b/.travis.yml index eaedf139ff..fc81811fe5 100644 --- a/.travis.yml +++ b/.travis.yml @@ -15,8 +15,7 @@ matrix: secure: X0YszDekxheiWAATTA74tQda4N9Kgmu8yHZB/OnJ295E2n+bklTLYaVNB4aJxYp2q1d2cidOz5LOPJsetP9dWxeh4tarXjHFN4nYy9QiLqPaRdk75yLqc19MERu9elsMUc4KrJ6mhemF4pBgdNzNv1ioaHjl/3QFXIvo8nD610W7qnTDn/bHM6u2NNvDPUS9IpqYyK2Xj0DRLPm7fJS/cWbFuRr/NSKmKxSPUEaXKvlDJNEHnu0BOjSs0AZArrtekgN4YDq7BoEeCqYVf6cVUW4YclNLGa8mdXB419Czy1GDOl81ZETUYQS/6i3SNCzxwNZWpt8fB7q4BEWn0ljBoKZ6qRJRP0jHWOtZ/qeLovgaawGJIgd83bTcgPyLd2TUQeP8sFQgIw+TP1EUkNoAFR8wGxAw0chCdvzxNJvvlf28oaZ9vJdhj0jkJKrts/59Vd+dNkkoHSqj7RVfSu72kqxVblVI2kpr9oTVS2cPzDw2DXaDMmnM0ClVIjOta1QuXxaW1AUGZNOnlDbqmBTlfFThH0bRkPSinv/Laa5vvWG85k7pJ8jtCi1acOliNYFNb+hpDINqakDgTxYO6y4b+haAHycHsg3lIMsZ5Xc/8Y/dx328ymRQ6jROeyAyYmy9wt4SThfkKuHcSYqmUMLrIA1ixUcJxTaUCeUxEUx+tn0= - env: TEST_TYPE=fidelity addons: - apt: - chrome: stable + chrome: stable env: global: - secure: wmSM5h6HpDL7+rnd3KqaMNUtU7Rp5jv6P0/5wLJDb3lAtkersEaTrnFa4r8bWmhPq0KOXHcktmHQepatPn+1Ib9iP9RFzwMhM76OiLmV1M+cl8MNfNGRAMljbR9IzyzHzX0UwepPQpMxmc8O3RkF27wm8mCIUmbv9AJWh9adzfZrsErcngc8egrXAJuqiADENCkXUYj7mOP122c2SRD5G8oWA2dgrn6Vqw4vDqikUTxJsGFt/udU7E3xMT/tYPcPiGKKm+xULHZkTkL0l3sObletlI+CNssSE66ygKsYuFiBXVMPh0QbPQo/v3YSYHISszeHPKXMkvZu7x30CYCg6jLHX9mCfjXbd4Al4nu5n58U6Lp+h5ZI/c0iwFqQE9uFwc4/RivQXQAtBUU8vnSoKDtD8bFql8Y9Ki1PX3eTXdRGSARmE9gCOx4rmNT/42GbzXA+vzNRyXWo3IL6sFRjgl7xdsV/Twtl0I+GmUJV0x7LYgQm+P01kT3NmbnYyWe2oHGJGSL/pDqusjT+9oxzniF60qBLSsIlYaC69uY4pklaTCrFdm4eeFFCb8kExA5oDRu42PTd8Ws8tkGVQOi9ZjCK0p9HU5Mi11JfiZd9n2WZ9vSV852V6HE/CMmFvctgIEaBRoHmgLGjvAb7o1JK99MovCT8GSyIBob9NIEhGgA= @@ -30,27 +29,13 @@ script: - npm run test:ci cache: directories: - - packages/model-viewer/examples/assets/glTF-Sample-Models -after_success: -- pushd ./packages/model-viewer -- ./scripts/run-fidelity-check.sh -- popd + - packages/shared-assets/models/glTF-Sample-Models before_deploy: -- lerna run create-legacy-bundles -- cd ${TRAVIS_BUILD_DIR}/packages/model-viewer -- touch .nojekyll -- echo 'node_modules/*' > .gitignore -- echo '!node_modules/@webcomponents' >> .gitignore -- echo '!node_modules/focus-visible' >> .gitignore -- echo '!node_modules/intersection-observer' >> .gitignore -- echo '!node_modules/@magicleap' >> .gitignore -- echo '!node_modules/fullscreen-polyfill' >> .gitignore -- echo '!node_modules/resize-observer-polyfill' >> .gitignore -- echo '!node_modules/filament' >> .gitignore -- git log -n 1 > VERSION +- npm run build:legacy-support +- ./packages/modelviewer.dev/scripts/ci-before-deploy.sh deploy: - provider: pages - local_dir: ${TRAVIS_BUILD_DIR}/packages/model-viewer + local_dir: ${TRAVIS_BUILD_DIR}/packages/modelviewer.dev skip-cleanup: true preserve-history: true github-token: $GITHUB_TOKEN diff --git a/README.md b/README.md index b482b4cb41..5623491200 100644 --- a/README.md +++ b/README.md @@ -6,18 +6,55 @@ all of its related projects. The repository is organized into sub-directories containing the various projects. Check out the README.md files for specific projects to get more details: - - [``](packages/model-viewer) +πŸ‘©β€πŸš€ **[``](packages/model-viewer)** β€’ The `` web component (probably what you are looking for) -### Development +🌐 **[modelviewer.dev](packages/modelviewer.dev)** β€’ The source for the `` documentation website -When developing across all the projects in this repository, perform the following -steps to bootstrap the environment correctly: +πŸ–Ό **[render-fidelity-tools](packages/render-fidelity-tools)** β€’ Tools for testing how well `` renders models + +🎨 **[shared-assets](packages/shared-assets)** β€’ 3D models, environment maps and other assets shared across many sub-projects + +## Installing `` + +The `` web component can be installed from [NPM](https://npmjs.org): + +```sh +npm install @google/model-viewer +``` + +It can also be used from various free CDNs such as [unpkg.com](https://unpkg.com): + +```html + + +``` + +For more detailed usage documentation and live examples, please visit our docs +at [modelviewer.dev](https://modelviewer.dev)! + +## 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 git@github.com:GoogleWebComponents/model-viewer.git cd model-viewer npm install -./node_modules/.bin/lerna bootstrap +npm run bootstrap ``` -You should now be ready to work on any of the `` projects! \ No newline at end of file +The following global commands are available: + +Command | Description +------------------------------ | ----------- +`npm run bootstrap` | Bootstraps the project for development and cross-links sub-projects +`npm run build` | Runs the build step for all sub-projects +`npm run build:legacy-support` | Builds JS bundles that have IE11 support +`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 `` projects! diff --git a/lerna.json b/lerna.json index d6707ca0cd..a2bb50ba7c 100644 --- a/lerna.json +++ b/lerna.json @@ -2,5 +2,5 @@ "packages": [ "packages/*" ], - "version": "0.0.0" + "version": "independent" } diff --git a/model-viewer.code-workspace b/model-viewer.code-workspace new file mode 100644 index 0000000000..c46f0a3be9 --- /dev/null +++ b/model-viewer.code-workspace @@ -0,0 +1,11 @@ +{ + "folders": [ + { + "path": "." + } + ], + "settings": { + "git.ignoreLimitWarning": true, + "typescript.tsdk": "render-fidelity-tools/node_modules/typescript/lib" + } +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index e762c3f057..8c984ad4d3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1267,6 +1267,15 @@ "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=", "dev": true }, + "async": { + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz", + "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==", + "dev": true, + "requires": { + "lodash": "^4.17.14" + } + }, "asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", @@ -1358,6 +1367,12 @@ } } }, + "basic-auth": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-1.1.0.tgz", + "integrity": "sha1-RSIe5Cn37h5QNb4/UVM/HN/SmIQ=", + "dev": true + }, "bcrypt-pbkdf": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz", @@ -1709,6 +1724,12 @@ "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", "dev": true }, + "colors": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz", + "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==", + "dev": true + }, "columnify": { "version": "1.5.4", "resolved": "https://registry.npmjs.org/columnify/-/columnify-1.5.4.tgz", @@ -1999,6 +2020,12 @@ "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", "dev": true }, + "corser": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz", + "integrity": "sha1-jtolLsqrWEDc2XXOuQ2TcMgZ/4c=", + "dev": true + }, "cosmiconfig": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz", @@ -2269,6 +2296,26 @@ "safer-buffer": "^2.1.0" } }, + "ecstatic": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/ecstatic/-/ecstatic-3.3.2.tgz", + "integrity": "sha512-fLf9l1hnwrHI2xn9mEDT7KIi22UDqA2jaCwyCbSUJh9a1V+LEUSL/JO/6TIz/QyuBURWUHrFL5Kg2TtO1bkkog==", + "dev": true, + "requires": { + "he": "^1.1.1", + "mime": "^1.6.0", + "minimist": "^1.1.0", + "url-join": "^2.0.5" + }, + "dependencies": { + "minimist": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", + "dev": true + } + } + }, "emoji-regex": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz", @@ -2663,6 +2710,15 @@ "readable-stream": "^2.3.6" } }, + "follow-redirects": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.9.0.tgz", + "integrity": "sha512-CRcPzsSIbXyVDl0QI01muNDu69S8trU4jArW9LpOt2WtC6LyUJetcIrmfHsRBx7/Jb6GHJUiuqyYxPooFfNt6A==", + "dev": true, + "requires": { + "debug": "^3.0.0" + } + }, "for-in": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", @@ -3261,6 +3317,12 @@ } } }, + "he": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", + "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", + "dev": true + }, "hosted-git-info": { "version": "2.8.5", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.5.tgz", @@ -3273,6 +3335,25 @@ "integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==", "dev": true }, + "http-proxy": { + "version": "1.18.0", + "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.0.tgz", + "integrity": "sha512-84I2iJM/n1d4Hdgc6y2+qY5mDaz2PUVjlg9znE9byl+q0uC3DeByqBGReQu5tpLK0TAqTIXScRUV+dg7+bUPpQ==", + "dev": true, + "requires": { + "eventemitter3": "^4.0.0", + "follow-redirects": "^1.0.0", + "requires-port": "^1.0.0" + }, + "dependencies": { + "eventemitter3": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.0.tgz", + "integrity": "sha512-qerSRB0p+UDEssxTtm6EDKcE7W4OaoisfIMl4CngyEhjpYglocpNg6UEqCvemdGhosAsg4sO2dXJOdyBifPGCg==", + "dev": true + } + } + }, "http-proxy-agent": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-2.1.0.tgz", @@ -3283,6 +3364,24 @@ "debug": "3.1.0" } }, + "http-server": { + "version": "0.12.1", + "resolved": "https://registry.npmjs.org/http-server/-/http-server-0.12.1.tgz", + "integrity": "sha512-T0jB+7J7GJ2Vo+a4/T7P7SbQ3x2GPDnqRqQXdfEuPuUOmES/9NBxPnDm7dh1HGEeUWqUmLUNtGV63ZC5Uy3tGA==", + "dev": true, + "requires": { + "basic-auth": "^1.0.3", + "colors": "^1.3.3", + "corser": "^2.0.1", + "ecstatic": "^3.3.2", + "http-proxy": "^1.17.0", + "opener": "^1.5.1", + "optimist": "~0.6.1", + "portfinder": "^1.0.20", + "secure-compare": "3.0.1", + "union": "~0.5.0" + } + }, "http-signature": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz", @@ -4114,6 +4213,12 @@ "to-regex": "^3.0.2" } }, + "mime": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "dev": true + }, "mime-db": { "version": "1.43.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.43.0.tgz", @@ -4628,6 +4733,12 @@ "mimic-fn": "^1.0.0" } }, + "opener": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.1.tgz", + "integrity": "sha512-goYSy5c2UXE4Ra1xixabeVh1guIX/ZV/YokJksb6q2lubWu6UbvPQ20p542/sFIll1nl8JnCyK9oBaOcCWXwvA==", + "dev": true + }, "optimist": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz", @@ -4883,6 +4994,28 @@ "find-up": "^3.0.0" } }, + "portfinder": { + "version": "1.0.25", + "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz", + "integrity": "sha512-6ElJnHBbxVA1XSLgBp7G1FiCkQdlqGzuF7DswL5tcea+E8UpuvPU7beVAjjRwCioTS9ZluNbu+ZyRvgTsmqEBg==", + "dev": true, + "requires": { + "async": "^2.6.2", + "debug": "^3.1.1", + "mkdirp": "^0.5.1" + }, + "dependencies": { + "debug": { + "version": "3.2.6", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz", + "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==", + "dev": true, + "requires": { + "ms": "^2.1.1" + } + } + } + }, "posix-character-classes": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz", @@ -5248,6 +5381,12 @@ "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==", "dev": true }, + "requires-port": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", + "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=", + "dev": true + }, "resolve": { "version": "1.14.2", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.14.2.tgz", @@ -5365,6 +5504,12 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, + "secure-compare": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz", + "integrity": "sha1-8aAymzCLIh+uN7mXTz1XjQypmeM=", + "dev": true + }, "semver": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", @@ -6104,6 +6249,15 @@ "integrity": "sha1-8pzr8B31F5ErtY/5xOUP3o4zMg0=", "dev": true }, + "union": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz", + "integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==", + "dev": true, + "requires": { + "qs": "^6.4.0" + } + }, "union-value": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz", @@ -6210,6 +6364,12 @@ "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=", "dev": true }, + "url-join": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/url-join/-/url-join-2.0.5.tgz", + "integrity": "sha1-WvIvGMBSoACkjXuCxenC4v7tpyg=", + "dev": true + }, "use": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", diff --git a/package.json b/package.json index 4eeb994abd..0b345d8cd5 100644 --- a/package.json +++ b/package.json @@ -3,10 +3,13 @@ "private": true, "description": "The repository for all packages", "scripts": { - "test": "lerna run test --stream", - "test:ci": "lerna run test:ci --stream", - "bootstrap": "lerna bootstrap --ci", - "build": "lerna run build --stream" + "test": "./node_modules/.bin/lerna run test --stream", + "test:ci": "./node_modules/.bin/lerna run test:ci --stream", + "bootstrap": "./node_modules/.bin/lerna bootstrap --ci", + "clean": "./node_modules/.bin/lerna run clean --stream", + "build": "./node_modules/.bin/lerna run build --stream", + "build:legacy-support": "./node_modules/.bin/lerna run create-legacy-bundles --stream", + "serve": "./node_modules/.bin/http-server -a 127.0.0.1 -o /packages/modelviewer.dev -c-1" }, "repository": { "type": "git", @@ -14,11 +17,15 @@ }, "author": "DevXR Contributors", "license": "Apache-2.0", + "engines": { + "node": ">=12.0.0" + }, "bugs": { "url": "https://github.com/GoogleWebComponents/model-viewer/issues" }, "homepage": "https://github.com/GoogleWebComponents/model-viewer#readme", "devDependencies": { + "http-server": "^0.12.1", "lerna": "^3.20.2" } } diff --git a/packages/model-viewer/.gitignore b/packages/model-viewer/.gitignore index 114cd9198b..57b328d466 100644 --- a/packages/model-viewer/.gitignore +++ b/packages/model-viewer/.gitignore @@ -1,14 +1,9 @@ renderers/* node_modules/* +shared-assets dist/* lib/* -fidelity/* -test/fidelity/results/* -examples/built/* -examples/assets/glTF-Sample-Models **/*.sw* .DS_Store .idea -*.iml -test/fidelity/renderers/filament/cmgen -test/fidelity/renderers/filament/ktx \ No newline at end of file +*.iml \ No newline at end of file diff --git a/packages/model-viewer/README.md b/packages/model-viewer/README.md index 36dfa27196..6ae122017b 100644 --- a/packages/model-viewer/README.md +++ b/packages/model-viewer/README.md @@ -1,6 +1,9 @@ > ## πŸ›  Status: In Development > `` is currently in development. It's on the fast track to a 1.0 release, so we encourage you to use it and give us your feedback, but there are things that haven't been finalized yet and you can expect some changes. +

+ A 3D model of an astronaut +

# `` @@ -19,87 +22,24 @@ supported to provide a seamless development experience. [Demo](https://model-viewer.glitch.me) β€’ [Documentation](https://googlewebcomponents.github.io/model-viewer/index.html) β€’ [Kanban](https://github.com/GoogleWebComponents/model-viewer/projects/1) β€’ [Quality Tests](https://googlewebcomponents.github.io/model-viewer/test/fidelity/results-viewer.html) -![sample-render](examples/sample-render.png) - ## Installing -You can load a _bundled build_ via [UNPKG](https://unpkg.com/) by including the snippet below. This will automatically load the correct version for the user's browser. - -```html - - - - - - - -``` - -Alternatively, you can install the _npm package_: +The `` web component can be installed from [NPM](https://npmjs.org): +```sh +npm install @google/model-viewer ``` -npm install ---save @google/model-viewer -``` - -### Important note on bundling - -Bundled builds are useful for demos or for kicking the tires. However, -the _bundled build_ includes some third party dependencies. Some of these -dependencies (like [three](https://threejs.org/)) are quite large. For -production use cases we recommend that you use the _npm package_ and your -own bundler (such as [Rollup](http://rollupjs.org) or -[Webpack](https://webpack.js.org/)) to eliminate potential duplicate -dependencies. - -## Usage -If you are using a _bundled build_, first add a script tag to your page to load -`` as described in the [Installing](#installing) section. - -Alternatively, if you are using the _npm package_ and a bundler (see -"Important note on bundling" above), you can import the module: - -```javascript -import '@google/model-viewer'; -``` - -After the library has been loaded, a new custom element will be defined. You can -use it anywhere you would write HTML. For example, using the _bundled build_ in -an HTML document might look like this: +It can also be used directly from various free CDNs such as [unpkg.com](https://unpkg.com): ```html - - - - 3D Test - - - - - - + + ``` -Alternatively, using the _npm package_ in a JavaScript module might look like -this: - -```javascript -import '@google/model-viewer'; - -const model = document.createElement('model-viewer'); -model.src = 'path/to/model.gltf'; - -document.body.appendChild(model); -``` - -You can think of `` sort of like an `` or `