@shopware-ag/dive

Table of Contents

- Table of Contents
- About
- Installation
- Getting Started
- Basic Setup
- Quick View
- Plugins
- Documentation

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

``bash
npm install @shopware-ag/dive

or

yarn add @shopware-ag/dive
`

For local development setup, see Local Development Guide.

Getting Started

$3

To get started with DIVE, import and instantiate it:

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

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

$3

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

`ts
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);
`

Plugins

DIVE comes with several built-in plugins that provide specific functionality. They are self-contained and can be imported as a subpath export from the package:

`ts
import { ARSystem } from '@shopware-ag/dive/ar';

// 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 plugin system, see
Plugin System Documentation.

Documentation

For detailed documentation, please refer to the following sections:

- Plugin System - Detailed plugin system architecture and usage
- Shopware Integration - Integration with Shopware projects
- Testing and Quality Assurance - Testing guidelines and best practices
- Local Development - Local development setup and workflow