SDK-iframe access

Since Kupinxiu SDK is a WebGL-based model presenter, it will occupy the memory and video memory of the current page.
In order to ensure that the SDK rendering environment and the integration page do not interfere with each other, it is recommended to use an iframe to access the Kupinxiu SDK.

Kupinxiu provides SDK integrated with iframe, @qunhe/3d-model-viewer-iframe-sdk

Example:

TypeScript

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { ViewerSDKRemote } from '@qunhe/3d-model-viewer-iframe-sdk';
import './index.scss';

class App extends Component<{}, any> {

    public sdk: ViewerSDKRemote;

    componentDidMount() {
        const debug = true;
        const domain = debug ? 'localhost:7000' : document.domain;
        const mount = document.getElementById('container')!;

        function createNew(): HTMLElement {
            const m = document.createElement('div');
            m.className = 'container';
            mount.appendChild(m);
            return m;
        }

        const bgid = '3FO4GDEJ6NB8';

        setTimeout(async () => {
            this.sdk = new ViewerSDKRemote({ domain, debug, mount: createNew() });
            await this.sdk.loadModel(bgid);
            await this.sdk.assignMaterial('obj_5e6f3860b5e1d200015325e9', 'material_5e6f4eadb5e1d20001532659');
            await this.sdk.assignMaterial('obj_5e6f3860b5e1d200015325ea', 'material_5e6f4eb6b5e1d2000153265a');

            (window as any).sdk = this.sdk;
        }, 100);
    }

    render() {
        return <div id="container"/>;
    }
}
ReactDOM.render(<App />, document.getElementById('app'));