Help using pnextThreeLoader with react

[mikisf]

I'm trying to use this library with my react project but I'm struggling to make it work. The first issue I run into was the error: "window is not defined", which I was able to solve it by importing the component dynamically without server side rendering, doing it like so:

const PNextThreeLoader = dynamic(
  () => import("../components/PNextThreeLoader"),
  {
    ssr: false,
  }
);

After, I tried loading the example pointcloud like this:

useEffect(() => {
    if (sceneVar === undefined) return;
    const baseUrl = "https://cdn.rawgit.com/potree/potree/develop/pointclouds/lion_takanawa/";
    potreeVar
        .loadPointCloud("cloud.js", (url) => `${baseUrl}${url}`)
        .then((pco) => {
            console.log(pco);
            sceneVar.add(pco);
            potreeVar.updatePointClouds([pco], cameraVar, rendererVar);
            rendererVar.render(sceneVar, cameraVar);
        });
}, [sceneVar]);

but I'm not able to see the lion and there is no error in the console. I've created a sandbox so you can test it: https://codesandbox.io/p/github/mikisf/pNextThreeLoaderReact/draft/hopeful-silence?file=/components/PNextThreeLoader.js:64,3-76,18&workspaceId=9764f67d-193b-4747-b7a4-e67f33e4cfb2 Or in this github repo: https://github.com/mikisf/pNextThreeLoaderReact Thanks in advance ;)

[vanilla-tiramisu]

How did you deal with this problem then? Struggling to make it work too...

[im-hamza-dev]

@vanilla-tiramisu you can check this example folder from this repository:

https://github.com/pnext/three-loader/tree/master/example

main.ts and viewer.ts properly provide the implementation with threejs scene