@google/model-viewer-effects
TypeScript icon, indicating that this package has built-in type declarations

1.3.0 • Public • Published

<model-viewer-effects>

npm bundle size npm (scoped)

<model-viewer-effects> is a web component library addon for <model-viewer> that makes adding post-processing effects to your models easy to do, on as many browsers and devices as possible.

<model-viewer-effects> strives to give you great defaults for rendering quality and performance.

A 3D Model of a Rocket Ship

ExamplesDocumentation

Usage

Using effects is as simple as adding the <effect-composer> inside your <model-viewer>, and placing any effects inside the composer component.

<model-viewer src="...">
  <effect-composer>
    <bloom-effect></bloom-effect>
  </effect-composer>
</model-viewer>

PostProcessing

<model-viewer-effects> uses the postprocessing library under the hood, for its superior performance and support.

In addition to the built-in effects wrapped by this library, you can add any custom effects/passes that follow the postprocessing spec.

XR Support

The effects are not supported in the <model-viewer> XR modes, which will render as usual.

Installing

NPM

The <model-viewer-effects> library can be installed from NPM:

npm install three @google/model-viewer @google/model-viewer-effects

HTML

<model-viewer-effects> and <model-viewer> share a Three.js dependency. In order to avoid version conflicts, you should bring Three through an import-map:

<!-- ES-Shims for older browser compatibility -->
<script async src="https://ga.jspm.io/npm:es-module-shims@1.7.1/dist/es-module-shims.js"></script>

<!-- Import Three.js using an import-map -->
<script type="importmap">
  {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/three@^0.163.0/build/three.module.min.js"
    }
  }
</script>

You should then bring the module version of <model-viewer>, along with <model-viewer-effects> from your favourite CDN, such as jsDelivr:

<script type="module" src=" https://cdn.jsdelivr.net/npm/@google/model-viewer/dist/model-viewer-module.min.js "></script>

<script type="module" src=" https://cdn.jsdelivr.net/npm/@google/model-viewer-effects/dist/model-viewer-effects.min.js "></script>

Browser Support

<model-viewer-effects> is supported on the last 2 major versions of all evergreen desktop and mobile browsers, and on all platforms (Android, IOS, MacOS, Windows, Linux).

Chrome Firefox Safari Edge
Desktop
Mobile

<model-viewer-effects> builds upon standard web platform APIs so that the performance, capabilities and compatibility of the library get better as the web evolves.

Development

To get started, follow the instructions in the main README.md file.

The following commands are available when developing <model-viewer-effects>:

Command Description
npm run build Builds all <model-viewer-effects> distributable files
npm run build:dev Builds a subset of distributable files (faster than npm run build)
npm run test Run <model-viewer-effects> unit tests
npm run clean Deletes all build artifacts
npm run dev Starts tsc and rollup in "watch" mode, causing artifacts to automatically rebuild upon incremental changes

Rocket Ship by Daniel Melchior CC-BY via Poly Pizza

Package Sidebar

Install

npm i @google/model-viewer-effects

Weekly Downloads

282

Version

1.3.0

License

Apache-2.0

Unpacked Size

5.27 MB

Total Files

97

Last publish

Collaborators

  • bcoe
  • google-wombot
  • ofrobots
  • mrdoob