Adds Drei Env Lighting & Fallback loader until all assets get loaded (#…

…310) * feat::lipstick: add drei env lighting & fallback loader * fix::bug: hidden welcome modal Co-authored-by: Bhaskar Singh <[email protected]>
buidl-labs · Mar 25, 2021 · 47ff43d · 47ff43d
1 parent 8a9475f
commit 47ff43d
Showing 1 changed file with 19 additions and 32 deletions.
diff --git a/src/pages/tezos/customizebot.js b/src/pages/tezos/customizebot.js
@@ -13,13 +13,11 @@ import { ThanosWallet } from '@thanos-wallet/dapp';
 import { navigate, Link } from 'gatsby';
 import { Canvas, useFrame, useThree } from 'react-three-fiber';
 import {
-  ContactShadows,
   Environment,
   useGLTF,
   OrbitControls,
   Html,
-  Loader as Loading,
-  Preload,
+  Octahedron,
 } from '@react-three/drei';
 import Loader from 'react-loader-spinner';
 import { HexColorPicker, HexColorInput } from 'react-colorful';
@@ -72,10 +70,6 @@ import legs3 from '../../assets/CryptobotImages/Leg/03xlegs.png';
 import legs4 from '../../assets/CryptobotImages/Leg/04xlegs.png';
 import legs5 from '../../assets/CryptobotImages/Leg/05xlegs.png';
 
-//Custom Environment function
-import { UnsignedByteType, PMREMGenerator } from 'three';
-import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
-
 const state = {
   current: null,
   items: {
@@ -86,6 +80,22 @@ const state = {
   },
 };
 
+const Loading = props => {
+  const mesh = useRef();
+  return (
+    <group>
+      <mesh {...props} ref={mesh} position={[0, 1.2, 0]}>
+        <Octahedron args={[1, 1, 1]}>
+          <meshBasicMaterial attach="material" color="#fff" wireframe />
+        </Octahedron>
+      </mesh>
+      <Html center>
+        <h1 className="text-white text-2xl font-bold mt-4">Loading...</h1>
+      </Html>
+    </group>
+  );
+};
+
 function useGroup(scene, type) {
   const result = [];
 
@@ -385,28 +395,6 @@ const CustomAmbientLight = ({ setImage, grabImage }) => {
   return <ambientLight intensity={0.5} />;
 };
 
-const CustomEnvironment = () => {
-  const { gl, scene } = useThree();
-  const pmremGenerator = new PMREMGenerator(gl);
-  const loader = new RGBELoader();
-  loader.setDataType(UnsignedByteType);
-  pmremGenerator.compileEquirectangularShader();
-
-  useEffect(() => {
-    loader.load('/royal_esplanade_1k_compressed_50ppi.hdr', texture => {
-      const envMap = pmremGenerator.fromEquirectangular(texture).texture;
-
-      scene.environment = envMap;
-      // one can also set scene.background to envMap here
-
-      texture.dispose();
-      pmremGenerator.dispose();
-    });
-  }, [scene, loader, pmremGenerator]);
-
-  return null;
-};
-
 //INTRO TO CUSTOMIZER TOUR
 const steps = [
   {
@@ -1133,7 +1121,7 @@ const Customizer = ({ location }) => {
                     penumbra={1}
                     position={[5, 27, 20]}
                   />
-                  <Suspense fallback={null}>
+                  <Suspense fallback={<Loading />}>
                     <Bot
                       headCount={headCount}
                       armCount={armCount}
@@ -1143,11 +1131,10 @@ const Customizer = ({ location }) => {
                       getMeshName={getMeshName}
                       setBotColors={setBotColors}
                     />
-                    <CustomEnvironment />
+                    <Environment files="royal_esplanade_1k_compressed_50ppi.hdr" />
                   </Suspense>
                   <OrbitControls enableZoom={true} />
                 </Canvas>
-                <Loading containerStyles={{ background: 'rgba(55, 65, 81)' }} />
               </div>
             )}
           </div>