added image representation for the app to be shown in social media sharing

Author: matas-bitbybit-dev

react/bitbybit-threejs/public/index.html

@@ -9,15 +9,15 @@
     <meta name="description" content="his application shows how to integrate Bit By Bit Developers OCCT algorithms with ThreeJS game engine.">
     <meta property="og:title" content="Store - ThreeJS Example - Bit By Bit Developers">
     <meta property="og:description" content="This application shows how to integrate Bit By Bit Developers OCCT algorithms with ThreeJS game engine.">
-    <meta property="og:image" content="https://bitbybit.dev/assets/apps/app-laptop-holder-small.webp">
+    <meta property="og:image" content="https://app.bitbybit.dev/assets/bitbybit-threejs.png">
     <meta property="og:image:width" content="1210">
     <meta property="og:image:height" content="681">
-    <meta property="og:url" content="https://app-store.bitbybit.dev/laptop-holder">
+    <meta property="og:url" content="https://app-store.bitbybit.dev/bitbybit-threejs">
     <meta name="twitter:title" content="Store - ThreeJS Example - Bit By Bit Developers">
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:site" content="@bitbybit_dev">
     <meta name="twitter:description" content="This application shows how to integrate Bit By Bit Developers OCCT algorithms with ThreeJS game engine.">
-    <meta name="twitter:image:src" content="https://bitbybit.dev/assets/apps/app-laptop-holder-small.webp">
+    <meta name="twitter:image:src" content="https://app.bitbybit.dev/assets/bitbybit-threejs.png">
     <meta name="twitter:alt" content="Picture Showing Store - ThreeJS Example - Bit By Bit Developers">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <meta name="theme-color" content="#000000" />

react/bitbybit-threejs/src/App.css

@@ -9,6 +9,14 @@
     right: 20px;
 }
 
+.imageback {
+    position: absolute;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+}
+
 .hidden {
     display: none;
 }

react/bitbybit-threejs/src/App.tsx

@@ -133,6 +133,7 @@ function App() {
         controls.update();
         controls.target = new THREE.Vector3(0, 20, 0);
         controls.enableDamping = true;
+        controls.dampingFactor = 0.1
         controls.zoomSpeed = 0.1;
 
         renderer.shadowMap.enabled = true;
@@ -161,6 +162,7 @@ function App() {
 
     return (
         <ThemeProvider theme={theme}>
+            <img className="imageback" src="https://app.bitbybit.dev/assets/bitbybit-threejs.png" alt="image showing the bitbybit threejs 3d printable vase configurator app"></img>
             <div className="hideMenu">
                 <Button onClick={() => setHideMenu(!hideMenu)} color="primary" variant="contained">{hideMenu ? 'Show menu' : 'Hide menu'}</Button>
             </div>