How to normalize/modify pivot of a model when loaded?

[carlreid]

Before using react-babylonjs, I was loading in models using something like below, to essentially change the pivot point of any mesh that is loaded in, so any mesh would be properly centered. I am trying to replicate it with react-babylonjs.

Before:

const normalizeMesh = (sceneLoadResult: ISceneLoaderAsyncResult): Vector3 => {
  // Create a transform node, and set top most mesh's parent to the transform node
  const transformNode = new TransformNode("model-transform");
  sceneLoadResult.meshes.forEach((mesh) => {
    if (!mesh.parent) {
      mesh.parent = transformNode;
    }
  });

  // Normalize and scale to 100
  transformNode.normalizeToUnitCube(true);
  transformNode.scaling.scaleInPlace(100);

  // Calculate mesh's center point, then move it to origin (to "fix" pivot points)
  const { min, max } = transformNode.getHierarchyBoundingVectors(true);
  const center: Vector3 = min.add(max).scale(0.5);
  transformNode.setPivotPoint(center, Space.WORLD);
  transformNode.translate(Vector3.Up(), max.y + 10, Space.WORLD);

  return transformNode.position.add(transformNode.getPivotPoint());
};

After (in react-babylonjs):

function ScaledModelWithProgress(props) {
  return (
    <SceneLoaderContextProvider>
      <Suspense
        fallback={
          <ProgressFallback
            progressBarColor={props.progressBarColor}
            rotation={props.progressRotation ?? props.modelRotation}
            center={props.center}
            scaleTo={props.scaleTo}
          />
        }
      >
        <transformNode
          name="normalize-transform"
          onCreated={(transformNode, scene) => {
            transformNode.normalizeToUnitCube(true, false); // Seems to normalize to 0,0,0 scale
            transformNode.scaling.setAll(1); // Set scale to 1 to fix above.
            transformNode.scaling.scaleInPlace(100);
            const { min, max } =
              transformNode.getHierarchyBoundingVectors(true);
            const center: Vector3 = min.add(max).scale(0.5);
            transformNode.setPivotPoint(center, Space.WORLD);
            transformNode.translate(Vector3.Up(), max.y + 10, Space.WORLD);

            console.log(transformNode.getChildren()); // Reports an empty array??
          }}
        >
          <Model
            name="model"
            reportProgress
            position={props.center}
            rootUrl={props.rootUrl}
            sceneFilename={props.sceneFilename}
            rotation={props.modelRotation}
            // scaleToDimension could be used instead of using transformNode for the scaling, but not the pivot point
          />
        </transformNode>
      </Suspense>
    </SceneLoaderContextProvider>
  );
}

What I have observed at leas, is that console.log(transformNode.getChildren()) outputs an empty array, when I would have expected the loaded model to be in there. I can see in the inspector window that the model is in the transform.

Maybe onCreated is far too early and I should perform that logic elsewhere, but didn't find where this could be yet. I also suspect the transformNode.scaling.setAll(1); // Set scale to 1 to fix above. part is just because the normalizeToUnitCube is working on no content, so it normalizes to 0,0,0 as there aren't any descendants.

Where should I essentially "hook" into any change events of content in the transformNode to be able to re-calculate a pivot point? There seems to be onAfterWorldMatrixUpdateObservable (doesn't provide types in TS) and onReady (provides just node: Node).

Update 1

I have observed that the transformNode's children does indeed become an array of 1, if I make a change and save, which causes a re-render I guess. So I guess this has something more to about the state not being updated somehow?

I'm now attempting to useState the transform node, and when the model loads. Still doesn't work completely, but feel like it's closer to a solution.

function ScaledModelWithProgress(props) {
  const [transformNode, setTransformNode] = useState<TransformNode>();
  const [modelLoaded, setModelLoaded] = useState<boolean>();

  useEffect(() => {
    if (
      transformNode &&
      modelLoaded &&
      transformNode.getChildren().length > 0
    ) {
      transformNode.normalizeToUnitCube(true);
      transformNode.scaling.scaleInPlace(100);
      const { min, max } = transformNode.getHierarchyBoundingVectors(true);
      const center: Vector3 = min.add(max).scale(0.5);
      transformNode.setPivotPoint(center, Space.WORLD);
      transformNode.setAbsolutePosition(Vector3.Zero());
      transformNode.translate(Vector3.Up(), max.y + 10, Space.WORLD);
    }
  }, [transformNode, modelLoaded]);

  return (
    <SceneLoaderContextProvider>
      <Suspense
        fallback={
          <ProgressFallback
            progressBarColor={props.progressBarColor}
            rotation={props.progressRotation ?? props.modelRotation}
            center={props.center}
            scaleTo={props.scaleTo}
          />
        }
      >
        <transformNode
          name="normalize-transform"
          onCreated={setTransformNode}
        >
          <Model
            name="model"
            reportProgress
            position={props.center}
            rootUrl={props.rootUrl}
            sceneFilename={props.sceneFilename}
            rotation={props.modelRotation}
            onModelLoaded={() => {
              setModelLoaded(true);
            }}
          />
        </transformNode>
      </Suspense>
    </SceneLoaderContextProvider>
  );
}

[brianzinn]

hi @carlreid - sorry for late reply - I have been AFK for a week. What is happening is that your transform node is created immediately and then the <Model ... /> is loaded asynchronously. If you have a look at the Model component then you can see that you would be better off using the hook to load the model and then apply any transforms at that point:
https://github.com/brianzinn/react-babylonjs/blob/master/packages/react-babylonjs/src/customComponents/Model.tsx#L64

Let me know if that helps (the hook is throwing a promise, which is caught in the <Suspense .. /> and then then it flows through it will be a loaded model that you can normalize/pivot).

[carlreid]

Bit confused on what you mean here. Though I think I might be able to achieve a more automatic framing just by using useFramingBehaviour, though it still seems I need to fix the center and such, which I may need the transform for still.

I tried wrapping the abstractMesh in a transform (I think that's what you meant?) but I kind of need to calculate the "contents" of the transform node to be able to switch the pivot point to the middle. So I need to update the transformNode based on the child. Should I be maybe using the onModelLoadedto trigger a state change where thetransformNode` can be re-calculated based on this?

[brianzinn]

Yes, ‘onModelLoaded’ is another way. That will be called after the model is loaded. You can just run your original code on ‘rootMesh’, because I parent is set the same as the first part of your code.
https://github.com/brianzinn/react-babylonjs/blob/master/packages/react-babylonjs/src/hooks/loaders/useSceneLoader.tsx#L185

does that work?

[carlreid]

Ah I see, yes, I think that'll work there then. Cheers 👍