small udpate for prod/local environments in threejs example

Author: matas-bitbybit-dev

react/bitbybit-threejs/package.json

@@ -26,8 +26,8 @@
         "react-app-rewired": "2.2.1"
     },
     "scripts": {
-        "start": "PORT=3000 react-app-rewired start",
-        "build": "GENERATE_SOURCEMAP=false && react-app-rewired build",
+        "start": "REACT_APP_ENVIRONMENT='local' PORT=3000 react-app-rewired start",
+        "build": "REACT_APP_ENVIRONMENT='production' GENERATE_SOURCEMAP=false && react-app-rewired build",
         "test": "react-scripts test",
         "eject": "react-scripts eject"
     },

react/bitbybit-threejs/src/App.tsx

@@ -40,31 +40,50 @@ function App() {
     const firstRenderRef = useRef(true);
 
     useEffect(() => {
-        // if (firstRenderRef.current) {
-        //     firstRenderRef.current = false;
-        //     return;
-        // }
+        if (process.env.REACT_APP_ENVIRONMENT !== 'production' &&
+            firstRenderRef.current) {
+            firstRenderRef.current = false;
+            return;
+        }
         init();
     }, [])
 
     const createVaseByLoft = async (bitbybit?: BitByBitOCCT, scene?: THREE.Scene) => {
         if (scene && bitbybit) {
-            const wire1 = await bitbybit.occt.shapes.wire.createCircleWire({ radius: 10 + addRadiusNarrow, center: [0, 0, 0], direction: [0, 1, 0] });
-            const wire2 = await bitbybit.occt.shapes.wire.createEllipseWire({ radiusMinor: 20 + addRadiusWide, radiusMajor: 25 + addRadiusWide, center: [0, 20 + addMiddleHeight, 0], direction: [0, 1, 0] });
-            const wire3 = await bitbybit.occt.shapes.wire.createCircleWire({ radius: 10 + addRadiusNarrow, center: [0, 30 + addMiddleHeight, 0], direction: [0, 1, 0] });
-            const wire4 = await bitbybit.occt.shapes.wire.createCircleWire({ radius: 15 + addRadiusWide, center: [0, 40 + addMiddleHeight + addTopHeight, 0], direction: [0, 1, 0.1] });
+            const wire1 = await bitbybit.occt.shapes.wire.createCircleWire({
+                radius: 10 + addRadiusNarrow,
+                center: [0, 0, 0],
+                direction: [0, 1, 0]
+            });
+            const wire2 = await bitbybit.occt.shapes.wire.createEllipseWire({
+                radiusMinor: 20 + addRadiusWide,
+                radiusMajor: 25 + addRadiusWide,
+                center: [0, 20 + addMiddleHeight, 0],
+                direction: [0, 1, 0]
+            });
+            const wire3 = await bitbybit.occt.shapes.wire.createCircleWire({
+                radius: 10 + addRadiusNarrow,
+                center: [0, 30 + addMiddleHeight, 0],
+                direction: [0, 1, 0]
+            });
+            const wire4 = await bitbybit.occt.shapes.wire.createCircleWire({
+                radius: 15 + addRadiusWide,
+                center: [0, 40 + addMiddleHeight + addTopHeight, 0],
+                direction: [0, 1, 0.1]
+            });
             const lAdvOpt = new Inputs.OCCT.LoftAdvancedDto([wire1, wire2, wire3, wire4]);
             const loft = await bitbybit.occt.operations.loftAdvanced(lAdvOpt);
             const loftFace = await bitbybit.occt.shapes.face.getFace({ shape: loft, index: 0 });
             const baseFace = await bitbybit.occt.shapes.face.createFaceFromWire({ shape: wire1, planar: true });
             const shell = await bitbybit.occt.shapes.shell.sewFaces({ shapes: [loftFace, baseFace], tolerance: 1e-7 });
             const fillet = await bitbybit.occt.fillets.filletEdges({ shape: shell, radius: 10 });
             const thick = await bitbybit.occt.operations.makeThickSolidSimple({ shape: fillet, offset: -2 })
-            const chamfer = await bitbybit.occt.fillets.chamferEdges({ shape: thick, distance: 0.3 });
+            const vase = await bitbybit.occt.fillets.chamferEdges({ shape: thick, distance: 0.3 });
+
+            const group = await addShapeToScene(bitbybit, vase, scene, 0.05);
 
-            const group = await addShapeToScene(bitbybit, chamfer, scene, 0.05);
             setGroup(group);
-            setVase(chamfer);
+            setVase(vase);
         }
     }