Support multiple Viewer3d on a single blazor page by unique ContainerId

src/dotnet/Blazor3D/Blazor3D/HomagGroup.Blazor3D.csproj

@@ -19,6 +19,9 @@ This Blazor3D component uses three.js library to display 3D scenes on html canva
 See examples of using here https://github.com/HomagGroup/HomagGroup.Blazor3D
 		</Description>
 		<AssemblyName>Blazor3D</AssemblyName>
+		<AssemblyVersion>0.203</AssemblyVersion>
+		<FileVersion>0.203</FileVersion>
+		<Version>0.203-alpha</Version>
 	</PropertyGroup>
 
   <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
@@ -39,4 +42,8 @@ See examples of using here https://github.com/HomagGroup/HomagGroup.Blazor3D
     <PackageReference Include="Newtonsoft.Json" Version="13.0.1" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Folder Include="wwwroot\js\" />
+  </ItemGroup>
+
 </Project>

src/dotnet/Blazor3D/Blazor3D/Viewers/Viewer.razor.cs

@@ -118,7 +118,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         public async Task UpdateScene()
         {
             var json = JsonConvert.SerializeObject(Scene, SerializationHelper.GetSerializerSettings());
-            await bundleModule.InvokeVoidAsync("updateScene", json);
+            await bundleModule.InvokeVoidAsync("updateScene", json, ViewerSettings.ContainerId);
         }
 
         /// <summary>
@@ -129,7 +129,7 @@ public async Task UpdateScene()
         /// <returns>Task</returns>
         public async Task SetCameraPositionAsync(Vector3 position, Vector3 lookAt = null!)
         {
-            await bundleModule.InvokeVoidAsync("setCameraPosition", position, lookAt);
+            await bundleModule.InvokeVoidAsync("setCameraPosition", position, lookAt, ViewerSettings.ContainerId);
         }
 
 
@@ -142,7 +142,7 @@ public async Task UpdateCamera(Camera camera)
         {
             Camera = camera;
             var json = JsonConvert.SerializeObject(Camera, SerializationHelper.GetSerializerSettings());
-            await bundleModule.InvokeVoidAsync("updateCamera", json);
+            await bundleModule.InvokeVoidAsync("updateCamera", json, ViewerSettings.ContainerId);
         }
 
         /// <summary>
@@ -151,7 +151,7 @@ public async Task UpdateCamera(Camera camera)
         /// <returns>Task</returns>
         public async Task ShowCurrentCameraInfo()
         {
-            await bundleModule.InvokeVoidAsync("showCurrentCameraInfo");
+            await bundleModule.InvokeVoidAsync("showCurrentCameraInfo", ViewerSettings.ContainerId);
         }
 
         /// <summary>
@@ -163,7 +163,7 @@ public async Task UpdateOrbitControls(OrbitControls orbitControls)
         {
             OrbitControls = orbitControls;
             var json = JsonConvert.SerializeObject(OrbitControls, SerializationHelper.GetSerializerSettings());
-            await bundleModule.InvokeVoidAsync("updateOrbitControls", json);
+            await bundleModule.InvokeVoidAsync("updateOrbitControls", json, ViewerSettings.ContainerId);
         }
 
         [JSInvokable]
@@ -198,7 +198,7 @@ public static Task ReceiveLoadedObjectUUID(string containerId, string uuid)
         /// <returns>Task</returns>
         public async Task RemoveByUuidAsync(Guid uuid)
         {
-            var result = await bundleModule.InvokeAsync<bool>("removeByUuid", uuid);
+            var result = await bundleModule.InvokeAsync<bool>("removeByUuid", uuid, ViewerSettings.ContainerId);
             if (result)
             {
                 ChildrenHelper.RemoveObjectByUuid(uuid, Scene.Children);
@@ -212,7 +212,7 @@ public async Task RemoveByUuidAsync(Guid uuid)
         /// <returns>Task</returns>
         public async Task SelectByUuidAsync(Guid uuid)
         {
-            await bundleModule.InvokeVoidAsync("selectByUuid", uuid);
+            await bundleModule.InvokeVoidAsync("selectByUuid", uuid, ViewerSettings.ContainerId);
         }
 
         /// <summary>
@@ -221,7 +221,7 @@ public async Task SelectByUuidAsync(Guid uuid)
         /// <returns>Task</returns>
         public async Task ClearSceneAsync()
         {
-            await bundleModule.InvokeVoidAsync("clearScene");
+            await bundleModule.InvokeVoidAsync("clearScene", ViewerSettings.ContainerId);
             Scene.Children.Clear();
         }
 
@@ -235,7 +235,7 @@ public async Task<Guid> Import3DModelAsync(ImportSettings settings)
             settings.Uuid = settings.Uuid ?? Guid.NewGuid();
             settings.Material = settings.Material ?? new MeshStandardMaterial();
             var json = JsonConvert.SerializeObject(settings, SerializationHelper.GetSerializerSettings());
-            await bundleModule.InvokeVoidAsync("import3DModel", json);
+            await bundleModule.InvokeVoidAsync("import3DModel", json, ViewerSettings.ContainerId);
             return settings.Uuid.Value;
         }
 
@@ -249,7 +249,7 @@ public async Task<Guid> ImportSpriteAsync(SpriteImportSettings settings)
             settings.Uuid = settings.Uuid ?? Guid.NewGuid();
             settings.Material = settings.Material ?? new SpriteMaterial();
             var json = JsonConvert.SerializeObject(settings, SerializationHelper.GetSerializerSettings());
-            await bundleModule.InvokeVoidAsync("importSprite", json);
+            await bundleModule.InvokeVoidAsync("importSprite", json, ViewerSettings.ContainerId);
             return settings.Uuid.Value;
         }
 
@@ -363,7 +363,7 @@ private List<Object3D> ParseChildren(JToken? children)
 
         private async Task OnObjectLoadedPrivate(Object3DArgs e)
         {
-            var json = await bundleModule.InvokeAsync<string>("getSceneItemByGuid", e.UUID);
+            var json = await bundleModule.InvokeAsync<string>("getSceneItemByGuid", e.UUID, ViewerSettings.ContainerId);
             if (json.Contains("\"type\":\"Group\""))
             {
                 var jobject = JObject.Parse(json);

src/javascript/index.js

@@ -1,10 +1,14 @@
 import Viewer3D from "./Viewer/Viewer3D";
 
-let viewer3d;
+
+let viewers = new Map();
 
 const resizeObserver = new ResizeObserver((entries) => {
-  viewer3d.onResize();
-});
+  viewers.forEach(function(v, k) {
+    v.onResize();
+    })
+  }
+);
 
 export function loadViewer(json) {
   const options = JSON.parse(json);
@@ -14,55 +18,118 @@ export function loadViewer(json) {
     return;
   }
   resizeObserver.observe(container);
-  viewer3d = new Viewer3D(options, container);
+  if (viewers.has(options.viewerSettings.containerId)) {
+    console.error(`Duplicate Viewer constructor call! Container ${options.viewerSettings.containerId} already exists with a viewer`);
+    return;
+  }
+  if (!options.viewerSettings.containerId) {
+    console.error('No ContainerId supplied! Cannot create Viewer3D');
+    return;
+  }
+  viewers.set(options.viewerSettings.containerId, new Viewer3D(options, container));
 }
 
-export function updateScene(json) {
-  const sceneOptions = JSON.parse(json);
-  viewer3d.updateScene(sceneOptions);
+export function updateScene(json, containerId) {
+  const options = JSON.parse(json);
+  let viewer = viewers.get(containerId);
+  if (!viewer) {
+    console.warn("Viewer not found! Searching for a viewer attached to ContainerId " + containerId);
+    return;
+    }
+  viewer.updateScene(options);
 }
 
-export function removeByUuid(guid) {
-  return viewer3d.removeByUuid(guid);
+export function removeByUuid(guid, containerId) {
+  let viewer = viewers.get(containerId);
+  if (!viewer) {
+    console.warn("Viewer not found! Searching for a viewer attached to ContainerId " + containerId);
+    return;
+    }
+  return viewer.removeByUuid(guid);
 }
 
-export function selectByUuid(guid) {
-  return viewer3d.selectByUuid(guid);
+export function selectByUuid(guid, containerId) {
+  let viewer = viewers.get(containerId);
+  if (!viewer) {
+    console.warn("Viewer not found! Searching for a viewer attached to ContainerId " + containerId);
+    return;
+    }
+  return viewer.selectByUuid(guid);
 }
 
-export function clearScene() {
-  viewer3d.clearScene();
+export function clearScene(containerId) {
+  let viewer = viewers.get(containerId);
+  if (!viewer) {
+    console.warn("Viewer not found! Searching for a viewer attached to ContainerId " + containerId);
+    return;
+    }
+    viewer.clearScene();
 }
 
-export function import3DModel(json) {
+export function import3DModel(json, containerId) {
   const settings = JSON.parse(json);
-  return JSON.stringify(viewer3d.import3DModel(settings));
+  let viewer = viewers.get(containerId);
+  if (!viewer) {
+    console.warn("Viewer not found! Searching for a viewer attached to ContainerId " + containerId);
+    return;
+    }
+  return JSON.stringify(viewer.import3DModel(settings));
 }
 
-export function importSprite(json) {
+export function importSprite(json, containerId) {
   const settings = JSON.parse(json);
-  return JSON.stringify(viewer3d.importSprite(settings));
+  let viewer = viewers.get(containerId);
+  if (!viewer) {
+    console.warn("Viewer not found! Searching for a viewer attached to ContainerId " + containerId);
+    return;
+    }
+  return JSON.stringify(viewer.importSprite(settings));
 }
 
-export function setCameraPosition(position, lookAt) {
-  viewer3d.setCameraPosition(position, lookAt);
+export function setCameraPosition(position, lookAt, containerId) {
+  let viewer = viewers.get(containerId);
+  if (!viewer) {
+    console.warn("Viewer not found! Searching for a viewer attached to ContainerId " + containerId);
+    return;
+    }
+    viewer.setCameraPosition(position, lookAt);
 }
 
-export function updateCamera(json) {
+export function updateCamera(json, containerId) {
   const options = JSON.parse(json);
-  viewer3d.updateCamera(options);
+  let viewer = viewers.get(containerId);
+  if (!viewer) {
+    console.warn("Viewer not found! Searching for a viewer attached to ContainerId " + containerId);
+    return;
+    }
+    viewer.updateCamera(options);
 }
 
-export function showCurrentCameraInfo() {
-  viewer3d.showCurrentCameraInfo();
+export function showCurrentCameraInfo(containerId) {
+  let viewer = viewers.get(containerId);
+  if (!viewer) {
+    console.warn("Viewer not found! Searching for a viewer attached to ContainerId " + containerId);
+    return;
+    }
+    viewer.showCurrentCameraInfo();
 }
 
-export function updateOrbitControls(json){
+export function updateOrbitControls(json, containerId){
   const options = JSON.parse(json);
-  viewer3d.updateOrbitControls(options);
+  let viewer = viewers.get(containerId);
+  if (!viewer) {
+    console.warn("Viewer not found! Searching for a viewer attached to ContainerId " + containerId);
+    return;
+    }
+    viewer.updateOrbitControls(options);
 }
 
-export function getSceneItemByGuid(guid) {
-  const item = viewer3d.getSceneItemByGuid(guid);
+export function getSceneItemByGuid(guid, containerId) {
+  let viewer = viewers.get(containerId);
+  if (!viewer) {
+    console.warn("Viewer not found! Searching for a viewer attached to ContainerId " + containerId);
+    return;
+    }
+  const item = viewer.getSceneItemByGuid(guid);
   return JSON.stringify(item);
 }

src/javascript/package.json

@@ -16,7 +16,7 @@
     "three": "^0.143.0"
   },
   "devDependencies": {
-    "webpack": "^5.82.0",
+    "webpack": "^5.89.0",
     "webpack-cli": "^5.0.2"
   }
 }

src/javascript/webpack.config.js

@@ -24,6 +24,6 @@ module.exports = (env, argv) => {
           ],
           experiments: {
             outputModule: true,
-          },
+          }
     };
 };