tridi-3d v1.0.5

Tridi 3D

Tridi 3D is a extenstion of Tridi allowing multi-axis support for 360-degree 3D product visualizations.

Import Tride 3D

import Tridi3DLoader from 'tridi-3d'

Optional: Tride 3D Styles

import 'node_modules/tridi-3d/lib/css/tridi3d.css'

Tridi3DLoader will use a class selector to query and initial all desired instances in the DOM. Each axis requires a folder directory of the relatives images. If if more than one "1" axis are set, tridi3d will look for a directory of each axis index (eg: /images/subject/1/, /images/subject/2/, /images/subject/3/). If only one axis is set as a property tridi3d will point only the directory provided in data-folder attribute (eg: /images/subject/).

Required Attributes:

// Images directory path
// Cloud Storage Directory (eg: https://s3-storage/360_images/Superman/)
// Local Directory (eg: 3D_images/images/)
this.props.folder = el.getAttribute.('data-folder')

// Commen image file naming standard
// 2-axis rotation (eg: `/images/subject{axis}-{index}.jpg`) 
// 1 axis rotation (eg: `/images/subject_{index}.jpg`)
this.props.filename = el.getAttribute.('data-filename')

// Image amount
this.props.amount = el.getAttribute.('data-amount')

// Amount of vertical Axis
this.props.axis = el.getAttribute.('data-axis')

// Starting vertical Axis
this.props.startAxis = el.getAttribute.('data-start-axis')

// Vertical Axis sensitivity
this.props.verticalSensitivity = el.getAttribute.('data-verticalSensitivity')

// Inverted controls
this.props.inverse = el.getAttribute.('data-inverse')

HTML Example:

<div
     class="ripen-360-image"
     data-folder="https://media.ripen.com/360_images/Superman/"
     data-filename="Superman Rotation{axis}-{index}.jpg"
     data-amount="32"
     data-axis="3"
     data-start-axis="3"
     data-verticalSensitivity="12"
     data-inverse="true"
>
</div>

To initialize:

new Tridi3DLoader('.ripen-360-image');

Acknowledgements

Tridi 3D is an extenstion of Tridi by Łukasz Wójcik.