Car configurator from scratch

In this experience we are going to load a car configurator on an image that will act as a marker of the experience. In it we will be able to see some custom elements associated to the brand (banner, logo, color change buttons); and we will be able to see different car models depending on the selected color. Let's go for it!

First of all, this is the experience we will be talking about in this example. You can try it before start by scanning the QR code, launching the webAR experience, and then detecting this image:

In this example we will show, in several steps, how to include different elements in the Onirix web AR player, to adapt the experience to a customer's brand. In this case we use an experience to view car models in augmented reality (kAR&go), and we will add the following elements through the HTML, CSS and Javascript code:

1. kAR&Go brand logo on the top left of the screen
2. Advertising banner at the bottom of the screen
3. Three color selector buttons to show different car configurations

Next we will see step by step the code that you can add in your project editor to customize your own webAR experiences:

Step 0: create the scene in Onirix (marker and 3D models)

You can start by creating the same scene in your Onirix account. You just need to include a new Image tracking scene in a project, with the marker we provide at the beginning of this page. Then you can include these three models of the car, in three different colors. Make sure only the initial car will be visible in the scene, unmark the Enabled property of the other two cars.

To sumarize, the steps to create the same scenes would be:

1. Create a new project with an image tracking scene using the marker at the beginning of this page.
2. Upload the 3D models we provide (next) and include them in the scene where you want.
3. Set the Enabled propoerty to false for two of the three cars (only visible the first car that will appear in the scene, in our case the color Black).

Here are the resources to recreate the scene, marker and 3D models of the cars: Onirix car example - resources.zip.

Step 1: add the elements to the HTML page

Open the online code editor, and in the HTML tab, copy the creation of the following three elements:

HTML

<img id="logo" src="https://www.onirix.com/karandgo/karandgo-logo.svg">

<div id="banner">
    <span>The best premium cars</span>
</div>

<div id="buttons-row">
    <button id="black" class="color-button selected">Black</button>
    <button id="white" class="color-button">White</button>
    <button id="blue" class="color-button">Blue</button>
</div>

Step 2: add styles for the logo, banner, and buttons to the CSS.

Now open the online code editor, and in the CSS tab copy all these styles.

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,800&display=swap');

#overlay{
    background-color: #F79E2E !important;
}

.root .close{
    top: 20px !important;
    right: 10px !important;
}

#injection-root{
    width: 100%;
    height: 100%;
    z-index: 0;
}

#logo{
    width: 120px;
    left: 12px;
    top: 15px;
    position: relative;
}

#banner{
    background-image: url(https://www.onirix.com/karandgo/karandgo-banner-bg.jpg);
    background-size: cover;
    width: 101%;
    height: 80px;
    position: absolute;
    bottom: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#banner span{
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-style: italic;
    color: #fff;
    font-size: 21px;
    text-transform: uppercase;
}

.color-button{
    width: 58px;
    height: 58px;
    border: 1px solid #fff;
    border-radius: 50%;
    margin: 0 10px;
    text-indent: -9999px;
    position: relative;
}

#buttons-row{
    position: absolute;
    width: 100%;
    bottom: 114px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: 0.6s all;
    pointer-events: none;
}

.scene-start #buttons-row{
    opacity: 1;
    transform: translateY(0);
    transition: 0.6s all;
    transition-delay: 2.2s;
    pointer-events: unset;
}

.scene-lost #buttons-row {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

.color-button#white{
    background-color: #fff;
}

.color-button#white.selected{
    border-color: #000;
}

.color-button#black{
    background-color: #000;
}

.color-button#blue{
    background-color: #004BB1;
}

.color-button.selected:before{
    content: " ";
    position: absolute;
    z-index: -1;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    top: -11px;
    left: -11px;
    right: 11px;
    bottom: 11px;
    border: 10px solid #fff;
    background-color: #fff;
}

#webar-bubble-message {
    top: 50px !important;
    left: 20px !important;
    z-index: 1;
    width: unset !important;
    transform: unset !important;
    border-radius: 50px;
    padding: 6px 0;
    font-family: Source Sans Pro;
}

Step 3: add interaction to buttons using Javascript.

Lastly open the online code editor, and in the Javascript tab copy the code to manage the events in the color selector buttons:

3.1: Function to move the selected button style

JavaScript

// Change selected class listener

const colorButtons = document.querySelectorAll(".color-button");
colorButtons.forEach(element => {
    element.addEventListener("click", () => {
        colorButtons.forEach(el => el.classList.remove("selected"));
        element.classList.add("selected");
    });
});

3.2: Adding ENABLE and DISABLE events for the buttons.

When the user clicks a color button, the scene will Enable the car with the selected color, and also it will Disable the current selected car. First of all, you need to get the onirix identifiers for each of the elements in the scene, in this case, the three models of the car, one for each color:

With the element selected in the scene, you will see its oid in the properties menu, top right. Just copy it with the icon to use it in the code after.

JavaScript

/* Declare const for each element you need to refer in the code, and paste the oids of your own elements in the scene */

const WHITE_CAR_OID = '4bb27a081e95495589685efd765d659b';
const BLACK_CAR_OID = '478a50ba539e4cf19e0b929602032443';
const BLUE_CAR_OID = 'a8f4abfa0d6e480c935c9630105c2db3';

Then you can instantiate and connect to the Embed SDK and start creating all the functions you need to change the colors between the cars in the scene:

JavaScript

const script = document.createElement('script');
script.src = "https://sdk.onirix.com/embed/ox-embed-sdk.umd.js";
script.onload = async () => {

    const embedSDK = new OnirixEmbedSDK();
    await embedSDK.connect();

    const whiteBtn = document.querySelector('#white');
    whiteBtn.addEventListener('click', () => {
        embedSDK.enable(WHITE_CAR_OID, 1, 1);
        embedSDK.disable(BLUE_CAR_OID, 1, 1);
        embedSDK.disable(BLACK_CAR_OID, 1, 1);
    });

    const blackBtn = document.querySelector('#black');
    blackBtn.addEventListener('click', () => {
        embedSDK.disable(WHITE_CAR_OID, 1, 1);
        embedSDK.disable(BLUE_CAR_OID, 1, 1);
        embedSDK.enable(BLACK_CAR_OID, 1, 1);
    });

    const blueBtn = document.querySelector('#blue');
    blueBtn.addEventListener('click', () => {
        embedSDK.disable(WHITE_CAR_OID, 1, 1);
        embedSDK.enable(BLUE_CAR_OID, 1, 1);
        embedSDK.disable(BLACK_CAR_OID, 1, 1);
    });

    // Subscribe to scene events here (events from next section 3.3)

};
document.head.appendChild(script);

3.3: Initial scene loading and changes when recognizing and losing marker

When the scene is loaded as well as when the marker is recognized, it will be necessary to load the entire content, in the same way that when losing the marker it will be necessary to hide everything again. For that we can subscribe to that scene events:

JavaScript

embedSDK.subscribe(OnirixEmbedSDK.Events.SCENE_LOAD_END, () => {
        document.body.classList.add("scene-start");
        document.body.classList.remove("scene-lost");
});

embedSDK.subscribe(OnirixEmbedSDK.Events.SCENE_LOST, () => {
        document.body.classList.add("scene-lost");
        document.body.classList.remove("scene-start");
        document.getElementById("white").classList.remove("selected");
        document.getElementById("blue").classList.remove("selected");
        document.getElementById("black").classList.add("selected");
});