<hexa-viewer> API

For the common use-case of displaying 3D models, there’s no need to use this package. If however there’s a need to unlock some of the more advanced features like configurator, materials manipulations, augmented reality, etc… it is recommended to include this code on your project / site.

Steps for getting started:

Inject the code to the page by adding this tag:
<script type="text/javascript" src="https://carousel.hexa3d.io/base_files/viewer-communicator.bundle.js"></script>
Alternatively, you can import the package by running npm install hexa-viewer-communicator --save.
Define a new instance as follows:
const vc = new ViewerCommunicator();
Or
const vc = new ViewerCommunicator(document.querySelector('hexa-viewer'));
if you are using <hexa-viewer> directly as a web component.
Or, you can use the
createInstanceFromUrl(viewerURL: string, params = {} as any, options?: ICreateInstanceFromUrlOptions) function which will get a viewer URL (typically the resource_default field) and will return a <hexa-viewer> element for you to add (append) to your page. Then use the element to create a new ViewerCommunicator instance like so:
const vc = new ViewerCommunicator();
const hexaViewer = vc.createInstanceFromUrl(myResource.resource_default);
vc.hexaViewer = hexaViewer;
The ICreateInstanceFromUrlOptions parameter is an optional parameter but in order to make sure the viewer could support WebXR we will need to provide it with the enableWebXR equals to true.
The next step might be to add the <hexa-viewer> element to the document (for example: document.body.appendChild(vc.hexaViewer);).

WebXR:

As mentioned above, make sure to initiate the new <hexa-viewer> with {enableWebXR: true} for the ICreateInstanceFromUrlOptions parameter.
Use the toggleWebXR(state: boolean, invokeWhenReady?: boolean): void; function like so: vc.toggleWebXR(true, true);.
Remember, not all browsers supports the WebXR standard. You can use the isWebXrSupported(): Promise<boolean>; function in order to understand whether you would be able to use this ability or not like so:
const isSupported = await vc.hexaViewer.isWebXrSupported();
or like so:
this.isWebXrSupported().then((isSupported) => { // Do something });
It’s also important to know that this ability requires a hard gesture (click) by the user. Calling the toggleWebXR function without a user click will not work.

PictureInPicture (experimental 🧪):

You can project the viewer’s scene even when the user scrolls down from our viewer, isn’t on the same browser tab or even on a different application by leveraging the PictureInPicture API. Just call vc.togglePicInPic(true); in order to invoke this ability.

Configurator:

Set configurator: You can call vc.configurator.setConfigurator(config); while config is an array of IConfiguration. IConfiguration is an object that looks like this:
export interface IConfiguration { color?: string; thumbnail?: string; materials?: Array<IConfigurationMaterial>; asset?: string; sceneURL?: string; }
color: The color of the button.
thumbnail: The thumbnail image of the button (alternatively, you can provide the color parameter).
asset: The URL of the resource_default, meaning the viewer URL.
sceneURL: The URL of the GLB file (alternatively, you can provide the asset parameter).
materials: If you want the viewer to change only the materials and textures of the model instead of loading the whole model you can provide an array of a type IConfigurationMaterial
export interface IConfigurationMaterial { name: string; textures?: Array<IConfigurationTexture>; color?: string; }
nane: The name of the material. The name should be consistent across all of the models. This option will work only for multiple models with the same geometry and meshes, with the same colors bug with different textures.
color: If you want you can provide the solid color of the material instead of relaying on a diffuse texture.
textures: If you won’t be providing the color parameter this one is mandatory.
export interface IConfigurationTexture { maps: Array<string>; url: string; }
maps: An array of the map types the viewer will replace.
url: The URL of the texture (image).
Here is an example of a materials parameter:
'materials': [ { 'name': 'Material1', 'textures': [ { 'maps': [ 'map' ], 'url': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_WHITE/Material1_diffuse.png' } ] }, { 'name': 'Material2', 'textures': [ { 'maps': [ 'map' ], 'url': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_WHITE/Material2_diffuse.png' }, { 'maps': [ 'metalness', 'roughness', 'ao' ], 'url': 'https://cdn.hexa3d.io/hotlink-ok/models/Logitech/G203_WHITE/Material2_roughnessMetallic.png' } ] } ]
Toggle UI: You toggle the visibility of the inner viewer thumbnails below the model like so:
vc.configurator.toggleConfiguratorUI(true);
or
vc.configurator.toggleConfiguratorUI(false);
Select variation: You can select a variation by providing the index of the IConfiguration provided by the setConfigurator like so:
vc.configurator.selectConfigurator(index);

Collisions:

To toggle on this feature use this code:
vc.toggleCollision(true, '#ff0000');
This will add a point on the model the time a user clicks on it. On our case the point will be red but we can provide a different hex.
We can wait for this point by calling this async function:
const c = await vc.waitForCollisions();
c will contain an array of the existing collision points:
export interface Collision extends ThreeVector3 { color: string; object3D?: any; scale: number; } export interface ThreeVector3 { x: number | string; y: number | string; z: number | string; }