3dily

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

Methods

Events

Demos

Simple

React