<!-- 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)
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
This method overwrites the content of the viewer with the content of the provided OpenConfiguration scene object.
const viewer = document.querySelector("ig-viewer");
const setDonePromise = viewer.setSceneFromOC(ocScene);This method updates the content of the viewer with the provided OpenConfiguration scene.
Products that already exist in the viewer will be updated and new products will be added. The identity of the products is determined through the comId attribute within the product's state in the oc.
const viewer = document.querySelector("ig-viewer");
const updateDonePromise = viewer.updateSceneFromOC(ocScene);This method highlights the product with the specified comId.
const viewer = document.querySelector("ig-viewer");
viewer.highlightProduct("comId");This method removes the product with the specified comId from the viewer.
const viewer = document.querySelector("ig-viewer");
const removeDonePromise = viewer.removeProduct("comId");Subscribe to events that signal the start of an update to the 3d scene.
const viewer = document.querySelector("ig-viewer");
viewer.addEventListener("sceneUpdateStart", () => {console.log("update started")})Subscribe to events that signal the end of an update to the 3d scene.
const viewer = document.querySelector("ig-viewer");
viewer.addEventListener("sceneUpdateEnd", () => {console.log("update ended")})Subscribe to events that signal a click in the 3d scene. These events are emitted regardless of wether the user clicks on a object or the empty space. The event of type `SceneClickEvent` contains a `comId` field that either contains the commercial id of the clicked object or undefined.
const viewer = document.querySelector("ig-viewer");
viewer.addEventListener("sceneClick", (event) => {console.log(event.comId)})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).