diff --git a/packages/@dcl/inspector/src/lib/babylon/decentraland/editorComponents/selection.ts b/packages/@dcl/inspector/src/lib/babylon/decentraland/editorComponents/selection.ts index f89607eed..0b1ae59dd 100644 --- a/packages/@dcl/inspector/src/lib/babylon/decentraland/editorComponents/selection.ts +++ b/packages/@dcl/inspector/src/lib/babylon/decentraland/editorComponents/selection.ts @@ -1,12 +1,49 @@ +import { AbstractMesh, Color3, Vector3 } from '@babylonjs/core' import { ComponentType } from '@dcl/ecs' import { EcsEntity } from '../EcsEntity' import type { ComponentOperation } from '../component-operations' +let addedCameraObservable = false +const highlightedMeshes = new Set() + +export function toggleSelection(mesh: AbstractMesh, value: boolean) { + mesh.renderOutline = value + mesh.outlineColor = Color3.White() + mesh.renderOverlay = value + mesh.overlayColor = Color3.White() + mesh.overlayAlpha = 0.1 + if (value) { + highlightedMeshes.add(mesh) + } else { + highlightedMeshes.delete(mesh) + } +} + export const putEntitySelectedComponent: ComponentOperation = (entity, component) => { if (component.componentType === ComponentType.LastWriteWinElementSet) { const componentValue = component.getOrNull(entity.entityId) as { gizmo: number } | null + const scene = entity.context.deref()!.scene + + if (!addedCameraObservable && scene.activeCamera) { + scene.activeCamera.onViewMatrixChangedObservable.add(() => { + if (!scene.activeCamera) return + for (const mesh of highlightedMeshes) { + const distance = Vector3.Distance(scene.activeCamera.position, mesh.position) + mesh.outlineWidth = distance / 500 + } + }) + addedCameraObservable = true + } + if (entity.meshRenderer) { - entity.meshRenderer.showBoundingBox = !!componentValue + toggleSelection(entity.meshRenderer, !!componentValue) + } + + if (entity.gltfContainer) { + for (const mesh of entity.gltfContainer.getChildMeshes()) { + if (mesh.name.includes('collider')) continue + toggleSelection(mesh, !!componentValue) + } } updateGizmoManager(entity, componentValue) diff --git a/packages/@dcl/inspector/src/lib/babylon/decentraland/sdkComponents/mesh-renderer.ts b/packages/@dcl/inspector/src/lib/babylon/decentraland/sdkComponents/mesh-renderer.ts index 770643e15..396e677c5 100644 --- a/packages/@dcl/inspector/src/lib/babylon/decentraland/sdkComponents/mesh-renderer.ts +++ b/packages/@dcl/inspector/src/lib/babylon/decentraland/sdkComponents/mesh-renderer.ts @@ -1,9 +1,9 @@ -import * as BABYLON from '@babylonjs/core' -import { MeshBuilder, VertexBuffer } from '@babylonjs/core' +import { Mesh, MeshBuilder, VertexBuffer } from '@babylonjs/core' import { ComponentType, PBMeshRenderer } from '@dcl/ecs' import type { ComponentOperation } from '../component-operations' import { EcsEntity } from '../EcsEntity' +import { toggleSelection } from '../editorComponents/selection' import { setMeshRendererMaterial } from './material' export const putMeshRendererComponent: ComponentOperation = (entity, component) => { @@ -15,7 +15,7 @@ export const putMeshRendererComponent: ComponentOperation = (entity, component) // this is not optimal for production code, re-using when possible is RECOMMENDED removeMeshRenderer(entity) - let mesh: BABYLON.Mesh | undefined = undefined + let mesh: Mesh | undefined = undefined // then proceed to create the desired MeshRenderer if (newValue?.mesh?.$case === 'box') { @@ -57,8 +57,10 @@ export const putMeshRendererComponent: ComponentOperation = (entity, component) // make the renderer interactable only if the entity is Pickable if (entity.meshRenderer) { entity.meshRenderer.isPickable = true - entity.meshRenderer.showBoundingBox = + toggleSelection( + entity.meshRenderer, entity.context.deref()?.editorComponents.Selection.has(entity.entityId) || false + ) } setMeshRendererMaterial(entity) @@ -74,7 +76,7 @@ function removeMeshRenderer(entity: EcsEntity) { } } -function setMeshUvs(mesh: BABYLON.Mesh, uvs: number[] = []) { +function setMeshUvs(mesh: Mesh, uvs: number[] = []) { if (!uvs.length) { mesh.updateVerticesData(VertexBuffer.UVKind, [0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0]) } else {