API Reference

Quick Start

Usage

1. Add the KoolViewer SDK to your HTML, for example:

<html>
<head>
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
  />
  <style>
      html, body {
        margin: 0;
        padding: 0;
      }
      #app {
        position: relative;
        width: 100vw;
        height: 100vh;
        background-color: #f5f5f5;
      }
  </style>
  <script src="//qhmodel-viewer-oss.kujiale.com/release/0.0.195/sdk-ui.min.js"></script>
</head>
<body>
  <div id="app"></div>
</body>

UI version

 <script src="//qhmodel-viewer-oss.kujiale.com/release/0.0.195/sdk-ui.min.js"></script>

No UI version

 <script src="//qhmodel-viewer-oss.kujiale.com/release/0.0.195/sdk.min.js"></script>

Overseas UI version

 <script src="//qhmodel-viewer-oss.coohom.com/release/0.0.195/sdk-ui.min.js"></script>

Overseas no UI version

 <script src="//qhmodel-viewer-oss.coohom.com/release/0.0.195/sdk.min.js"></script>

2. Initialize koolViewer

<html>
<head>
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
  />
  <style>
      html, body {
        margin: 0;
        padding: 0;
      }
      #app {
        position: relative;
        width: 100vw;
        height: 100vh;
        background-color: #f5f5f5;
      }
  </style>
  <script src="//qhmodel-viewer-oss.kujiale.com/release/0.0.195/sdk-ui.min.js"></script>
</head>
<body>
  <div id="app">
    <script>
      const viewer = new koolViewer.ViewerUISDK({                               //model initialization
      	mount: document.getElementById('app'),
      	modelId: '3FO4KIHUSL4W'
      });
    </script>
  </div>
</body>

If you want to use the overseas coohom version, you need to replace the sdk version with the above overseas version, and in the model initialization, you need to set two parameters to be true.

<script src="//qhmodel-viewer-oss.coohom.com/release/0.0.195/sdk-ui.min.js"></script>

var viewer = new koolViewer.ViewerUISDK({
  mount: document.getElementById('app'),
  modelId: '3FO4KIHUSL4W',
  useCoohomCDN: true,                                     // Use overseas version to transfer parameters
  useCoohomAPI: true, 																		// Use overseas version to transfer parameters
});

If you only want to show the model, the default style is not needed:

var viewer = new koolViewer.ViewerSDK({
  mount: document.getElementById('app'),
  modelId: '3FO4KIHUSL4W',
});

// When the default style is not used, the start() method needs to be executed manually
viewer.start().then(() => {}).catch(err => {});

Initialization has two parameters that must be passed:

  • mount: Specify the DOM node where the viewer be mounted. In the example above, Div with id app is the initial mount node for the instance of the 3D Viewer.
  • modelId: Coohom model id (obsbgid)

For more initialization parameters, refer to the API documentation.

3. Use SDK API to operate, configure and extend

// Change camera position, switch top view
viewer.setCameraView('top');

// Turn on auto rotation
viewer.setAutoRotate(true);

// Get components and materials data
const components = viewer.getComponents();

// Replace a material of a component
await viewer.changeMaterial(components[0].id, components[0].materials[1].id);

How to use

This NPM package @qunhe/3d-model-viewer-sdk can be used directly inside kujiale

yarn add @qunhe/3d-model-viewer-sdk

import { ViewerUISDK } from '@qunhe/3d-model-viewer-sdk';

or

import { ViewerSDK } from '@qunhe/3d-model-viewer-sdk';

Advanced Usage

Optimize SDK package size

If you just want to show the model and don't need default styles like Toolbar, texture list, etc., then you don't need to import the sample CSS and JS in your HTML.
Just import the smaller JS SDKS without styles:

Use of domestic network environment

<script src="//qhmodel-viewer-oss.kujiale.com/release/0.0.195/sdk.min.js"></script>

Use of overseas network environment

<script src="//qhmodel-viewer-oss.coohom.com/release/0.0.195/sdk.min.js"></script>

<script src="//qhstaticssl.kujiale.com/newt/879/text/javascript/1577678043044/56F7463A83ACB9B511439E26849E90FF.js"></script>

var viewer = new kooViewer.ViewerSDK({
  mount: document.getElementById('app'),
  modelId: '3FO4KIHUSL4W',
});

// When the default style is not used, the start() method needs to be executed manually
viewer.start().then(() => {}).catch(err => {});

Latest stable version

0.0.162

Reminder for the version update when the SDK is used by three parties

Version 0.0.162 and later, if the version is outdated, there will be a suggestion to update the SDK version in the console

2270