API Reference

Demo

How does the UI SDK hide panel

demo：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta 
	name="viewport"
	content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    #app {
      width: 100vw;
      height: 100vh;
      position: relative;
    }
  </style>
  <script src="//qhmodel-viewer-oss.kujiale.com/release/0.0.146/sdk-ui.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script>
    var viewer = new koolViewer.ViewerUISDK({
      mount: document.getElementById('app'),
      modelId: '3FO4KOOOD1SC',
      autoRotate: true,
      enablePanel: false // hide panel
    });
  </script>
</body>
</html>
});

UI SDK display panel interface：

3360

UI SDK hidden panel interface:

3360

How to customize the material panel in UI SDK

demo：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .container {
      width: 100vw;
      height: 100vh;
      position: relative;
      display: flex;
    }
    #app {
      flex: 4
    }
    .panel {
      flex: 1;
      background-color: #ddd;
    }
    .title {
      height: 60px;
      line-height: 60px;
      background-color: #eee;
      padding-left: 16px;
    }
    .material {
      padding: 0 20px;
    }
  </style>
  <script src="//qhmodel-viewer-oss.kujiale.com/release/0.0.146/sdk-ui.min.js"></script>
</head>

<body>
  <div class="container">
    <div id="app"></div>
    <div class="panel">
      <div class="title">Material</div>
      <div class="material"></div>
    </div>
  </div>

  <script>
    var viewer = new koolViewer.ViewerUISDK({
      mount: document.getElementById('app'),
      modelId: '3FO4KOOOD1SC',
      autoRotate: true,
      enablePanel: false, // hide panel
      afterDidMount() { // callback after loading
        var components = viewer.getComponents(); // get a list of components and materials
		
        for (let i = 0; i < components.length; i++) {
          var material = document.querySelector(".material")
          var title = document.createElement("div")
          title.innerText = components[i].name;
          title.style.margin = '8px 0 6px 8px';
          material.appendChild(title)

          for (let j = 0; j < components[i].materials.length; j++) {
            var img = document.createElement("img")
            img.src = components[i].materials[j].thumbnail;
            img.width = '50';
            img.style.margin = '2px 10px';
            img.style.borderRadius = '12px';
            material.appendChild(img);

            img.onclick = function () {
              viewer.changeMaterial(components[i].id, components[i].materials[j].id); // replace material
            }
          }
        }
      }
    });
  </script>
</body>
</html>

UI SDK custom panel interface：

3360

UI SDK KpxGroup kooviewer: How to replace the product model in the same product list

demo：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8" />
 <meta name="viewport"
  content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 <title>3D Viewer Demo</title>
 <style>
  body {
   margin: 0;
   padding: 0;
  }
  #app {
   width: 100vw;
   height: 100vh;
   position: relative;
  }
 </style>
 <script src="//qhmodel-viewer-oss.kujiale.com/release/0.0.149-release.14/sdk-ui.min.js"></script>
</head>
<body>
 <div id="app"></div>
 <script>
  var viewer = new koolViewer.ViewerUISDK({
   mount: document.getElementById('app'),
   kpxGroupId: 'YTbhj6wZfzgAAQAAAAU',
   autoRotate: false,
  });
 </script>
</body>

UI SDK custom panel interface:
First, select the combination item in the right panel. After entering the item list , you can click to replace the item in the list.

3572 3584

How to control the size of the SDK

Currently only supports controlling the size of the SDK by adjusting the container size.
demo：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #app {
      width: 600px;
      height: 400px;
      position: relative;
    }
  </style>
  <script src="//qhmodel-viewer-oss.kujiale.com/release/0.0.146/sdk-ui.min.js"></script>
</head>

<body>
  <div id="app"></div>
  <script>
    var viewer = new koolViewer.ViewerUISDK({
      mount: document.getElementById('app'),
      modelId: '3FO4KOOOD1SC',
      autoRotate: true,
      enablePanel: false,
      backgroundColor: '#999'
    })
  </script>
</body>
</html>