This is the official Khronos glTF 2.0 Sample Viewer using WebGL: glTF 2.0 Sample Viewer
Link to the live glTF 2.0 Sample Viewer.
click + drag : Rotate model
scroll : Zoom camera
GUI : Use to change models and settings
- Choose one of the glTF models in the selection list
- Drag and drop glTF files into viewer
- Drag and drop a .hdr panorama file
For local usage and debugging, please follow these instructions:
-
Checkout the
mainbranch -
Pull the submodule for the required glTF-Sample-Renderer
git submodule update --init --recursive -
Build the web app
- run
npm install - start a demo in the browser with
npm run dev, and open http://localhost:8000.
- run
When making changes, the project is automatically rebuilt and the ./dist directory is populated with the web app. This directory contains all files necessary for deployment to a webserver.
- Requirements
- Install the Debugger for Chrome or Debugger for Firefox extension for Visual Studio Code
- Open the project directory in Visual Studio Code and select
Debug->Add Configuration->ChromeorDebug->Add Configuration->Firefoxso the.vscode/launch.jsonfile is created. - For chrome: Append
/distto${workspaceFolder}in thelaunch.jsonfile Debug->Start Debuggingshould now launch a Chrome or Firefox window with the sample viewer and VS Code breakpoints should be hit.
npm install / npm run dev give the following warnings:
The following warning comes from a thirdparty and does not affect sample viewer since the mentioned line 179 is never executed.
(!) "this" has been rewritten to "undefined"
https://rollupjs.org/troubleshooting/#error-this-is-undefined
node_modules/iobuffer/lib-esm/text-encoding-polyfill.js
177: : typeof self !== 'undefined'
178: ? self
179: : this);
^
180: //# sourceMappingURL=text-encoding-polyfill.js.map
The following warning is caused by an old bulma version, which buefy-next currently depends on. This should be fixed in an upcoming release: ntohq/buefy-next#208
[0] [build] DEPRECATION WARNING: Sass's behavior for declarations that appear after nested
[0] rules will be changing to match the behavior specified by CSS in an upcoming
[0] version. To keep the existing behavior, move the declaration above the nested
[0] rule. To opt into the new behavior, wrap the declaration in `& {}`.
[0]
[0] More info: https://sass-lang.com/d/mixed-decls
[0]
[0] ╷
[0] 51 │ ┌ &:not(.is-rounded)
[0] 52 │ │ border-radius: $radius-small
[0] │ └─── nested rule
[0] 53 │ font-size: $size-small
[0] │ ^^^^^^^^^^^^^^^^^^^^^^ declaration
[0] ╵
[0] node_modules\bulma\sass\elements\button.sass 53:3 button-small()
[0] node_modules\bulma\sass\elements\button.sass 252:5 @import
[0] node_modules\bulma\sass\elements\_all.sass 5:9 @import
[0] node_modules\bulma\bulma.sass 5:9 @import
[0] stdin 60:9 root stylesheet
The following warnings stem from the rollup copy plugin, which is only used for development to copy files to the dist folder.
npm WARN deprecated [email protected]: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm WARN deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm WARN deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm WARN deprecated [email protected]: Glob versions prior to v9 are no longer supported