fix: hide GLTFs on entities nested under the Camera or Player (#930)

* fix: hide gltfs on entities nested under camera or player entities * chore: fix tests
decentraland · Apr 15, 2024 · 2f5f210 · 2f5f210
1 parent f417f2c
commit 2f5f210
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 4 deletions.
diff --git a/packages/@dcl/inspector/src/lib/babylon/decentraland/EcsEntity.ts b/packages/@dcl/inspector/src/lib/babylon/decentraland/EcsEntity.ts
@@ -145,6 +145,7 @@ export class EcsEntity extends BABYLON.TransformNode {
   getRoot() {
     const ctx = this.context.deref()
     const nodes = ctx?.editorComponents.Nodes.getOrNull(ctx.engine.RootEntity)?.value || []
+    if (nodes.length === 0) return null
     const root = getRoot(this.entityId, nodes)
     return root
   }

diff --git a/packages/@dcl/inspector/src/lib/babylon/decentraland/gizmo-manager.spec.ts b/packages/@dcl/inspector/src/lib/babylon/decentraland/gizmo-manager.spec.ts
@@ -7,11 +7,19 @@ import { EntityType } from '@dcl/schemas'
 import { DataLayerRpcClient } from '../../data-layer/types'
 import { Operations } from '../../sdk/operations'
 import { Entity } from '@dcl/ecs'
+import { EditorComponents, Node } from '../../sdk/components'
+import { CAMERA, PLAYER, ROOT } from '../../sdk/tree'
 
 describe('GizmoManager', () => {
   let engine: Engine
   let scene: Scene
   let context: SceneContext
+  let entities: Entity[] = []
+  let nodes: Node[] = [
+    { entity: ROOT, children: entities },
+    { entity: CAMERA, children: [] },
+    { entity: PLAYER, children: [] }
+  ]
   beforeEach(() => {
     engine = new NullEngine()
     scene = new Scene(engine)
@@ -30,6 +38,13 @@ describe('GizmoManager', () => {
       dispatch: jest.fn(),
       getSelectedEntities: jest.fn(() => [])
     } as unknown as Operations
+    ;(context.editorComponents as any) = {
+      Nodes: {
+        getOrNull: jest.fn().mockReturnValue({
+          value: nodes
+        })
+      }
+    } as unknown as EditorComponents
   })
   describe('When creating a new gizmo manager', () => {
     let gizmos: Gizmos
@@ -51,11 +66,15 @@ describe('GizmoManager', () => {
         handler = jest.fn()
         gizmos.onChange(handler)
         gizmos.setEntity(babylonEntity)
+        entities = [dclEntity]
+        nodes.push({ entity: dclEntity, children: [] })
       })
       afterEach(() => {
         babylonEntity.dispose()
         context.engine.removeEntity(dclEntity)
         gizmos.unsetEntity()
+        entities = []
+        nodes = nodes.filter(($) => $.entity !== dclEntity)
       })
       it('should set the entity', () => {
         expect(gizmos.getEntity()).toBe(babylonEntity)

diff --git a/packages/@dcl/inspector/src/lib/babylon/decentraland/sdkComponents/gltf-container.ts b/packages/@dcl/inspector/src/lib/babylon/decentraland/sdkComponents/gltf-container.ts
@@ -1,3 +1,4 @@
+import future from 'fp-future'
 import * as BABYLON from '@babylonjs/core'
 import { GLTFFileLoader, GLTFLoaderAnimationStartMode } from '@babylonjs/loaders'
 import { GLTFLoader } from '@babylonjs/loaders/glTF/2.0'
@@ -7,6 +8,7 @@ import { markAsCollider } from '../colliders-utils'
 import type { ComponentOperation } from '../component-operations'
 import { EcsEntity } from '../EcsEntity'
 import { SceneContext } from '../SceneContext'
+import { CAMERA, PLAYER } from '../../../sdk/tree'
 
 let sceneContext: WeakRef<SceneContext>
 
@@ -75,14 +77,22 @@ export function loadGltf(entity: EcsEntity, value: string) {
     sceneContext = entity.context
   }
 
-  const loadingSpinner = createLoadingSpinner(entity, context.scene)
+  const root = entity.getRoot()
+
+  const shouldHide = root === PLAYER || root === CAMERA || root === null
+
+  const loadingSpinner: BABYLON.Mesh | null = shouldHide ? null : createLoadingSpinner(entity, context.scene)
 
   tryLoadGltfAsync(context.loadableScene.id, entity, value)
     .catch((err) => {
       console.error('Error trying to load gltf ' + value, err)
     })
     .finally(() => {
-      loadingSpinner.dispose(false, true)
+      if (shouldHide) {
+        entity.setVisibility(false)
+      } else {
+        loadingSpinner?.dispose(false, true)
+      }
     })
 }
 
@@ -131,6 +141,8 @@ async function tryLoadGltfAsync(sceneId: string, entity: EcsEntity, filePath: st
   const file = new File([content], finalSrc)
   const extension = filePath.toLowerCase().endsWith('.gltf') ? '.gltf' : '.glb'
 
+  const loadAssetFuture = future<void>()
+
   loadAssetContainer(
     file,
     entity.getScene(),
@@ -160,14 +172,18 @@ async function tryLoadGltfAsync(sceneId: string, entity: EcsEntity, filePath: st
       entity.generateBoundingBox()
       entity.setGltfAssetContainer(assetContainer)
       entity.resolveGltfPathLoading(filePath)
+      loadAssetFuture.resolve()
     },
     undefined,
-    (_scene, _message, _exception) => {
-      console.error('Error while calling LoadAssetContainer: ', _message, _exception)
+    (_scene, message, _exception) => {
+      console.error('Error while calling LoadAssetContainer: ', message, _exception)
       entity.resolveGltfPathLoading(filePath)
+      loadAssetFuture.reject(new Error(message))
     },
     extension
   )
+
+  return loadAssetFuture
 }
 
 export function loadAssetContainer(