feat(environment): add new model for 3d environment props

src/components/Models/EnvironmentModel/EnvironmentModel.component.tsx

@@ -0,0 +1,41 @@
+import React, { FC } from 'react';
+import { useFallback, useGltfLoader, CustomNode, Transform } from 'src/services';
+import { useGraph } from '@react-three/fiber';
+import { BaseModelProps } from 'src/types';
+
+export interface EnvironmentModelProps extends BaseModelProps {
+  modelSrc: string | Blob;
+  scale?: number;
+}
+
+export const EnvironmentModel: FC<EnvironmentModelProps> = ({ modelSrc, scale = 1, setModelFallback }) => {
+  const { scene } = useGltfLoader(modelSrc);
+  const { nodes } = useGraph(scene);
+
+  useFallback(nodes, setModelFallback);
+  const transform = new Transform();
+
+  return (
+    <group>
+      {Object.keys(nodes).map((key) => {
+        const node = nodes[key] as CustomNode;
+        if (node.type === 'Mesh') {
+          return (
+            <mesh
+              receiveShadow
+              key={node.name}
+              scale={scale}
+              position={transform.position}
+              rotation={transform.rotation}
+              geometry={node.geometry}
+              material={node.material}
+              morphTargetInfluences={node.morphTargetInfluences || []}
+            />
+          );
+        }
+
+        return null;
+      })}
+    </group>
+  );
+};

src/components/Models/EnvironmentModel/EnvironmentModel.container.tsx

@@ -0,0 +1,16 @@
+import React, { FC, Suspense, useState } from 'react';
+import { EnvironmentModel, EnvironmentModelProps } from './EnvironmentModel.component';
+
+/**
+ * Contains model to handle suspense fallback.
+ */
+export const EnvironmentModelContainer: FC<EnvironmentModelProps> = (props) => {
+  /* eslint-disable-next-line react/jsx-no-useless-fragment */
+  const [fallback, setFallback] = useState<JSX.Element>(<></>);
+
+  return (
+    <Suspense fallback={fallback}>
+      <EnvironmentModel setModelFallback={setFallback} {...props} />
+    </Suspense>
+  );
+};

src/components/Models/EnvironmentModel/index.ts

@@ -0,0 +1 @@
+export { EnvironmentModelContainer as EnvironmentModel } from './EnvironmentModel.container';

src/components/Models/Model/Model.component.tsx

@@ -3,6 +3,7 @@ import { Group, Mesh } from 'three';
 import { normaliseMaterialsConfig, triggerCallback } from 'src/services';
 import { useGraph } from '@react-three/fiber';
 import { BaseModelProps } from 'src/types';
+import { ArcballControls } from 'three-stdlib';
 import { Spawn } from '../../Spawn/Spawn';
 
 interface ModelProps extends BaseModelProps {
@@ -14,6 +15,7 @@ interface ModelProps extends BaseModelProps {
 
 export const Model: FC<ModelProps> = ({ scene, scale = 1, modelRef, onLoaded, onSpawnAnimationFinish, bloom }) => {
   const { materials } = useGraph(scene);
+  console.log(scene);
   normaliseMaterialsConfig(materials, bloom);
   scene.traverse((object) => {
     const node = object;
@@ -29,6 +31,19 @@ export const Model: FC<ModelProps> = ({ scene, scale = 1, modelRef, onLoaded, on
 
   useEffect(() => triggerCallback(onLoaded), [scene, materials, onLoaded]);
 
+  useEffect(() => {
+    if (scene.children.length === 1) {
+      document.addEventListener('mousemove', onMouseMove);
+    }
+    return () => {
+      document.removeEventListener('mousemove', onMouseMove);
+    };
+  });
+
+  function onMouseMove(event) {
+    scene.rotation.y += event.movementX * 0.005;
+  }
+
   return (
     <group ref={modelRef} dispose={null} rotation={[0, 0, 0]}>
       <primitive object={scene} scale={scale} />

src/components/Models/index.ts

@@ -4,3 +4,4 @@ export { HalfBodyModel } from './HalfBodyModel';
 export { StaticModel } from './StaticModel';
 export { PoseModel } from './PoseModel';
 export { Model } from './Model';
+export { EnvironmentModel } from './EnvironmentModel';

src/library.ts

@@ -4,6 +4,7 @@ import { AnimationModel } from './components/Models/AnimationModel';
 import { HalfBodyModel } from './components/Models/HalfBodyModel';
 import { StaticModel } from './components/Models/StaticModel';
 import { PoseModel } from './components/Models/PoseModel';
+import { EnvironmentModel } from './components/Models/EnvironmentModel';
 import { Avatar, CAMERA } from './components/Avatar';
 
-export { Exhibit, FloatingModel, AnimationModel, HalfBodyModel, StaticModel, PoseModel, Avatar, CAMERA };
+export { Exhibit, FloatingModel, EnvironmentModel, AnimationModel, HalfBodyModel, StaticModel, PoseModel, Avatar, CAMERA };