wdpapi/README.md

51WORLD WdpApi is a set of programming interfaces developed by JavaScript that is responsible for negotiating between web pages and cloud rendering platforms. Supported by 51Cloud rendering platform, it enables the users to create any HTML5 UI element on

<p>&nbsp;</p>
<p align="center"><a href="http://wdpapi.51aes.com" target="_blank" rel="noopener noreferrer"><img width="300" src="https://wdpapi.51aes.com/doc-static/images/WdpApi-logo-black.svg" alt="WdpApi logo"></a></p>
<p align="center">
<img src="https://img.shields.io/badge/WdpApi%40master-v2.0.2-brightgreen" alt="build version" />
<img src="https://img.shields.io/badge/latest%20build-Aug%202025-orange" alt="publish date" />
<img src="https://img.shields.io/badge/Author-Yamazakey-00B3E6" alt="Author" />
</p>
<p>&nbsp;</p>

## Introduction

WdpApi is a set of cloud rendering and front-end display application programming interfaces (API) developed by JavaScript. On the basis of the 51world rendering platform, the client 3D scene is embedded in the web page in the form of video stream. Users can overlay their own data components and interact with the scene in both directions. WdpApi is compatible with current mainstream JavaScript front-end frameworks, providing fast and convenient development interfaces for front-end developers.

The wdpapi platform based on the full factor scene makes the development of 3D scenes so easy!

## Documentation

To check out and docs, visit [wdpapi.51aes.com](http://wdpapi.51aes.com)


#### Install
```bash
$ npm i wdpapi
```

#### Import
```javascript
import WdpApi from 'wdpapi';
```

#### Init
```javascript
const config = {
    "id": "player", //[required] Render scene container(DOM node id)
    "url": "http://172.31.19.235:8889", //[optional] Cloud rendering service address
    "order": "b96285A3", //[optional] Rendering order, obtained on the cloud rendering client
    "resolution": [3840,2160], //[optional] Set the cloud rendering output resolution[width, height]
    "debugMode": "normal", //[optional] none: does not print logs, normal: normal logs
    "keyboard": { //[optional] keyboard event
        "normal": false, //[optional] Keyboard event, exclude F1~F12 [default disabled]
        "func": false //[optional] Browser F1 ~ F12 function keys [default disabled]
    }
}

const App = new WdpApi(config);

```
#### Parameter Reset
```javascript
const newargs = {
    "url": "Your Server URL",
    "order": "Code",
    "resolution": [3840,2160]
}
App.System.SetOption(newargs)
```

#### Starting
```javascript
App.Renderer.Start().then(res => {
    // TODO res
});
```

#### Starting Events
```javascript
App.Renderer.RegisterEvent([
    {
        name: 'onStopedRenderCloud', func: function () {
            // TODO on StopedRenderCloud
        }
    },
    {
        name: 'onVideoStreamLoaded', func: function () {
            // TODO on Scene Ready
        }
    }
])
```
#### Scene Events
```javascript
App.Renderer.registerSceneEvent([
    {
        name: 'OnWdpSceneIsReady', func: function () {
            // TODO on Scene Ready
        }
    },
    {
        name: 'OnEntityAdded', func: function () {
            // TODO on EntityAdded
        }
    },
    {
        name: 'OnEntityRemoved', func: function () {
            // TODO on EntityRemoved
        }
    },
    {
        name: 'OnEntityClicked', func: function () {
           // TODO on EntityClicked
        }
    },
    {
        name: 'OnWebJSEvent', func: function () {
           // TODO The widnow event receives "WebJSEvent"
        }
    }
])
```

#### Stop Rendering
```javascript
App.Renderer.Stop();
```

## License

Copyright (c) 2023-present, 51WORLD