fix 3D asset bugs

frontend/promo/promo.tsx

@@ -8,6 +8,7 @@ import {
   PrivateOverlay, PublicOverlay, ToolTip,
 } from "../three_d_garden/config_overlays";
 import { ASSETS } from "../three_d_garden/constants";
+import { getFocusFromUrlParams } from "../three_d_garden/zoom_beacons_constants";
 
 export const Promo = () => {
   const [config, setConfig] = React.useState<Config>(INITIAL);
@@ -22,6 +23,7 @@ export const Promo = () => {
 
   React.useEffect(() => {
     setConfig(modifyConfigsFromUrlParams(config));
+    setActiveFocus(getFocusFromUrlParams());
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // intentionally empty dependency array
 

frontend/three_d_garden/bed.tsx

@@ -80,15 +80,16 @@ export const Bed = (props: BedProps) => {
     ];
   const casterHeight = legSize * 1.375;
 
-  const woodTexture = useTexture(ASSETS.textures.wood);
-  woodTexture.wrapS = RepeatWrapping;
-  woodTexture.wrapT = RepeatWrapping;
-  woodTexture.repeat.set(0.0003, 0.003);
-  const legWoodTexture = useTexture(ASSETS.textures.wood);
+  const bedWoodTexture = useTexture(ASSETS.textures.wood + "?=bedWood");
+  bedWoodTexture.wrapS = RepeatWrapping;
+  bedWoodTexture.wrapT = RepeatWrapping;
+  bedWoodTexture.rotation = Math.PI / 2;
+  bedWoodTexture.repeat.set(0.003, 0.0003);
+  const legWoodTexture = useTexture(ASSETS.textures.wood + "?=legWood");
   legWoodTexture.wrapS = RepeatWrapping;
   legWoodTexture.wrapT = RepeatWrapping;
   legWoodTexture.repeat.set(0.02, 0.05);
-  const soilTexture = useTexture(ASSETS.textures.soil);
+  const soilTexture = useTexture(ASSETS.textures.soil + "?=soil");
   soilTexture.wrapS = RepeatWrapping;
   soilTexture.wrapT = RepeatWrapping;
   soilTexture.repeat.set(0.00034, 0.00068);
@@ -130,7 +131,7 @@ export const Bed = (props: BedProps) => {
   return <Group name={"bed-group"}>
     <Detailed distances={detailLevels(props.config)}>
       <Bed>
-        <MeshPhongMaterial map={woodTexture} color={bedColor} side={DoubleSide} />
+        <MeshPhongMaterial map={bedWoodTexture} color={bedColor} side={DoubleSide} />
       </Bed>
       <Bed>
         <MeshPhongMaterial color={"#ad7039"} side={DoubleSide} />

frontend/three_d_garden/bot.tsx

@@ -257,7 +257,7 @@ export const Bot = (props: FarmbotModelProps) => {
         });
     }
   });
-  const aluminumTexture = useTexture(ASSETS.textures.aluminum);
+  const aluminumTexture = useTexture(ASSETS.textures.aluminum + "?=bot");
   aluminumTexture.wrapS = RepeatWrapping;
   aluminumTexture.wrapT = RepeatWrapping;
   aluminumTexture.repeat.set(0.01, 0.0003);

frontend/three_d_garden/constants.ts

@@ -94,9 +94,9 @@ export const ASSETS = {
     cameraMountHalf: "/3D/models/camera_mount_half.glb",
     solenoid: "/3D/models/solenoid.glb",
     xAxisCCMount: "/3D/models/x_axis_cc_mount.glb",
-    box: "/3d/models/box.glb",
-    btn: "/3d/models/push_button.glb",
-    led: "/3d/models/led_indicator.glb",
+    box: "/3D/models/box.glb",
+    btn: "/3D/models/push_button.glb",
+    led: "/3D/models/led_indicator.glb",
   },
   other: {
     gear: "/app-resources/img/icons/settings.svg",

frontend/three_d_garden/desk.tsx

@@ -21,18 +21,18 @@ const deskWoodDarkness = "#666";
 export const Desk = (props: DeskProps) => {
   const { config } = props;
   const zGround = -config.bedZOffset - config.bedHeight;
-  const woodTexture = useTexture(ASSETS.textures.wood);
-  woodTexture.wrapS = RepeatWrapping;
-  woodTexture.wrapT = RepeatWrapping;
-  woodTexture.repeat.set(0.3, 0.3);
-  const screenTexture = useTexture(ASSETS.textures.screen);
+  const deskWoodTexture = useTexture(ASSETS.textures.wood + "?=desk");
+  deskWoodTexture.wrapS = RepeatWrapping;
+  deskWoodTexture.wrapT = RepeatWrapping;
+  deskWoodTexture.repeat.set(0.3, 0.3);
+  const screenTexture = useTexture(ASSETS.textures.screen + "?=screen");
   screenTexture.rotation = Math.PI / 2;
   screenTexture.wrapT = RepeatWrapping;
   return <Group name={"desk"}
     visible={props.activeFocus == ""}
     position={[
-      threeSpace(deskOffset, -config.bedLengthOuter),
-      0,
+      threeSpace(config.bedLengthOuter + deskOffset, config.bedLengthOuter),
+      threeSpace(config.bedWidthOuter / 2, config.bedWidthOuter),
       zGround,
     ]}>
     <Box
@@ -41,7 +41,7 @@ export const Desk = (props: DeskProps) => {
       receiveShadow={true}
       args={[deskDepth, deskWidth, 50]}
       position={[0, 0, deskHeight + 25]}>
-      <MeshPhongMaterial map={woodTexture} color={deskWoodDarkness} />
+      <MeshPhongMaterial map={deskWoodTexture} color={deskWoodDarkness} />
     </Box>
     <Group name={"desk-legs"}>
       {[
@@ -57,7 +57,7 @@ export const Desk = (props: DeskProps) => {
           receiveShadow={true}
           args={[deskLegWidth, deskLegWidth, deskHeight]}
           position={[xOffset, yOffset, deskHeight / 2]}>
-          <MeshPhongMaterial map={woodTexture} color={deskWoodDarkness} />
+          <MeshPhongMaterial map={deskWoodTexture} color={deskWoodDarkness} />
         </Box>)}
     </Group>
     <Group name={"laptop"}

frontend/three_d_garden/garden.tsx

@@ -145,14 +145,14 @@ export const GardenModel = (props: GardenModelProps) => {
     },
   });
 
-  const grassTexture = useTexture(ASSETS.textures.grass);
+  const grassTexture = useTexture(ASSETS.textures.grass + "?=grass");
   grassTexture.wrapS = RepeatWrapping;
   grassTexture.wrapT = RepeatWrapping;
   grassTexture.repeat.set(24, 24);
-  const concreteTexture = useTexture(ASSETS.textures.concrete);
-  concreteTexture.wrapS = RepeatWrapping;
-  concreteTexture.wrapT = RepeatWrapping;
-  concreteTexture.repeat.set(16, 24);
+  const labFloorTexture = useTexture(ASSETS.textures.concrete + "?=labFloor");
+  labFloorTexture.wrapS = RepeatWrapping;
+  labFloorTexture.wrapT = RepeatWrapping;
+  labFloorTexture.repeat.set(16, 24);
 
   const Ground = ({ children }: { children: React.ReactElement }) =>
     <Circle name={"ground"}
@@ -208,7 +208,7 @@ export const GardenModel = (props: GardenModelProps) => {
     <Detailed distances={detailLevels(config)}>
       <Ground>
         <MeshPhongMaterial
-          map={config.lab ? concreteTexture : grassTexture}
+          map={config.lab ? labFloorTexture : grassTexture}
           color={"#ddd"}
           shininess={0} />
       </Ground>

frontend/three_d_garden/lab.tsx

@@ -37,17 +37,17 @@ export const Lab = (props: LabProps) => {
   const { config } = props;
   const groundZ = -config.bedZOffset - config.bedHeight;
 
-  const woodTexture = useTexture(ASSETS.textures.wood);
-  woodTexture.wrapS = RepeatWrapping;
-  woodTexture.wrapT = RepeatWrapping;
-  woodTexture.repeat.set(0.3, 0.3);
+  const shelfWoodTexture = useTexture(ASSETS.textures.wood + "?=shelf");
+  shelfWoodTexture.wrapS = RepeatWrapping;
+  shelfWoodTexture.wrapT = RepeatWrapping;
+  shelfWoodTexture.repeat.set(0.3, 0.3);
 
   return <Group name={"lab-environment"} visible={config.lab}>
     <Group
       name={"lab-walls"}
       position={[
         threeSpace(-wallOffset, config.bedLengthOuter),
-        threeSpace(wallOffset, -config.bedWidthOuter),
+        threeSpace(config.bedWidthOuter + wallOffset, config.bedWidthOuter),
         groundZ,
       ]}>
       <Extrude
@@ -73,7 +73,7 @@ export const Lab = (props: LabProps) => {
             shelfHeight,
           ]}>
           <MeshPhongMaterial
-            map={woodTexture}
+            map={shelfWoodTexture}
             color={"#999"}
             side={DoubleSide} />
         </Box>
@@ -98,8 +98,8 @@ export const Lab = (props: LabProps) => {
       </Billboard>
       <Billboard
         position={[
-          0,
-          threeSpace(500, -config.bedWidthOuter),
+          threeSpace(0, config.bedLengthOuter),
+          threeSpace(config.bedWidthOuter + 500, config.bedWidthOuter),
           groundZ,
         ]}>
         <Image

frontend/three_d_garden/power_supply.tsx

@@ -30,10 +30,10 @@ export const PowerSupply = (props: PowerSupplyProps) => {
   } = props.config;
   const zGround = -bedHeight - bedZOffset;
 
-  const aluminumTexture = useTexture(ASSETS.textures.aluminum);
-  aluminumTexture.wrapS = RepeatWrapping;
-  aluminumTexture.wrapT = RepeatWrapping;
-  aluminumTexture.repeat.set(0.01, 0.003);
+  const powerSupplyTexture = useTexture(ASSETS.textures.aluminum + "?=powerSupply");
+  powerSupplyTexture.wrapS = RepeatWrapping;
+  powerSupplyTexture.wrapT = RepeatWrapping;
+  powerSupplyTexture.repeat.set(0.01, 0.003);
 
   const combinedCablePath = new THREE.CurvePath<THREE.Vector3>();
 
@@ -145,7 +145,7 @@ export const PowerSupply = (props: PowerSupplyProps) => {
         threeSpace(-21, bedWidthOuter),
         -90 - ccSupportSize,
       ]}>
-      <MeshPhongMaterial map={aluminumTexture} color={"white"} />
+      <MeshPhongMaterial map={powerSupplyTexture} color={"white"} />
     </Box>
     <Tube name={"powerCable"}
       castShadow={true}

frontend/three_d_garden/solar.tsx

@@ -66,7 +66,7 @@ export const Solar = (props: SolarProps) => {
     visible={config.solar || props.activeFocus == "What you need to provide"}>
     <Group name={"solar-array"}
       position={[
-        threeSpace(2000, -config.bedLengthOuter),
+        threeSpace(config.bedLengthOuter + 2000, config.bedLengthOuter),
         threeSpace(750, config.bedWidthOuter),
         zGround + 150,
       ]}
@@ -92,7 +92,7 @@ export const Solar = (props: SolarProps) => {
           zGround + 20,
         ],
         [
-          threeSpace(2500, -config.bedLengthOuter),
+          threeSpace(config.bedLengthOuter + 2500, config.bedLengthOuter),
           threeSpace(750, config.bedWidthOuter),
           zGround + 20,
         ]]}

frontend/three_d_garden/utilities_post.tsx

@@ -41,22 +41,22 @@ export const UtilitiesPost = (props: UtilitiesPostProps) => {
     new THREE.Vector3(barbX, barbY, barbZ),
   );
 
-  const woodTexture = useTexture(ASSETS.textures.wood);
-  woodTexture.wrapS = RepeatWrapping;
-  woodTexture.wrapT = RepeatWrapping;
-  woodTexture.repeat.set(0.02, 0.05);
+  const postWoodTexture = useTexture(ASSETS.textures.wood + "?=post");
+  postWoodTexture.wrapS = RepeatWrapping;
+  postWoodTexture.wrapT = RepeatWrapping;
+  postWoodTexture.repeat.set(0.02, 0.05);
 
   return <Group name={"utilities"}
     visible={utilitiesPost && props.activeFocus != "Planter bed"}
     position={[
-      threeSpace(600, -bedLengthOuter),
+      threeSpace(bedLengthOuter + 600, bedLengthOuter),
       threeSpace(legSize / 2, bedWidthOuter),
       groundZ + 150,
     ]}>
     <Box name={"utilities-post"}
       castShadow={true}
       args={[legSize, legSize, 300]}>
-      <MeshPhongMaterial map={woodTexture} color={postColor} />
+      <MeshPhongMaterial map={postWoodTexture} color={postColor} />
     </Box>
     <Cylinder name={"pipe"}
       castShadow={true}

frontend/three_d_garden/x_axis_water_tube.tsx

@@ -11,11 +11,15 @@ export interface XAxisWaterTubeProps {
 export const XAxisWaterTube = (props: XAxisWaterTubeProps) => {
   const { config } = props;
   const groundZ = -config.bedHeight - config.bedZOffset;
-  const barbX = 400;
+  const barbX = threeSpace(config.bedLengthOuter / 2 + 400, config.bedLengthOuter);
   const barbY = threeSpace(-50, config.bedWidthOuter);
   const barbZ = groundZ + 20;
   const tubePath = easyCubicBezierCurve3(
-    [-20, threeSpace(-30, config.bedWidthOuter), -140],
+    [
+      threeSpace(config.bedLengthOuter / 2 - 20, config.bedLengthOuter),
+      threeSpace(-30, config.bedWidthOuter),
+      -140,
+    ],
     [300, 0, 0],
     [-300, 0, 0],
     [barbX, barbY, barbZ],