From 5087313c471c28de1480b32ad21b38d26a6e045f Mon Sep 17 00:00:00 2001
From: dennemark <martin@formfollowsyou.com>
Date: Wed, 27 Oct 2021 15:11:29 +0200
Subject: [PATCH] fix: :bug: fix html loosing anchor node - camera
 transformation matrix is 0 on first render, led to vec being [NaN, NaN],
 therefore just added an isNaN check.

---
 src/customComponents/Html.tsx | 32 +++++++++++---------------------
 1 file changed, 11 insertions(+), 21 deletions(-)

diff --git a/src/customComponents/Html.tsx b/src/customComponents/Html.tsx
index 684dc1cc..e5cb9576 100644
--- a/src/customComponents/Html.tsx
+++ b/src/customComponents/Html.tsx
@@ -18,7 +18,7 @@ function defaultCalculatePosition(el: AbstractMesh, camera: Camera) {
   const objectPos = el.getAbsolutePosition();
   const engine = camera.getEngine()
   const viewport = camera.viewport.toGlobal(engine.getRenderWidth(), engine.getRenderHeight());
-  const screenPos = Vector3.Project(objectPos, Matrix.Identity(), camera.getScene().getTransformMatrix(), viewport)
+  const screenPos = Vector3.Project(objectPos, Matrix.Identity(), camera.getTransformationMatrix(), viewport)
 
   return [screenPos.x * engine.getHardwareScalingLevel(), screenPos.y * engine.getHardwareScalingLevel()]
 }
@@ -237,36 +237,26 @@ const Html = forwardRef(
       } else {
         render(<div id="html_babylon" ref={ref} style={styles} className={className} children={children} />, el)
       }
-      // el && createPortal(<>
-      //   {transform ? <div id="html_babylon" ref={transformOuterRef} style={styles}>
-      //     <div ref={transformInnerRef} style={transformInnerStyles}>
-      //       <div ref={ref} className={className} style={style} children={children} />
-      //     </div>
-      //   </div>
-      //   :<div  id="html_babylon" ref={ref} style={styles} className={className} children={children} />}
-      //   </>, el)
-
     })
 
     const visible = useRef(true)
 
     useBeforeRender(() => {
-      let camera = scene?.activeCamera;
-
+      const camera = scene?.activeCamera;
+      
       if (camera && group.current) {
         const node = group.current as AbstractMesh;
         node.computeWorldMatrix(true)
-        //camera?.getWorldMatrix();
         const vec = transform ? oldPosition.current : calculatePosition(node, camera)
-
+       
         el.style.display = node.isEnabled(true) ? 'block' : 'none'
-
-        if (
-          transform ||
-          Math.abs(oldZoom.current - camera.fov) > eps ||
-          Math.abs(oldPosition.current[0] - vec[0]) > eps ||
-          Math.abs(oldPosition.current[1] - vec[1]) > eps
-        ) {
+ 
+        if ( (isNaN(vec[0]) === false) && (
+            transform ||
+            Math.abs(oldZoom.current - camera.fov) > eps ||
+            Math.abs(oldPosition.current[0] - vec[0]) > eps ||
+            Math.abs(oldPosition.current[1] - vec[1]) > eps
+          )) {
           const isBehindCamera = isObjectBehindCamera(node, camera)
 
           let raytraceTarget: null | undefined | boolean | AbstractMesh[] = false