@meshhouse/model-viewer

glTF model viewer, inspired by Marmoset viewer

Showing:

Popularity

Downloads/wk

8

GitHub Stars

1

Maintenance

Last Commit

2yrs ago

Contributors

1

Package

Dependencies

1

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Svelte WebGL

Readme

Svelte model viewer

This is a model viewer web component made with Svelte, Typescript and Three.js

Install

npm install --save @meshhouse/model-viewer

Usage

Currently loads only GLTF files (as more web-oriented format):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1'>
    <title>Svelte app</title>
  <script defer src='/build/bundle.js'></script>
  <style>
    model-viewer:not(:defined) {
      opacity: 0;
    }
  </style>
</head>

<body>
  <model-viewer model="link-here.gltf" modeltitle="Boom box" author="Khronos Group" style="height: 600px;">
    <span slot="logo">Model viewer 1.0.0</span>
  </model-viewer>
</body>
</html>

Usage in frameworks

In React

In Vue.js

In Angular

Attributes

model - URL to GLTF model, required

hdri - URL to HDR environment texture

modeltitle - model title

author - model author

authorlink - author link (to portfolio, etc.)

resizable - watch for viewer resize events, default is true

autohide - hide viewer UI after 5 seconds, default is false

skycolor - scene "sky" color, default is #dbeeff

groundcolor - scene ground color, default is #597a9c

thumbnail - loader background image

Slots

loader - Loading text

error - error screen

logo - you can set custom logo or text in left bottom corner

material-button - change material button icon

rotate-button - auto-rotate camera button icon

fullscreen-button - fullscreen button icon

CSS Variables

--theme-font - text font, default is system-stack

--theme-color - main theme color (buttons background, dropdown selected item), default is #00b16a

--theme-color-active - main theme color, active state, default is #007e4b

--viewer-background - loader background color, default is #333333

--viewer-background-error - error screen background, default is #96281b

License

Default button icons are made by Freepik from www.flaticon.com This component are licensed by MIT license.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial