Hey ,
I'm new to these parts and looking to create a package that uses an npm package. The npm package I want to use is not available as a Web Component. I have the code ready for plain HTML and JavaScript, but I'm not sure how to convert it to the way Toddle expects. My goal is to convert this module into a Toddle package so that I can use it in my web apps and publish it. Any help would be appreciated.
Here's the code:
HTML
<html>
<body>
<div id="app" style="aspect-ratio: 16/9; width: 100%;"/>
</body>
</html>
JS + No Library (Pure JS)
import { Viewer,
DefaultViewerParams,
SpeckleLoader,
UrlHelper, CameraController, SelectionExtension} from "https://esm.sh/@speckle/viewer@2.20.1";
async function main() {
/** Get the HTML container */
const container = document.getElementById("app");
/** Configure the viewer params */
const params = DefaultViewerParams;
params.showStats = true;
params.verbose = true;
/** Create Viewer instance */
const viewer = new Viewer(container, params);
/** Initialise the viewer */
await viewer.init();
/** Add the stock camera controller extension */
viewer.createExtension(CameraController);
/** Add the selection extension for extra interactivity */
viewer.createExtension(SelectionExtension);
/** Create a loader for the speckle stream */
const urls = await UrlHelper.getResourceUrls(
"https://latest.speckle.systems/projects/c43ac05d04/models/5dc6ee6056@3b7ad0099a",
);
for (const url of urls) {
const loader = new SpeckleLoader(viewer.getWorldTree(), url, "");
/** Load the speckle data */
await viewer.loadObject(loader, true);
}
}
main();
.jpeg/public)