CLOSET 3D Viewer is a JavaScript library to see the object in 3D on any web pages or applications supporting for HTTPS and JavaScript. By following the guide below, you can make your own 3D web viewer. As CLOSET has been also implemented with this library, you can refer to CLOSET(https://www.clo-set.com/Marketplace/Detail?itemid=a39e955d947647539314f85443c90e9b) as an example.
Only you need is "closet.viewer.js" file under "dist" folder. If you want to customize the library, see How to build
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CLO Viewer Test</title>
</head>
<body>
<script type='text/javascript' src='js/closet.viewer.js'></script>
<script>
closet.viewer.init({
element: 'detail_viewer',
width: 620,
height: 780
})
closet.viewer.loadZrestUrl('https://s3.clo3d.com/zpac/denim.zrest');
</script>
</body>
</html>Here you need to get the URL of ZRest file. ZRest is a file format containing 3D geometry and material information only. When you upload a 3D file(ZPrj, Zpac, AVT and etc) onto CLOSET, a ZRest file is automatically generated in CLOSET server. You can get the URL of the ZRest file by using CLOSET API - api/Item/ZrestUrl/{itemId}.
Initialize viewer with options.
| Option | Type | Description |
|---|---|---|
element |
String | Specifies a id for the container element. |
width |
Number | Width of viewer. |
height |
Number | Height of viewer. |
Load the file from the server and places the 3D object on the viewer.
Works in IE11+, and all modern browsers.
If you want to modify the source code and make your own library, please follow the guide below.
-
First, you need to install Node.js.
-
Clone a copy of the git repo by running:
git clone https://github.com/clovirtualfashion/closet.viewer.js.git- Enter the viewer directory:
cd closet.viewer.js- Install all dependencies and run the build script:
npm install && npm run build- Running develop with webpack-dev-server:
npm run develop- Then, you can get closet.viewer.js in "dist" folder.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent