try out: .glb files and override imported materails

Author: Louis-Matsika

public/public3d/India/India.glb

@@ -2,10 +2,20 @@
 /* @jsxFrag React.Fragment */
 import { jsx } from '@emotion/react';
 import Scene3D from './scene3d';
-
+import { RequestContext } from '#contexts/RequestContext';
+import config3d from '#app/components/3d/config3d.json';
+import { use } from 'react';
 import styles from './index.styles';
 
 const LanguagesNearYou = () => {
+
+  const { service } = use(RequestContext)
+  const isEnabled = config3d.LanguagesNearYou.enabled.includes(service)
+
+  if (!isEnabled) {
+    return null;
+  }
+
   return (
     <div>
       <h2>Languages Near You</h2>

public/public3d/India1/India_outline.bin

@@ -3,14 +3,13 @@
 import { jsx } from '@emotion/react';
 import { Suspense, useEffect } from 'react';
 import { Canvas, useThree } from '@react-three/fiber';
-
-import styles from './index.styles';
+import { OrbitControls, GizmoHelper, GizmoViewport } from '@react-three/drei';
 
 // importing objects
-import India from '../../3dObjects/external/India1/india1';
-
+import { India } from '#app/components/3d/3dObjects/external/India/India';
 import BillboardParticleSystem from '../../3dObjects/primitive/BillboardParticleSystem/BillboardParticleSystem';
 
+import styles from './index.styles';
 /* eslint-disable react/no-unknown-property */
 
 const SetCameraTarget = ({ position, target, fov }) => {
@@ -31,11 +30,17 @@ const Scene3D = () => (
     <Canvas>
       <Suspense fallback={null}>
         <SetCameraTarget position={[-3, 1, 0]} target={[0, 1, 0]} fov={80} />
+        <GizmoHelper alignment="bottom-right" margin={[80, 80]}>
+          <GizmoViewport />
+        </GizmoHelper>
+        <axesHelper args={[10]} />
+        <gridHelper args={[20]} />
+        <OrbitControls />
         {/* lights */}
-        <ambientLight intensity={3} />
+        <ambientLight intensity={4} />
         <directionalLight position={[2, 5, 1]} />
         {/* objects */}
-        <India position={[0, 0, 1]} rotation={[0, Math.PI / 2, 0]} />
+        <India position={[0, 0, 0]} rotation={[0, 0, 0]} />
         {/* particle systems */}
         <BillboardParticleSystem
           texturePath="/public3d/test-text.png"

public/public3d/India1/India_outline.gltf

@@ -0,0 +1,55 @@
+/** @jsx jsx */
+/* @jsxFrag React.Fragment */
+/* eslint-disable react/no-unknown-property */
+import { jsx } from '@emotion/react';
+
+import { useGLTF } from '@react-three/drei';
+
+export function India(props) {
+  const { nodes } = useGLTF('/public3d/India/India.glb');
+  return (
+    <group {...props} dispose={null}>
+      <mesh
+        name="Hindi_(flat)"
+        castShadow
+        receiveShadow
+        geometry={nodes['Hindi_(flat)'].geometry}
+        material={nodes['Hindi_(flat)'].material}
+      >
+        <meshStandardMaterial color="red" />
+      </mesh>
+      <mesh
+        name="Urdu_(flat)"
+        castShadow
+        receiveShadow
+        geometry={nodes['Urdu_(flat)'].geometry}
+        material={nodes['Urdu_(flat)'].material}
+      />
+      <mesh
+        name="Telugu_(flat)"
+        castShadow
+        receiveShadow
+        geometry={nodes['Telugu_(flat)'].geometry}
+        material={nodes['Telugu_(flat)'].material}
+      />
+      <mesh
+        name="India_-_remaining_regions_(flat)"
+        castShadow
+        receiveShadow
+        geometry={nodes['India_-_remaining_regions_(flat)'].geometry}
+        material={nodes['India_-_remaining_regions_(flat)'].material}
+      />
+      <mesh
+        name="India_(outline)_(flat)"
+        castShadow
+        receiveShadow
+        geometry={nodes['India_(outline)_(flat)'].geometry}
+        material={nodes['India_(outline)_(flat)'].material}
+      />
+    </group>
+  );
+}
+
+useGLTF.preload('/public3d/India/India.glb');
+
+export default India;