What is 3dily?

3dily is a library for the use of 3dily.com customers, with which you can display 3D models and 360 images on your site.

Installing

In the examples below, the Threedily object comes either from:

UMD

• Threedily will be registered as a global variable:

<link href="./dist/3dily.css" rel="stylesheet" type="text/css">
<script src="./dist/3dily.min.js"></script>

ESM Module

<link href="./dist/3dily.css" rel="stylesheet" type="text/css">
<script type="module">
  import { Threedily } from "./dist/3dily.esm.min.js";
</script>

NPM

import { Threedily } from '3dily'
import '3dily/style.css'

Usage

<div id="3dily-viewer"></div>
<script>
    const opts = {
        containerId: '3dily-viewer',
        panelId: '6314455ed74d211b23946bbd',
        productCode: 'kamran',
    }
    const threedily = Threedily(opts)
</script>

React

App.js

import { useEffect, useRef } from "react";
import { Threedily } from "3dily";
import "3dily/style.css";

const App = () => {
  const threedily = useRef();

  useEffect(() => {
    threedily.current = Threedily({
      panelId: "6314455ed74d211b23946bbd",
      productCode: "kamran",
      containerId: "3dily-viewer",
    });
    return () => threedily.current?.remove();
  }, []);

  return (
    <div id="3dily-viewer" style={{ width: "500px", height: "500px" }}></div>
  );
};

export default App;

Options

| Name | Description | Default Value | | :--------------------: | :------------------------------------------------------------------------------------------------------------: | :-----------: | | containerId (required) | The container element that we render threedily tool on this element | _ | | panelId (required) | The panel id that you can access thier product. Steps to get panelId: Log in to your panel > Profile > API key | _ | | productCode (required) | Code of the product | _ | | mode | which feature of threedily do you want to use for your product ? 360 or model | auto | | shadow | shadow use for adding shadow on the printed product | false | | variants | You specify the default variants | _ | | background | the background of product that want to show | #FFFFFF | | autoAR | automaticly in mobile must go to ar workspace | false | | arUrl | the url address of ar that we want to open | Current page |

Methods

| Name | Parameter | Description | | :--------------: | :------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | changeVariants | ({ layer: variant }) | You can change the variants using this method. The input parameter must be an object of layer code and variant code, for example: { leg: 'blue', feet: 'brown', ... } | | changeBackground | (color) | The color value can be a string of hex, hsl, rgb and color name (color is required) | | toggleShadow | (value) | The parameter is optional, if no value is given, it will be false if it is true and vice versa | | getData | () | With this method, you can get scene data | | remove | () | You can delete the scene with this method | | on | (eventName, cb) | With this method, you can add a callback to the desired event | | off | (eventName, cb) | With this method, you can remove a callback from the desired event |

Events

| name | Arguments | Description | | :----------: | :-------: | :-------------------------------------: | | change-frame | (frame) | Event will fired on active frame change |

Demos

Simple

React