Update viewer.js

viewer.js

@@ -10,17 +10,19 @@ let bouchonEntity = null;
 let viewerInitialized = false;
 let resizeObserver = null;
 
+// These will hold references to the material(s) you want to update.
 let matTransparent = null;
 let matOpaque = null;
 let tubeTransparent = null;
 let tubeOpaque = null;
 
+
 let chosenCameraX, chosenCameraY, chosenCameraZ;
 let minZoom, maxZoom, minAngle, maxAngle, minAzimuth, maxAzimuth, minPivotY, minY;
 let modelX, modelY, modelZ, modelScale, modelRotationX, modelRotationY, modelRotationZ;
 let glbUrl, glbUrl2, glbUrl3, aoUrl, opacityUrl, thicknessUrl;
 
-// Helper for recursive traversal
+// RECURSIVE ENTITY TRAVERSAL (needed for material assignment)
 function traverse(entity, callback) {
   callback(entity);
   if (entity.children) {
@@ -34,9 +36,6 @@ export async function initializeViewer(config, instanceId) {
   const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
   const isMobile = isIOS || /Android/i.test(navigator.userAgent);
 
-  alert("Step 1: isIOS = " + isIOS + ", isMobile = " + isMobile);
-
-  // Parse config (hardcode for demo if needed)
   glbUrl = config.glb_url;
   glbUrl2 = config.glb_url_2;
   glbUrl3 = config.glb_url_3;
@@ -62,20 +61,20 @@ export async function initializeViewer(config, instanceId) {
 
   const cameraX = 0;
   const cameraY = 0;
-  const cameraZ = 3;
+  const cameraZ = 1;
   const cameraXPhone = 0;
   const cameraYPhone = 0;
-  const cameraZPhone = 3;
+  const cameraZPhone = 1;
 
   chosenCameraX = isMobile ? cameraXPhone : cameraX;
   chosenCameraY = isMobile ? cameraYPhone : cameraY;
   chosenCameraZ = isMobile ? cameraZPhone : cameraZ;
 
-  alert("Step 2: Config parsed.");
+  
 
-  // Canvas creation
   const canvasId = 'canvas-' + instanceId;
   const progressDialog = document.getElementById('progress-dialog-' + instanceId);
+  const progressIndicator = document.getElementById('progress-indicator-' + instanceId);
   const viewerContainer = document.getElementById('viewer-container-' + instanceId);
 
   let oldCanvas = document.getElementById(canvasId);
@@ -87,14 +86,13 @@ export async function initializeViewer(config, instanceId) {
   canvas.style.width = "100%";
   canvas.style.height = "100%";
   canvas.setAttribute('tabindex', '0');
+  // Safer insert:
   if (progressDialog) {
     viewerContainer.insertBefore(canvas, progressDialog);
   } else {
     viewerContainer.appendChild(canvas);
   }
-  alert("Step 3: Canvas created and inserted.");
 
-  // Listeners & touch-action
   canvas.style.touchAction = "none";
   canvas.style.webkitTouchCallout = "none";
   canvas.addEventListener('gesturestart', e => e.preventDefault());
@@ -102,8 +100,10 @@ export async function initializeViewer(config, instanceId) {
   canvas.addEventListener('gestureend', e => e.preventDefault());
   canvas.addEventListener('dblclick', e => e.preventDefault());
   canvas.addEventListener('touchstart', e => { if (e.touches.length > 1) e.preventDefault(); }, { passive: false });
-  canvas.addEventListener('wheel', (e) => { e.preventDefault(); }, { passive: false });
-  alert("Step 4: Canvas listeners added.");
+
+  canvas.addEventListener('wheel', (e) => {
+    e.preventDefault();
+  }, { passive: false });
 
   if (progressDialog) progressDialog.style.display = 'block';
 
@@ -111,67 +111,60 @@ export async function initializeViewer(config, instanceId) {
     pc = await import("https://esm.run/playcanvas");
     window.pc = pc;
   }
-  alert("Step 5: PlayCanvas imported.");
-
-  // --- iOS: Prefer WebGL1 ---
-  let deviceTypes = ["webgl2", "webgl1"];
-  if (isIOS) deviceTypes = ["webgl1", "webgl2"]; // Prefer WebGL1 first
-  // Use AppBase + .init() for compatibility
-  const gfxOptions = {
-    deviceTypes: deviceTypes,
+
+  // Create app first
+  const device = await pc.createGraphicsDevice(canvas, {
+    deviceTypes: ["webgl2"],
     glslangUrl: "https://playcanvas.vercel.app/static/lib/glslang/glslang.js",
-    twgslUrl: "https://playcanvas.vercel.app/static/lib/twgsl/twgsl.js"
-  };
-  const device = await pc.createGraphicsDevice(canvas, gfxOptions);
+    twgslUrl: "https://playcanvas.vercel.app/static/lib/twgsl/twgsl.js",
+    antialias: false
+  });
   device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
-  alert("Step 6: Graphics device created.");
 
-  // AppOptions with minimal systems (NO GSplat on iOS)
-  const appOptions = new pc.AppOptions();
-  appOptions.graphicsDevice = device;
-  appOptions.mouse = new pc.Mouse(document.body); // Use body like example
-  appOptions.touch = new pc.TouchDevice(document.body);
-  appOptions.keyboard = new pc.Keyboard(document.body);
-
-  appOptions.componentSystems = [
+  const opts = new pc.AppOptions();
+  opts.graphicsDevice = device;
+  opts.mouse = new pc.Mouse(canvas);
+  opts.touch = new pc.TouchDevice(canvas);
+  opts.componentSystems = [
     pc.RenderComponentSystem,
     pc.CameraComponentSystem,
     pc.LightComponentSystem,
-    pc.ScriptComponentSystem
-    // (GSplat, Collision, RigidBody omitted for iOS safety)
+    pc.ScriptComponentSystem,
+    pc.GSplatComponentSystem,
+    pc.CollisionComponentSystem,
+    pc.RigidbodyComponentSystem
   ];
-  appOptions.resourceHandlers = [
+  opts.resourceHandlers = [
     pc.TextureHandler,
     pc.ContainerHandler,
-    pc.ScriptHandler
-    // (GSplatHandler omitted for iOS safety)
+    pc.ScriptHandler,
+    pc.GSplatHandler
   ];
 
-  app = new pc.AppBase(canvas);
-  app.init(appOptions);
-
-  // Fill window, auto-res
-  app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
+  app = new pc.Application(canvas, opts);
+  app.setCanvasFillMode(pc.FILLMODE_NONE);
   app.setCanvasResolution(pc.RESOLUTION_AUTO);
 
-  // Resize listener
-  const resize = () => app.resizeCanvas();
-  window.addEventListener('resize', resize);
-  app.on('destroy', () => {
-    window.removeEventListener('resize', resize);
+  resizeObserver = new ResizeObserver(entries => {
+    entries.forEach(entry => {
+      app.resizeCanvas(entry.contentRect.width, entry.contentRect.height);
+    });
   });
-  alert("Step 7: PlayCanvas app initialized.");
+  resizeObserver.observe(viewerContainer);
+
+  window.addEventListener('resize', () => app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight));
+  app.on('destroy', () => resizeObserver.disconnect());
 
-  // Assets
+  // --- Assets ---
   const assets = {
     orbit: new pc.Asset('script', 'script', { url: "https://mikafil-viewer-gs.static.hf.space/orbit-camera.js" }),
-    model: new pc.Asset('model', 'container', { url: glbUrl }),
-    tube: new pc.Asset('tube', 'container', { url: glbUrl2 }),
-    bouchon: new pc.Asset('bouchon', 'container', { url: glbUrl3 }),
-    ao_map: new pc.Asset('ao_map', 'texture', { url: aoUrl }),
-    op_map: new pc.Asset('op_map', 'texture', { url: opacityUrl }),
-    bg_tex: new pc.Asset('bg_tex', 'texture', { url: "https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/EARCARE/banniere_earcare.png" }),
-    thickness_map: new pc.Asset('thickness_map', 'texture', { url: thicknessUrl }),
+    model: new pc.Asset('glb', 'container', { url: glbUrl }),
+    tube: new pc.Asset('glb', 'container', { url: glbUrl2 }),
+    bouchon: new pc.Asset('glb', 'container', { url: glbUrl3 }),
+    ao_map: new pc.Asset('color', 'texture', { url: aoUrl }),
+    op_map: new pc.Asset('color', 'texture', { url: opacityUrl }),
+    bg_tex: new pc.Asset('color', 'texture', {url: "https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/EARCARE/banniere_earcare.png"}),
+    thickness_map: new pc.Asset('color', 'texture', { url: thicknessUrl }),
     helipad: new pc.Asset(
       'helipad-env-atlas',
       'texture',
@@ -181,18 +174,17 @@ export async function initializeViewer(config, instanceId) {
   };
 
   for (const key in assets) app.assets.add(assets[key]);
-  alert("Step 9: Assets registered.");
 
-  // Load env HDR first
+  // Load HDR *before* loading any models
   assets.helipad.ready(() => {
     app.scene.envAtlas = assets.helipad.resource;
     app.scene.skyboxRotation = new pc.Quat().setFromEulerAngles(30, 20, 0);
     app.scene.skyboxIntensity = 4;
     app.scene.skyboxMip = 0;
-    alert("Step 10: Environment HDR loaded.");
 
-    // Asset loader
-    const assetList = [
+
+    // Now load all GLBs and other assets
+    const loader = new pc.AssetListLoader([
       assets.orbit,
       assets.model,
       assets.tube,
@@ -201,112 +193,119 @@ export async function initializeViewer(config, instanceId) {
       assets.op_map,
       assets.bg_tex,
       assets.thickness_map
-    ];
-    const loader = new pc.AssetListLoader(assetList, app.assets);
+    ], app.assets);
+
     loader.load(() => {
-      alert("Step 11: All assets loaded, app started.");
       app.start();
+      if (progressDialog) progressDialog.style.display = 'none';
 
-      // Depth layer reorder (as in example)
+      // Reorder depth layer for transmission
       const depthLayer = app.scene.layers.getLayerById(pc.LAYERID_DEPTH);
       app.scene.layers.remove(depthLayer);
       app.scene.layers.insertOpaque(depthLayer, 2);
-      alert("Step 12: Depth layer reordered.");
 
-      // Instantiate models
+      // 1. Models
       modelEntity = assets.model.resource.instantiateRenderEntity();
       tubeEntity = assets.tube.resource.instantiateRenderEntity();
       bouchonEntity = assets.bouchon.resource.instantiateRenderEntity();
 
       app.root.addChild(modelEntity);
       app.root.addChild(tubeEntity);
-      // app.root.addChild(bouchonEntity);
-      alert("Step 13: Entities instantiated and added.");
-
-      // --- iOS: SKIP all custom material assignment ---
-      if (!isIOS) {
-        try {
-          // The 2 materials for the main model:
-          const ao = assets.ao_map.resource;
-          const op = assets.op_map.resource;
-          const thickness = assets.thickness_map.resource;
-
-          matTransparent = new pc.StandardMaterial();
-          matTransparent.blendType = pc.BLEND_NORMAL;
-          matTransparent.diffuse = new pc.Color(0.7, 0.05, 0.05);
-          matTransparent.specular = new pc.Color(0.01, 0.01, 0.01);
-          matTransparent.shininess = 90;
-          matTransparent.gloss = 1;
-          matTransparent.metalness = 0.0;
-          matTransparent.useMetalness = true;
-          matTransparent.useDynamicRefraction = true;
-          matTransparent.depthWrite = true;
-          matTransparent.refraction= 0.8;
-          matTransparent.refractionIndex = 1;
-          matTransparent.thickness = 0.02;
-          matTransparent.thicknessMap = thickness;
-          matTransparent.opacityMap = op;
-          matTransparent.opacityMapChannel = "r";
-          matTransparent.opacity = 0.97;
-          matTransparent.emissive = new pc.Color(0.372, 0.03, 0.003);
-          matTransparent.emissiveMap = ao;
-          matTransparent.emissiveIntensity = 0.1;
-          matTransparent.update();
-
-          matOpaque = new pc.StandardMaterial();
-          matOpaque.blendType = pc.BLEND_NORMAL;
-          matOpaque.diffuse = new pc.Color(0.7, 0.05, 0.05);
-          matOpaque.specular = new pc.Color(0.01, 0.01, 0.01);
-          matOpaque.shininess = 90;
-          matOpaque.gloss = 1;
-          matOpaque.metalness = 0.0;
-          matOpaque.opacityMap = op;
-          matOpaque.opacityMapChannel = "r";
-          matOpaque.opacity = 1;
-          matOpaque.emissive = new pc.Color(0.372, 0.03, 0.003);
-          matOpaque.emissiveMap = ao;
-          matOpaque.emissiveIntensity = 2;
-          matOpaque.update();
-
-          tubeTransparent = new pc.StandardMaterial();
-          tubeTransparent.diffuse = new pc.Color(1, 1, 1);
-          tubeTransparent.blendType = pc.BLEND_NORMAL;
-          tubeTransparent.opacity = 0.1;                         
-          tubeTransparent.depthTest = false;
-          tubeTransparent.depthWrite = false;
-          tubeTransparent.useMetalness = true;
-          tubeTransparent.useDynamicRefraction = true;
-          tubeTransparent.thickness = 4;
-          tubeTransparent.update();
-
-          tubeOpaque = new pc.StandardMaterial();
-          tubeOpaque.diffuse = new pc.Color(1, 1, 1);
-          tubeOpaque.opacity = 0.9;                         
-          tubeOpaque.update();
-
-          traverse(modelEntity, node => {
-            if (node.render && node.render.meshInstances) {
-              for (let mi of node.render.meshInstances) {
-                mi.material = matOpaque;
-              }
-            }
-          });
-          traverse(tubeEntity, node => {
-            if (node.render && node.render.meshInstances) {
-              for (let mi of node.render.meshInstances) {
-                mi.material = tubeOpaque;
-              }
-            }
-          });
-          alert("Step 14: Materials created and assigned.");
-        } catch (err) {
-          alert("Material assignment failed: " + err);
+      //app.root.addChild(bouchonEntity);
+
+      // 2. Materials for main model & tube
+
+
+      //the 2 materials for the main model : 
+      const ao = assets.ao_map.resource;
+      const op = assets.op_map.resource;
+      const thickness = assets.thickness_map.resource;
+      
+            //mat transparent
+      matTransparent = new pc.StandardMaterial();
+      matTransparent.blendType = pc.BLEND_NORMAL;
+      matTransparent.diffuse = new pc.Color(0.7, 0.05, 0.05);
+      matTransparent.specular = new pc.Color(0.01, 0.01, 0.01);
+      matTransparent.shininess = 90;
+      matTransparent.gloss = 1;
+      matTransparent.metalness = 0.0;
+      matTransparent.useMetalness = true;
+      matTransparent.useDynamicRefraction = true;
+      matTransparent.depthWrite = true;
+      matTransparent.refraction= 0.8;
+      matTransparent.refractionIndex = 1;
+      matTransparent.thickness = 0.02;
+      matTransparent.thicknessMap = thickness;
+      matTransparent.opacityMap = op;
+      matTransparent.opacityMapChannel = "r";
+      matTransparent.opacity = 0.97;
+      matTransparent.emissive = new pc.Color(0.372, 0.03, 0.003);
+      matTransparent.emissiveMap = ao;
+      matTransparent.emissiveIntensity = 0.1;
+      matTransparent.update();
+
+
+            //mat opaque
+      matOpaque = new pc.StandardMaterial();
+      matOpaque.blendType = pc.BLEND_NORMAL;
+      matOpaque.diffuse = new pc.Color(0.7, 0.05, 0.05);
+      matOpaque.specular = new pc.Color(0.01, 0.01, 0.01);
+      matOpaque.shininess = 90;
+      matOpaque.gloss = 1;
+      matOpaque.metalness = 0.0;
+      matOpaque.opacityMap = op;
+      matOpaque.opacityMapChannel = "r";
+      matOpaque.opacity = 1;
+      matOpaque.emissive = new pc.Color(0.372, 0.03, 0.003);
+      matOpaque.emissiveMap = ao;
+      matOpaque.emissiveIntensity = 2;
+      matOpaque.update();
+
+
+
+
+      //material for the tube
+        //transparent
+      tubeTransparent = new pc.StandardMaterial();
+      tubeTransparent.diffuse = new pc.Color(1, 1, 1);
+      tubeTransparent.blendType = pc.BLEND_NORMAL;
+      tubeTransparent.opacity = 0.1;                         
+      tubeTransparent.depthTest = false;
+      tubeTransparent.depthWrite = false;
+      tubeTransparent.useMetalness = true;
+      tubeTransparent.useDynamicRefraction = true;
+      tubeTransparent.thickness = 4;
+      tubeTransparent.update();
+      
+
+        //opaque
+      tubeOpaque = new pc.StandardMaterial();
+      tubeOpaque.diffuse = new pc.Color(1, 1, 1);
+      tubeOpaque.opacity = 0.9;                         
+      tubeOpaque.update();
+      
+      traverse(modelEntity, node => {
+        if (node.render && node.render.meshInstances) {
+          for (let mi of node.render.meshInstances) {
+            mi.material = matOpaque;
+          }
         }
-      } else {
-        alert("Step 14: Custom materials skipped for iOS. Using GLB built-ins.");
-      }
+      });
+      
+      
+      traverse(tubeEntity, node => {
+        if (node.render && node.render.meshInstances) {
+          for (let mi of node.render.meshInstances) {
+            mi.material = tubeOpaque;
+          }
+        }
+      });
+
+
+      
+      // Do NOT override materials for bouchonEntity!
 
-      // Transforms
+      // 3. Position/scale/orientation
       modelEntity.setPosition(modelX, modelY, modelZ);
       modelEntity.setLocalScale(modelScale, modelScale, modelScale);
       modelEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
@@ -318,25 +317,20 @@ export async function initializeViewer(config, instanceId) {
       bouchonEntity.setPosition(modelX, modelY, modelZ);
       bouchonEntity.setLocalScale(modelScale, modelScale, modelScale);
       bouchonEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
-      alert("Step 15: Transforms set.");
 
       // 4. Camera & orbit
+      
       cameraEntity = new pc.Entity('camera');
       cameraEntity.addComponent('camera', {
-        clearColor: new pc.Color(0, 1, 1, 1), // Turquoise for debug
+        clearColor: new pc.Color(1, 1, 1, 1),
         toneMapping: pc.TONEMAP_NEUTRAL
       });
       cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
       cameraEntity.lookAt(modelEntity.getPosition());
       cameraEntity.addComponent('script');
-      // Only do requestSceneColorMap if NOT on iOS
-      if (!isIOS) {
-        try {
-          cameraEntity.camera.requestSceneColorMap(true);
-        } catch (err) {
-          alert("requestSceneColorMap failed: " + err);
-        }
-      }
+
+      // --- **CRITICAL** for KHR_materials_transmission! ---
+      cameraEntity.camera.requestSceneColorMap(true);
 
       cameraEntity.script.create('orbitCamera', {
         attributes: {
@@ -355,27 +349,29 @@ export async function initializeViewer(config, instanceId) {
       cameraEntity.script.create('orbitCameraInputMouse');
       cameraEntity.script.create('orbitCameraInputTouch');
       app.root.addChild(cameraEntity);
-      alert("Step 16: Camera & orbit script added.");
 
-      // 5. Light
-      const light = new pc.Entity("mainLight");
-      light.addComponent('light', {
-        type: "directional",
-        color: new pc.Color(1, 1, 1),
-        intensity: 0.9,
-      });
-      light.setPosition(0, 1, -1);
-      light.lookAt(0, 0, 0);
-      app.root.addChild(light);
-      alert("Step 17: Light added.");
+      // Remove the Skybox layer from the camera
+      const skyboxLayer = app.scene.layers.getLayerByName("Skybox");
+      const camLayers = cameraEntity.camera.layers.slice();
+      const idx = camLayers.indexOf(skyboxLayer.id);
+      if (idx !== -1) {
+          camLayers.splice(idx, 1);
+          cameraEntity.camera.layers = camLayers;
+      }
+
+      // --- Add this block for a cube parented to the camera ---
+      // Create the cube
 
-      // Optional: Add debug/test cube (parent to camera for visibility)
       const bgTex = assets.bg_tex.resource;
       const bgPlane = new pc.Entity("Plane");
       bgPlane.addComponent("model", { type: "plane" });
-      bgPlane.setLocalPosition(0, 0, -10);
+      // Set the cube's local position relative to the camera
+      bgPlane.setLocalPosition(0, 0, -10); // 2 units in front of camera
+      // Optionally, scale or color the cube
       bgPlane.setLocalScale(11, 1, 5.5);
       bgPlane.setLocalEulerAngles(90, 0, 0);
+      
+      // Simple material for visibility
       const mat = new pc.StandardMaterial();
       mat.diffuse = new pc.Color(1, 1, 1);
       mat.diffuseMap = bgTex;
@@ -385,13 +381,24 @@ export async function initializeViewer(config, instanceId) {
       mat.useLighting = false;
       mat.update();
       bgPlane.model.material = mat;
+      
+      // Parent to the camera
       cameraEntity.addChild(bgPlane);
-      alert("Test cube added to scene!");
-
-      app.once('update', () => {
-        resetViewerCamera();
-        alert("Step 18: Camera reset after update.");
+      
+      // 5. Light
+      const light = new pc.Entity("mainLight");
+      light.addComponent('light',{
+        type: "directional",
+        color: new pc.Color(1, 1, 1),
+        intensity: 0.9,
       });
+      light.setPosition(0, 1, -1);
+      light.lookAt(0, 0, 0);
+      app.root.addChild(light);
+
+      app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
+
+      app.once('update', () => resetViewerCamera());
 
       // Tooltips supported if tooltips_url set
       try {
@@ -412,15 +419,14 @@ export async function initializeViewer(config, instanceId) {
       } catch (e) {
         // Tooltips optional, fail silently
       }
+
       viewerInitialized = true;
-      alert("Step 20: Viewer successfully initialized!");
     });
   });
 
   app.assets.load(assets.helipad); // Start by loading the HDR
-}
 
-// --- Camera reset and color change (unchanged from yours, left for completeness) ---
+}
 
 export function resetViewerCamera() {
   try {
@@ -443,7 +449,7 @@ export function resetViewerCamera() {
 
     orbitCam.pivotPoint = modelPos.clone();
     orbitCam._targetDistance = dist;
-    orbitCam._distance = dist;
+    orbitCam._distance       = dist;
 
     const rot = tempEnt.getRotation();
     const fwd = new pc.Vec3();
@@ -456,10 +462,10 @@ export function resetViewerCamera() {
     rotNoYaw.transformVector(pc.Vec3.FORWARD, fNoYaw);
     const pitch = Math.atan2(fNoYaw.y, -fNoYaw.z) * pc.math.RAD_TO_DEG;
 
-    orbitCam._targetYaw = yaw;
-    orbitCam._yaw = yaw;
+    orbitCam._targetYaw   = yaw;
+    orbitCam._yaw         = yaw;
     orbitCam._targetPitch = pitch;
-    orbitCam._pitch = pitch;
+    orbitCam._pitch       = pitch;
     if (orbitCam._updatePosition) orbitCam._updatePosition();
 
     tempEnt.destroy();
@@ -468,9 +474,14 @@ export function resetViewerCamera() {
   }
 }
 
-// Color function (no changes)
+/**
+ * Change the main model's diffuse color in real time.
+ * r,g,b are floats [0,1]. This is a reusable function for new colors.
+ */
 export function changeColor(dr, dg, db, er, eg, eb, ei, op, boolTrans) {
-  if (boolTrans) {
+  
+  //cameraEntity.camera.clearColor = new pc.Color(colorBgR, colorBgG, colorBgB);  
+  if(boolTrans){
     if (!matTransparent) return;
 
     matTransparent.diffuse.set(dr, dg, db);
@@ -483,21 +494,21 @@ export function changeColor(dr, dg, db, er, eg, eb, ei, op, boolTrans) {
     tubeTransparent.update();
 
     traverse(modelEntity, node => {
-      if (node.render && node.render.meshInstances) {
-        for (let mi of node.render.meshInstances) {
-          mi.material = matTransparent;
+        if (node.render && node.render.meshInstances) {
+            for (let mi of node.render.meshInstances) {
+                mi.material = matTransparent;
+            }
         }
-      }
     });
 
     traverse(tubeEntity, node => {
-      if (node.render && node.render.meshInstances) {
-        for (let mi of node.render.meshInstances) {
-          mi.material = tubeTransparent;
+        if (node.render && node.render.meshInstances) {
+            for (let mi of node.render.meshInstances) {
+                mi.material = tubeTransparent;
+            }
         }
-      }
     });
-  } else {
+  }else{
     if (!matOpaque) return;
 
     matOpaque.diffuse.set(dr, dg, db);
@@ -506,19 +517,19 @@ export function changeColor(dr, dg, db, er, eg, eb, ei, op, boolTrans) {
     matOpaque.update();
 
     traverse(modelEntity, node => {
-      if (node.render && node.render.meshInstances) {
-        for (let mi of node.render.meshInstances) {
-          mi.material = matOpaque;
+        if (node.render && node.render.meshInstances) {
+            for (let mi of node.render.meshInstances) {
+                mi.material = matOpaque;
+            }
         }
-      }
     });
 
     traverse(tubeEntity, node => {
-      if (node.render && node.render.meshInstances) {
-        for (let mi of node.render.meshInstances) {
-          mi.material = tubeOpaque;
+        if (node.render && node.render.meshInstances) {
+            for (let mi of node.render.meshInstances) {
+                mi.material = tubeOpaque;
+            }
         }
-      }
     });
   }
 }