Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@shopware-ag/dive

Package Overview
Dependencies
Maintainers
0
Versions
80
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@shopware-ag/dive

Shopware Spatial Framework

  • 1.3.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1.6K
increased by57.45%
Maintainers
0
Weekly downloads
 
Created
Source

DIVE logo

dive: downloads dive: downloads dive: downloads dive: downloads

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". For further information, see Getting started.

Installation

npm:
npm install @shopware-ag/dive
yarn:
yarn add @shopware-ag/dive
Setup in Shopware

Don't forget to include DIVE in your webpack.config.js:

const path = require('path');

module.exports = () => {
    return {
        ...
        resolve: {
            extensions: ['.ts', '.cjs', '.js'],
            alias: {
                three: path.resolve(__dirname, 'path/to/node_modules/three'),
                "@shopware-ag/dive": path.resolve(__dirname, 'path/to/node_modules/@shopware-ag/dive'),
            }
        },
        ...
        module: {
            rules: [
                ...
                {
                    test: /\.(js|ts)$/,
                    loader: 'swc-loader',
                    include: [
                        path.resolve(__dirname, 'path/to/node_modules/three'),
                        path.resolve(__dirname, 'path/to/node_modules/@shopware-ag/dive')
                    ],
                    options: {
                        jsc: {
                            parser: {
                                syntax: 'typescript',
                            },
                            target: 'es2022',
                        },
                    },
                },
                ...
            ],
        }
    };
};

Getting started

Import:

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

Instantiate:

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

const dive = new DIVE(); // <-- instantiate DIVE

DIVE supplies your application with a HTMLCanvasElement that it uses as a render target. After instantiating, you can use the supplied canvas within you frontend code to attach it to your DOM.

const dive = new DIVE();

const myCanvasWrapper = document.createElement('div'); // <-- create wrapper element
myCanvasWrapper.appendChild(dive.Canvas); // <-- reference DIVE canvas

To interact with your newly created DIVE instance you have to perform actions via DIVECommunication. For further information, see Actions.

const dive = new DIVE();

const myCanvasWrapper = document.createElement('div');
myCanvasWrapper.appendChild(dive.Canvas);

const com = dive.Communication; // <-- reference DIVECommunication

com.PerformAction('SET_CAMERA_TRANSFORM', { // <-- perform action on DIVECommunication
    position: { x: 0, y: 2, z: 2 },
    target: { x: 0, y: 0.5, z: 0 },
});

Actions

Actions symbolize the communication between frontend and 3D space. All actions can be performed anywhere, no matter if you are in frontend or 3D.

In addition to the impact that specific actions have, every action can be subscribed to.

const myCanvasWrapper = document.createElement('div');
const dive = new DIVE();

myCanvasWrapper.appendChild(dive.Canvas);

const com = dive.Communication;

com.Subscribe('SET_CAMERA_TRANSFORM', () => { // <-- add subscription
    // do something
});

com.PerformAction('SET_CAMERA_TRANSFORM', {
    position: { x: 0, y: 2, z: 2 },
    target: { x: 0, y: 0.5, z: 0 },
});

Subscribing to an action returns a unsubscribe()-callback that should be executed when not needed anymore.

const myCanvasWrapper = document.createElement('div');
const dive = new DIVE();

myCanvasWrapper.appendChild(dive.Canvas);

const com = dive.Communication;

const unsubscribe = com.Subscribe('SET_CAMERA_TRANSFORM', () => { // <-- save unsubscribe callback
    // do something
});

com.PerformAction('SET_CAMERA_TRANSFORM', {
    position: { x: 0, y: 2, z: 2 },
    target: { x: 0, y: 0.5, z: 0 },
});

unsubscribe(); // <-- execute unsubscribe callback when done

In the following you find a list of all available actions to perform on DIVECommunication class via com.PerformAction().

ActionDescription
GET_ALL_SCENE_DATAReturn all scene data that is currently set
SET_BACKGROUNDSet a background color
UPDATE_SCENEUpdate scene data
GET_CAMERA_TRANSFORMReturn currenty camera transformation
MOVE_CAMERAMove camera to a specific position or the position of a previously defined POV (with an animation)
RESET_CAMERAReset camera to original position after MOVE_CAMERA was performed
SET_CAMERA_LAYERSet camera layer to switch between live view and editor view
SET_CAMERA_TRANSFORMSet camera transformation (w/o animation, used to initially set up camera)
ZOOM_CAMERAZoom in or out
GENERATE_MEDIAGenerate a screenshot with the specified parameters
MODEL_LOADEDIs performed when a model file is completely loaded
DROP_ITPlaces the model onto the nextg underlying object's bounding box
PLACE_ON_FLOORSet a model onto to the floor
ADD_OBJECTAdd an object to the scene
UPDATE_OBJECTUpdate an existing object
DELETE_OBJECTDelete an existing object
GET_ALL_OBJECTSReturn a map of all objects
GET_OBJECTSReturn a map of all objects (with the opportunity to filter for ids)
SELECT_OBJECTSelect an existing object in the scene
SET_GIZMO_MODESet gizmo mode

Keywords

FAQs

Package last updated on 09 Jul 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc