Welcome to ig.Viewer

Display OpenConfiguration scenes in the Web and AR. Also supported: glTF and IGXC.

Quick Start

<!-- Import the component -->
<script src="https://viewer.intelligentgraphics.ag/main.js"></script>
<!-- Define an environment -->
<div style="position:relative; width:500px; height:500px; border: 1px solid red;">
	<!-- Use it like any other HTML element -->
	<ig-viewer src="https://raw.githubusercontent.com/intelligentgraphics/OpenConfiguration/master/examples/bed/scene.json"></ig-viewer>
</div>

Defines the type of floor under the scene.

0:	None
1:	Mirror
2:	Mirror depth
3:	Mirror blur (default)
4:	Mirror ? 
12:	Parquett mirror
13:	Parquett mirror depth
14:	Parquett mirror blur

Defines the setup of lights in the scene.

URL to JSON (default)

The scene or model that will be shown.

URL to glTF (example | file)
URL to IGXC (example | file)
URL to OC (example | file)

The scene or model that will be shown in Android AR.

If src is a glTF then defaults to src.

URL to glTF (example | file)

The scene or model that will be shown in iOS AR.

URL to USDZ (examples | file)

Defines if external settings should be used.
Further explained below.

default false

Shows animation controls on the bottom of the viewer, when the scene or model has embedded animations.

default true

Support dragging and dropping of OC Zip, glTF and glb files.

default false

Settings can also be passed via global object window.GLOBAL_PARAMS or as URL query string.
They will be joined with following priority:
Query string < Global params < Attributes
All attributes can be passed plus the following.

Defines the language, defaults to locale from navigator or "de-DE"

(inactive for now)

The model viewer element exposes methods to manipulate the scene.
Demo

const viewer = document.querySelector("ig-viewer");

const setDonePromise = viewer.setSceneFromOC(ocScene);

const viewer = document.querySelector("ig-viewer");

const updateDonePromise = viewer.updateSceneFromOC(ocScene);

const viewer = document.querySelector("ig-viewer");

viewer.highlightProduct("comId");

const viewer = document.querySelector("ig-viewer");

const removeDonePromise = viewer.removeProduct("comId");

const viewer = document.querySelector("ig-viewer");

viewer.addEventListener("sceneUpdateStart", () => {console.log("update started")})

const viewer = document.querySelector("ig-viewer");

viewer.addEventListener("sceneUpdateEnd", () => {console.log("update ended")})

const viewer = document.querySelector("ig-viewer");

viewer.addEventListener("sceneClick", (event) => {console.log(event.comId)})

Acknowledgements

Thanks to the three.js authors for their library to ease usage of WebGL (used under MIT License) and to the Google model-viewer team for groundbreaking AR work (used under Apache License).