IoT App Kit Extra

>> README - 日本語版

This library extends the AWS IoT App Kit's Scene Composer.



- Replaces TwinMaker tag objects to Three.js object (e.g. MMD, buttons, text, etc.)
- Triggers a color change in TwinMaker tags to change the motion of the MMD and the content of the text.

Strongly dependent on IoT App Kit.

https://github.com/awslabs/iot-app-kit

Dynamic Sample

https://pub-5e7ce27e493044a6ad7b1d927d05320c.r2.dev/index.html

Document

https://shotaoki.github.io/iot-app-kit-extra/

Concept

Easily achieve a range of things that TwinMaker does not implement.

Requirements

Equivalent to IoT App Kit.

$3

- Node.js
- React 18.0 Later
- Typescript
- VSCode

Usage

$3

Create new react application with iot-extra.

``bash
npx @iak-extra/cli create ${Application Name}
`

$3

Already exists react project, you can install with NPM.

`bash
npm install @iak-extra/scene-composer-extra
`

$3

Create tags in TwinMaker in advance.

You can name the tag anything you like. For example, you can name it "any-text-tag-name".

![](./images/named-tag.png)

$3

Simply write the following to replace the tag with the name "any-text-tag-name" with a ThreeMeshUi text object.

`typescript
import { initialize } from "@iot-app-kit/source-iottwinmaker";
import { SceneViewer } from "@iot-app-kit/scene-composer";
import { useOverrideTags } from "@iak-extra/scene-composer-extra";

function App() {
// Read TwinMaker Scene
const twinmaker = initialize(/* Certificate /);
const sceneLoader = twinmaker.s3SceneLoader(/* Scene Info /);

/* Controller for TwinMaker /
const controller = useOverrideTags({
// Replace Tag to Text
"any-text-tag-name": (replaceTag) =>
replaceTag.toText?.create({
content: "TextContents",
}),
});

return (


export default App;
`

Similarly, the tag is replaced by MMD when written as follows.

`typescript
"any-mmd-tag-name": (replaceTag) => {
replaceTag.toMMD?.create({
// MMD Initialize Info
})
}
`

The following will replace the tag with a button.

`typescript
"any-button-tag-name": (replaceTag) => {
replaceTag.toButton?.create({
// Button Initialize Info
})
.onClickEvent(() => {
console.log("clicked !!");
}),
}
`

Development

Execute the following command to install the library.

`bash


Execute Directory :: src/scene_composer_extra

`bash


Execute Directory :: src/scene_composer_extra

`bash
npm install ${ProjectRoot}/package/scene_composer_extra
`

The following command pushes to NPM.

`bash


Execute Directory :: package/scene_composer_extra

License

The license of this source code is MIT.

The fonts, illustrations, and MMD models included in the resource are the property of their copyright holders and are subject to their licenses.