10% - 3d Playground

.gitignore

@@ -21,7 +21,7 @@ src/app/lib/config/services/*.test.js
 .env
 yarn-error.log
 .yarn/*
-!.yarn/cache
+.yarn/cache
 !.yarn/patches
 !.yarn/plugins
 !.yarn/releases

package.json

@@ -111,6 +111,9 @@
     "@loadable/server": "5.16.7",
     "@optimizely/optimizely-sdk": "5.4.1",
     "@optimizely/react-sdk": "3.3.1",
+    "@react-three/drei": "10.7.7",
+    "@react-three/fiber": "9.6.0",
+    "@types/three": "0.184.0",
     "aws-embedded-metrics": "4.2.0",
     "compression": "1.8.1",
     "core-js": "3.46.0",
@@ -133,6 +136,7 @@
     "react-lazyload": "3.2.1",
     "react-router-config": "5.1.1",
     "react-router-dom": "5.3.4",
+    "three": "0.184.0",
     "undici": "7.24.0",
     "url-parse": "1.5.10",
     "uuid": "13.0.0",

src/app/components/3d/3dComponents/Globe/index.styles.ts

@@ -0,0 +1,14 @@
+import { css } from '@emotion/react';
+
+export default {
+  GlobeScene: () =>
+    css({
+      width: 500,
+      height: 500,
+    }),
+  canvasContainer: () =>
+    css({
+      width: '100%',
+      height: '100%',
+    }),
+};

src/app/components/3d/3dComponents/Globe/index.tsx

@@ -0,0 +1,10 @@
+import Scene3D from './scene3D';
+import styles from './index.styles';
+
+const Globe = () => (
+  <div css={styles.GlobeScene}>
+    <Scene3D />
+  </div>
+);
+
+export default Globe;

src/app/components/3d/3dComponents/Globe/scene3D.jsx

@@ -0,0 +1,18 @@
+// import { jsx } from '@emotion/react';
+// import { Suspense } from 'react';
+import { Canvas } from '@react-three/fiber';
+import { OrbitControls } from '@react-three/drei';
+import { Globe } from '#app/components/3d/3dModels/Globe';
+import styles from './index.styles';
+
+/* eslint-disable react/no-unknown-property */
+const Scene3D = () => (
+  <div css={styles.canvasContainer}>
+    <Canvas>
+      <OrbitControls />
+      <Globe />
+    </Canvas>
+  </div>
+);
+
+export default Scene3D;

src/app/components/3d/3dModels/Globe.jsx

@@ -0,0 +1,73 @@
+/*
+Auto-generated by: https://github.com/pmndrs/gltfjsx
+*/
+
+/* eslint-disable react/no-unknown-property */
+
+import { useGLTF } from '@react-three/drei';
+
+import { getEnvConfig } from '#app/lib/utilities/getEnvConfig';
+
+const {
+  SIMORGH_PUBLIC_STATIC_ASSETS_ORIGIN,
+  SIMORGH_PUBLIC_STATIC_ASSETS_PATH,
+} = getEnvConfig();
+
+const MESH_COLORS = [
+  '#e6194b',
+  '#3cb44b',
+  '#ffe119',
+  '#4363d8',
+  '#f58231',
+  '#911eb4',
+  '#42d4f4',
+  '#f032e6',
+  '#bfef45',
+  '#fabed4',
+];
+
+export function Globe(props) {
+  const { nodes } = useGLTF(
+    `${SIMORGH_PUBLIC_STATIC_ASSETS_ORIGIN}${SIMORGH_PUBLIC_STATIC_ASSETS_PATH}3d/Models/test_globe.glb`,
+  );
+  return (
+    <group {...props} dispose={null}>
+      <mesh geometry={nodes.Sphere001.geometry}>
+        <meshBasicMaterial color={MESH_COLORS[0]} />
+      </mesh>
+      <mesh geometry={nodes.Sphere002.geometry}>
+        <meshBasicMaterial color={MESH_COLORS[1]} />
+      </mesh>
+      <mesh geometry={nodes.Sphere003.geometry}>
+        <meshBasicMaterial color={MESH_COLORS[2]} />
+      </mesh>
+      <mesh geometry={nodes.Sphere004.geometry}>
+        <meshBasicMaterial color={MESH_COLORS[3]} />
+      </mesh>
+      <mesh geometry={nodes.Sphere005.geometry}>
+        <meshBasicMaterial color={MESH_COLORS[4]} />
+      </mesh>
+      <mesh geometry={nodes.Sphere006.geometry}>
+        <meshBasicMaterial color={MESH_COLORS[5]} />
+      </mesh>
+      <mesh geometry={nodes.Sphere007.geometry}>
+        <meshBasicMaterial color={MESH_COLORS[6]} />
+      </mesh>
+      <mesh geometry={nodes.Sphere008.geometry}>
+        <meshBasicMaterial color={MESH_COLORS[7]} />
+      </mesh>
+      <mesh geometry={nodes.Sphere009.geometry}>
+        <meshBasicMaterial color={MESH_COLORS[8]} />
+      </mesh>
+      <mesh geometry={nodes.Sphere010.geometry}>
+        <meshBasicMaterial color={MESH_COLORS[9]} />
+      </mesh>
+    </group>
+  );
+}
+
+useGLTF.preload(
+  `${SIMORGH_PUBLIC_STATIC_ASSETS_ORIGIN}${SIMORGH_PUBLIC_STATIC_ASSETS_PATH}3d/Models/test_globe.glb`,
+);
+
+export default Globe;

ws-nextjs-app/pages/ws/languages.page.tsx

@@ -5,9 +5,13 @@ import PageDataParams from '#app/models/types/pageDataParams';
 import { INTERNAL_SERVER_ERROR, OK } from '#app/lib/statusCodes.const';
 import nodeLogger from '#lib/logger.node';
 import { ROUTING_INFORMATION } from '#app/lib/logger.const';
+
 import getPageData from '../../utilities/pageRequests/getPageData';
 
 const HomePage = dynamic(() => import('#pages/HomePage/HomePage'));
+const Globe = dynamic(() => import('#app/components/3d/3dComponents/Globe'), {
+  ssr: false,
+});
 
 const logger = nodeLogger(__filename);
 
@@ -62,4 +66,11 @@ export const getServerSideProps: GetServerSideProps = async context => {
   };
 };
 
-export default HomePage;
+const LanguagesPage = props => (
+  <>
+    <Globe />
+    <HomePage {...props} />
+  </>
+);
+
+export default LanguagesPage;