From 47ff43d6c2e2600361fd489c49cea41fde091e4d Mon Sep 17 00:00:00 2001 From: Harsh Badhai <49694914+harsh242@users.noreply.github.com> Date: Thu, 25 Mar 2021 14:29:35 +0530 Subject: [PATCH] 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 --- src/pages/tezos/customizebot.js | 51 ++++++++++++--------------------- 1 file changed, 19 insertions(+), 32 deletions(-) diff --git a/src/pages/tezos/customizebot.js b/src/pages/tezos/customizebot.js index d20c741b..ca576f6b 100644 --- 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 ( + + + + + + + +

Loading...

+ + + ); +}; + function useGroup(scene, type) { const result = []; @@ -385,28 +395,6 @@ const CustomAmbientLight = ({ setImage, grabImage }) => { return ; }; -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]} /> - + }> { getMeshName={getMeshName} setBotColors={setBotColors} /> - + - )}