タグ→静的モデルの置換
LIVE DEMO
SOURCE CODE
タグから静的な 3D モデルへの置き換え
TwinMaker のタグを GLB/GLTF の 3D オブジェクトに置き換えます
※アニメーションがついているオブジェクトであれば、ループ再生されます
前提
TwinMaker のシーンに、任意の名前を付けたタグがあること
今回はtag-name-roomの名前を付けます
リソース
public 以下に、以下のファイルがあること
- single-content.json
TwinMaker の定義ファイル - GLB ファイル
画面に表示する 3D ファイル
ソースコード
import { SceneViewer } from "@iot-app-kit/scene-composer";
import {
useOverrideTags,
DirectSceneLoader,
} from "@iak-extra/scene-composer-extra";
function App() {
// TwinMakerの定義ファイルをpublicに配置する
const sceneLoader = new DirectSceneLoader("/single-content.json");
/** TwinMakerをカスタマイズするコントローラー */
const controller = useOverrideTags({
// tag-name-roomのタグを、publicに配置したGLBファイルと置き換える
"tag-name-room": (replaceTag) =>
replaceTag.toGLTF?.create({
angle: 0,
modelPath: "/studio_apartment_vray_baked_textures_included.glb",
}),
});
return (
<div className="App">
<SceneViewer
sceneComposerId={controller.composerId}
sceneLoader={sceneLoader}
/>
</div>
);
}