Lix Components: Lix AR
Updated: 4 days ago
About The Interactive Lottie Component lives under the Lix Components library from Threed Software, a library of extensions to Wix basic functionality, using Custom Elements.
With this package, you can effortlessly integrate Augmented Reality (AR) applications directly into your Wix website. This component adds Augmented Reality (AR) capabilities to your web applications using the LitElement library and the @google/model-viewer library.
This component is a part of the Lix Components Library.
Demo
You can see a live example of the Lix Interactive Lottie components below.
Add To Your Site
Click the Install App Button
Add to Site: Look for the "Add to Site" button on the app's details page and click on it.
Choose Your Site: If you have multiple websites associated with your Wix account, a pop-up will appear asking you to select the website where you want to add the app. Choose the relevant website and click "Add to Site."
Configure App Settings: After adding the app, you may be directed to the Wix Editor. If not, go to your Wix Editor by logging into your Wix account and clicking "Edit Site."
Access the App: Once in the Wix Editor, locate the app's icon or element on your website. This could be a widget, button, or other UI element depending on the app's functionality.
Register as Custom Element
In your custom Wix code, register the lix-ar custom element:javascriptCopy code window.customElements.define('lix-ar', LixAR);
Add LixAR Component
Drag and drop the custom HTML element onto your Wix page.
Customize the component properties in the Wix editor or through code.
Usage
To use the LixAR component on your Wix site, you need to pass the necessary properties:
model: The URL of the 3D model.
poster: The URL of the poster image for the 3D model.
autoAR: Set to true to activate the AR viewer automatically.
htmlCopy code
<lix-ar model="https://example.com/model.glb" poster="https://example.com/poster.jpg" auto-ar></lix-ar>
Styling
The default styling ensures that the model-viewer element takes up 100% of the width and height of its parent container. Customize the styling by modifying the LixAR.styles CSS:
cssCopy code
LixAR.styles = css`
model-viewer {
width: 100% !important;
height: 100% !important;
}
`;
Additional Features
Extend the component's functionality by adding custom methods or properties to the LixAR class. For example, you might want to add methods for model manipulation or additional properties for enhanced customization.