Need help with re-creating scene on on react

[jbcostan]

hey guys so I’ve been using reactjs and i’ve been following this guide How to use Babylon.js with ReactJS - Babylon.js Documentation

I’ve got it working fine but now i’m just confuse how to restart the scene.
my problem is i’m not sure how to re-create the scene again after calling scene.dispose() either on the onRender() or onSceneReady().

[Deltakosh]

Pinging @brianzinn

[brianzinn]

hi @jbcostan One way would be to change the dependencies on the useEffect hook, which is currently [reactCanvas]. So, if you had a version or something you could do [reactCanvas, sceneId]. (Actually, looking at that example I think the engine should be disposed in there as well, oops.)

Another trick would be to use a key on the <SceneComponent key={sceneId} ... /> itself, which would clear out your scene and re-build that component entirely.

If you are switching back and forth between scenes, I would recommend checking out the AssetContainer:
https://doc.babylonjs.com/how_to/how_to_use_assetcontainer

My first thought it that I don’t see a lot of scenarios where I would want to dispose a scene and re-create another, but if you can share on your use-case then hopefully we can work out the right solution

[jbcostan]

hey @brianzinn, basically I’m making line meshes and create rays base on the origin of the line to the end point so I could use the pickingInfo to get the intersection points to draw a sphere on the intersection points. I want to clear the scene if I decide to start over and I’ve tried putting lines and the sphere into an assetcontainer but my problem is the rays are still there so sometimes if I create lines passing though those previous rays it would create an intersection sphere out of nowhere. I tried looking at putting rays into a container and removeall but I don’t see any. Anyways I’m still fairly new at this and Idk how to do your first two suggestion.

edit: on the other note, I’m also using typescript and I notice that on my abstractmeshes that contains linemesh property, I get a red error line saying this property does not support abstrachmesh if I try to change color, or other linemesh property. It still works but kinda looks annoying in typescript

[brianzinn]

I don’t think rays will intersect with other rays. You might have more luck with RayHelper to Visualize what is happening in your scene.

I’m not 100% on the underlying issue, but recreating the scene because of intersection spheres being created out of nowhere is where I would start.

Your best bet would be a new question with a playground and then the community can help the most.

I will get access to my computer in a few days and can provide an example how to clear the screen.

Also, your TypeScript issue may mean something is off in the typings, but sometimes we just need to cast. Can you share the relevant code to produce that warning?

[jbcostan]

@brianzinn

I don’t think rays will intersect with other rays. You might have more luck with RayHelper to Visualize what is happening in your scene.

I create rays per linemesh and if I clear the linemesh using removeall from container, rays are still left behind, If I create a new mesh, it would intersect the old rays that wasnt cleared and creates an intersection point. I’ve use raycast to visualize and I think best thing I could do is track all the prev rays and set the length to zero. I was just thinking if there’s any easy way. I’ll see if I could create a playground. For the typscript thing, here’s a part of the code:
let xray = Ray.CreateNewFromTo(new Vector3(-size,ycoor,0),new Vector3(size,ycoor,0));

              //let xrayHelper = RayHelper.CreateAndShow(xray,scene,Color3.Yellow());

              lineMap.set(ycoor.toString().concat("y"),ycoor);

              let hitPoints = xray.intersectsMeshes(linesContainer.meshes);

              hitPoints.forEach(function(points,i){

               // console.log("hit",points.pickedPoint);

                if(i>0){

                  let intPoint = Mesh.CreateSphere("Intpoint",32,0.2,scene);

                  intPoint.material=black;

                  intPoint.position.x=points.pickedPoint?.x;

                  intPoint.position.y=points.pickedPoint?.y;

                  intPoint.position.z=0;

                  pointsContainer.meshes.push(intPoint);

                }

              });

              if(rayMesh.name==="XDash"){

               // console.log("xDPos:",rayMesh.position);

               rayMesh.actionManager= new ActionManager(scene);

               rayMesh.actionManager.registerAction(new ExecuteCodeAction(ActionManager.OnPointerOverTrigger,function(){

                rayMesh.color=Color3.Teal();

              }));

              rayMesh.actionManager.registerAction(new ExecuteCodeAction(ActionManager.OnPointerOutTrigger,function(){

                 rayMesh.color= Color3.Red();

               }));

              }

I get the warning at rayMesh.color

[jbcostan]

here’s some picture’s of the scene
first picture is a red dash lines with yellow rays, 2nd picture is with cleared lines and points using deleteall from container, 3rd picture shows unwanted intersection points since that space is supposed to be cleared. now If i wasnt using react, I could of use scene.dispose() then call the createScene() function again and solves this issue, but not too sure with react

[jbcostan]

nvm I found another way and it actually fixed my ray issue.