@ar-ty/webviewer v2.0.1

Threejs online model viewer library

Notes:

• Every module is imported explicitly from its file until threejs is rewritten with es6 modules support.

Usage

Include file

<script type="text/javascript" src="https://ar-ty.fra1.cdn.digitaloceanspaces.com/webviewer/webviewer.js"/>

Add section for viewer

<section id="webViewerContainer" class="your-css"></section>

Initialize

let webViewer = new WebViewer(configObject);

webViewer.initialize("./path/to/model/", "model_name.gltf", () => {
    console.log("Model loaded");
});

Config object params

All configs are optional

configObject = {
    //  Web viewer section id
    containerId: 'webViewerContainer', 

    // Model auto rotation
    autoRotate: true,

    // Speed of auto rotation
    autoRotateSpeed: 10,

    // Should model cast shadows
    castShadow: true,

    // Background color
    backgroundColor: '#ffffff',

    // Allow users to zoom in and zoom out on model
    zoomEnabled: true,

    // How close can user zoom in a model
    minZoom: 1,

    // How far can user zoom out a model
    maxZoom: 10,

    // Top rotation limit
    rotationPolarTopLimit: 100,

    // Bottom rotation limit
    rotationPolarBottomLimit: 100,

    // Route to hdri files
    hdrisLocation: null,

    // Name of hdri file
    hdriName: null
}

Open full screen

webViewer.openFullScreen();

Destroy

Cleans up stuff instantiated during init methods and clears up threejs to prevent memory leaks. Returns webviewer object to its initial state allowing user to reinitialize the viewer.

webViewer.destroy()