To install the package, run:
Using npm:
$ npm install @vsllabs/webgl-jsUsing yarn:
$ yarn add @vsllabs/webgl-jsBelow is an example of how to use the webgl-js:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webgl-js</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body {
width: 100%;
height: 100%;
}
/* style parent container */
#main-container {
width: 500px;
height: 700px;
}
</style>
</head>
<body>
<div id="main-container"></div>
<button type="button" id="translate_btn">Translate</button>
</body>
<script type="module" src="./index.js"></script>
</html>index.js
import { initialize, translateTextToASL } from "@vsllabs/webgl-js";
// container ID is the parent element you want to render the webgl within.
// in our example the ID is "main-container"
initialize("API KEY", "Container ID");
const translate_btn = document.getElementById("translate_btn");
translate_btn.onclick = () => {
translateTextToASL("Hello, how are you today?");
};The webgl-js npm provides the necessary setup and functionality for integrating the VSL WebGL component. Other various properties and functions for rendering, controlling, and interacting with the WebGL component can also be imported.
- API_KEY: Your unique API key for accessing the VSL WebGL services.
- Container ID: The HTML parent element ID to render the webgl within.
The following values and functions are also imported by webgl-js:
| Value | Explanation |
|---|---|
| initialize |
|
| translateTextToASL |
|
| isUnityLoaded |
|
| isTranslating |
|
| replay |
|
| changeBgColor |
|
| setAnimationSpeed |
|
| toggleCameraRotation |
|
| error |
|
- Initialize the webgl: Call the initialize function with the required parameters to initialize the WebGL component.
- If succeeded, The webgl component will show withing the parent element of the provided ID
- Translate Text: Use the translateTextToASL function to translate input text when Unity is loaded (isUnityLoaded).
- Replay Last Translation: Use the replay function to repeat the last translation as needed.
- Handle Errors: Check the error value to catch and display any issues that occur during loading or translation.