Merge pull request #31 from readyplayerme/feature/self-host-environme…

…nt-presets

Feature - new environment presets

src/components/Avatar/Avatar.stories.tsx

@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { getStoryAssetPath } from 'src/services';
 import { Vector3 } from 'three';
 import { FileDropper } from 'src/components/FileDropper/FileDropper.component';
-import { allowedPresets } from 'src/components/Scene/Environment.component';
+import { environmentPresets } from 'src/services/EnvironmentMap.service';
 import { Avatar, CAMERA } from './Avatar.component';
 
 const emotions = {
@@ -30,7 +30,7 @@ Static.args = {
   modelSrc: getStoryAssetPath('female.glb'),
   animationSrc: undefined,
   poseSrc: undefined,
-  environment: 'city',
+  environment: 'hub',
   scale: 1,
   shadows: false,
   halfBody: false,
@@ -147,6 +147,6 @@ export default {
     scale: { control: { type: 'range', min: 0.01, max: 10, step: 0.01 } },
     cameraInitialDistance: { control: { type: 'range', min: 0, max: 2.5, step: 0.01 } },
     onLoaded: { control: false },
-    environment: { options: Object.keys(allowedPresets), control: { type: 'select' } }
+    environment: { options: Object.keys(environmentPresets), control: { type: 'select' } }
   }
 } as ComponentMeta<typeof Avatar>;

src/components/Exhibit/Exhibit.stories.tsx

@@ -3,8 +3,8 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { getStoryAssetPath } from 'src/services';
 import { FileDropper } from 'src/components/FileDropper/FileDropper.component';
 import { Vector3 } from 'three';
+import { environmentPresets } from 'src/services/EnvironmentMap.service';
 import { Exhibit } from './Exhibit.component';
-import { allowedPresets } from '../Scene/Environment.component';
 
 const Template: ComponentStory<typeof Exhibit> = (args) => <Exhibit {...args} />;
 const DropTemplate: ComponentStory<typeof Exhibit> = (args) => (
@@ -24,7 +24,7 @@ Default.args = {
   shadows: true
 };
 Default.argTypes = {
-  environment: { options: Object.keys(allowedPresets), control: { type: 'select' } }
+  environment: { options: Object.keys(environmentPresets), control: { type: 'select' } }
 };
 
 /* eslint-disable */

src/components/Scene/Environment.component.tsx

@@ -1,35 +1,20 @@
 import React, { FC, useMemo } from 'react';
 import { Environment as DreiEnvironment } from '@react-three/drei';
-import { PresetsType } from '@react-three/drei/helpers/environment-assets';
-
-export const allowedPresets = {
-  sunset: 'sunset',
-  dawn: 'dawn',
-  night: 'night',
-  warehouse: 'warehouse',
-  forest: 'forest',
-  apartment: 'apartment',
-  studio: 'studio',
-  city: 'city',
-  park: 'park',
-  lobby: 'lobby'
-};
+import { environmentPresets, getPresetEnvironmentMap, EnvironmentPresets } from 'src/services/EnvironmentMap.service';
 
 export interface EnvironmentProps {
-  environment: string;
+  environment: string | EnvironmentPresets;
 }
 
 export const Environment: FC<EnvironmentProps> = ({ environment }) => {
-  const config = useMemo<{ preset: PresetsType | undefined; files: string | undefined }>(() => {
-    const isStaticPreset = environment in allowedPresets;
-    const preset = isStaticPreset ? (environment as PresetsType) : undefined;
-    const files = isStaticPreset ? undefined : environment;
+  const config = useMemo<{ files: string }>(() => {
+    const isStaticPreset = environment in environmentPresets;
+    const files = isStaticPreset ? getPresetEnvironmentMap(environment as EnvironmentPresets) : environment;
 
     return {
-      preset,
       files
     };
   }, [environment]);
 
-  return <DreiEnvironment preset={config.preset} files={config.files} />;
+  return <DreiEnvironment files={config.files} />;
 };

src/services/EnvironmentMap.service.ts

@@ -0,0 +1,17 @@
+export const environmentPresets = {
+  hub: 'hub',
+  sunset: 'sunset',
+  dawn: 'dawn',
+  night: 'night',
+  warehouse: 'warehouse',
+  forest: 'forest',
+  apartment: 'apartment',
+  studio: 'studio',
+  city: 'city',
+  park: 'park',
+  lobby: 'lobby'
+};
+export type EnvironmentPresets = keyof typeof environmentPresets;
+
+export const getPresetEnvironmentMap = (preset: EnvironmentPresets) =>
+  `https://readyplayerme-assets.s3.amazonaws.com/environment/${preset}.hdr`;