aico-image-editor/src/components/configurator3d/configurator3d.html

Combine multiple image into and create single combined image

<div x-data="configurator3d">
    <div class="row g-3">
        <div class="col-12 col-xl-7 d-flex"></div>
        <div class="col-12 col-xl-5 d-flex">
            <button class="btn editor-interface__square bg-gray me-2" @click="$dispatch('canvas-3d-zoomin')">
                <i class="bugano-zoom-in fa-lg"></i>
            </button>
            <button class="btn editor-interface__square bg-gray me-2" @click="$dispatch('canvas-3d-zoomout')">
                <i class="bugano-zoom-out fa-lg"></i>
            </button>
            <button class="btn editor-interface__square bg-gray me-2" @click="$store.canvas.setFullScreenCanvas()">
                <i class="bugano-Icon-awesome-expand-arrows-alt fa-md"></i>
            </button>
            <button class="btn editor-interface__square bg-white ms-auto ms-lg-3" @click="$store.canvas.disable3d()">
                <span class="fw-bold">2D</span>
            </button>
        </div>
    </div>
    <div class="my-2">
        <div class="product-canvas-wrapper">
            <div class="ratio ratio-1x1">
                <div id="canvas-3d-holder" class="border border-primary cursor-pointer">
                    <!-- <canvas id="product-canvas-3d"></canvas> -->
                    <!-- now this will be not needed as background color is replaced by background image-->
                    <!-- <img :src="$store.canvas.getSelectedProductObj().productImageUrl" class="img-fluid product-canvas-img" alt="" /> -->
                </div>
            </div>
        </div>
    </div>
</div>