@allincart-ag/dive NPM

About

DIVE is a spatial framework made by and optimized for Shopware. It can be used directly integrated in a Shopware frontend such as Storefront or in any other frontend you want to use it in, it is not tied to Shopware.

DIVE supplies your frontend application with all needed tooling to set up a basic 3D application with event-based controls called "Actions".

Installation

The @shopware-ag/dive package can be installed via

npm install @shopware-ag/dive

or

yarn add @shopware-ag/dive

For local development setup, see Local Development Guide.

Getting Started

Basic Setup

To get started with DIVE, import and instantiate it:

import { DIVE } from '@shopware-ag/dive';

// Create a DIVE instance
const dive = new DIVE();
const myCanvasWrapper = document.createElement('div');
myCanvasWrapper.appendChild(dive.canvas);

Quick View

For a simpler setup, you can use QuickView to quickly display your assets within a basic default scene setup:

import { DIVE } from '@shopware-ag/dive';

// Use static QuickView method to instantiate DIVE
const dive = await DIVE.QuickView('your/asset/uri.glb');
const myCanvasWrapper = document.createElement('div');
myCanvasWrapper.appendChild(dive.canvas);

Modules

DIVE comes with several built-in modules that provide specific functionality. Served modules are independent and can be accessed directly from the modules directory:

import { ARSystem } from '@shopware-ag/dive/modules/ARSystem';

// Initialize AR with options
const arSystem = new ARSystem();
await arSystem.launch('path/to/model.glb', {
    arPlacement: 'horizontal', // or 'vertical'
    arScale: 'auto' // or 'fixed'
});

For detailed information about the module system, see Module System Documentation.