diff --git a/src/components/Avatar/Examples.stories.tsx b/src/components/Avatar/Examples.stories.tsx index 6118a73b..5fc8e361 100644 --- a/src/components/Avatar/Examples.stories.tsx +++ b/src/components/Avatar/Examples.stories.tsx @@ -1,13 +1,10 @@ import React from 'react'; import { StoryFn } from '@storybook/react'; -import { Sparkles as SparklesDrei, StatsGl } from '@react-three/drei'; +import { Sparkles as SparklesDrei } from '@react-three/drei'; import type { Meta } from '@storybook/react'; import { Avatar as AvatarWrapper, CAMERA } from 'src/components/Avatar'; import { getStoryAssetPath } from 'src/services'; import { ignoreArgTypesOnExamples, emotions, modelPresets, animationPresets } from 'src/services/Stories.service'; -import { environmentModels, environmentPresets } from 'src/services/Environment.service'; -import { EnvironmentModel as EnvironmentModelContainer } from 'src/components/Models'; -import { FloorReflection, FloorReflectionProps } from 'src/components/FloorReflection'; import { Vector3 } from 'three'; import { AvatarProps } from './Avatar.component'; import { Static } from './Avatar.stories'; @@ -16,13 +13,10 @@ import { BloomConfiguration } from '../../types'; const Avatar = (args: AvatarProps) => ; const Sparkles: StoryFn = (args: any) => ; -const EnvironmentModel: StoryFn = (args: any) => ( - -); const meta: Meta = { component: Avatar, // @ts-ignore - subcomponents: { Sparkles, EnvironmentModel } + subcomponents: { Sparkles } }; export default meta; @@ -160,105 +154,3 @@ IdleBlinking.argTypes = { modelSrc: { options: Object.values({ seven: modelPresets.seven }), control: { type: 'select' } }, animationSrc: { options: Object.values(animationPresets), control: { type: 'select' } } }; - -// @ts-ignore -export const environmentModel: StoryFn = ( - args: AvatarProps & { environmentModel: string; environmentScale: number } -) => ( - - - -); -environmentModel.args = { - environmentModel: 'spaceStation', - ...Static.args, - fov: 50, - // @ts-ignore - environmentScale: 1.0, - shadows: true, - modelSrc: modelPresets.one, - animationSrc: animationPresets.one, - environment: 'soft', - /* eslint-disable no-console */ - onLoaded: () => console.info('EVENT: environment model loaded') - /* eslint-enable no-console */ -}; -environmentModel.argTypes = { - ...ignoreArgTypesOnExamples, - onLoading: { table: { disable: true } }, - scale: { table: { disable: true } }, - keyLightColor: { table: { disable: true } }, - fillLightColor: { table: { disable: true } }, - fillLightPosition: { table: { disable: true } }, - backLightColor: { table: { disable: true } }, - backLightPosition: { table: { disable: true } }, - lightTarget: { table: { disable: true } }, - // @ts-ignore - environmentModel: { options: Object.keys(environmentModels), control: { type: 'select' } }, - fov: { control: { type: 'range', min: 30, max: 100, step: 1 } }, - // @ts-ignore - environmentScale: { control: { type: 'range', min: 0.01, max: 10, step: 0.01 } }, - fillLightIntensity: { control: { type: 'range', min: 0, max: 20, step: 0.1 } }, - backLightIntensity: { control: { type: 'range', min: 0, max: 20, step: 0.1 } }, - environment: { options: Object.keys(environmentPresets), control: { type: 'select' } } -}; -// @ts-ignore -export const ReflectiveFloor: StoryFn = ( - args: AvatarProps & FloorReflectionProps & { debug: boolean } -) => ( - - - {args?.debug && } - -); -ReflectiveFloor.args = { - ...Static.args, - fov: 50, - // @ts-ignore - shadows: false, - modelSrc: modelPresets.one, - animationSrc: animationPresets.three, - environment: 'soft', - /* eslint-disable no-console */ - onLoaded: () => console.info('EVENT: environment model loaded'), - /* eslint-enable no-console */ - // @ts-ignore - resolution: 512, - mixBlur: 0.8, - mixStrength: 80, - metalness: 0.5, - blur: [300, 200], - mirror: 1, - minDepthThreshold: 0.4, - maxDepthThreshold: 1.4, - depthScale: 1.2, - depthToBlurRatioBias: 1, - distortion: 0, - mixContrast: 1, - reflectorOffset: 0, - roughness: 1, - color: 'rgb(9,20,26)', - debug: false -}; - -ReflectiveFloor.argTypes = { - ...ignoreArgTypesOnExamples, - // @ts-ignore - fov: { control: { type: 'range', min: 30, max: 100, step: 1 } }, - // @ts-ignore - environment: { options: Object.keys(environmentPresets), control: { type: 'select' } }, - // @ts-ignore - resolution: { control: { type: 'range', min: 64, max: 2048, step: 64 } }, - mixBlur: { control: { type: 'range', min: 0, max: 10, step: 0.1 } }, - mixStrength: { control: { type: 'range', min: 0, max: 100, step: 1 } }, - metalness: { control: { type: 'range', min: 0, max: 1, step: 0.01 } }, - mirror: { control: { type: 'range', min: 0, max: 1, step: 1 } }, - minDepthThreshold: { control: { type: 'range', min: 0, max: 10, step: 0.01 } }, - maxDepthThreshold: { control: { type: 'range', min: 0, max: 10, step: 0.01 } }, - depthScale: { control: { type: 'range', min: 0, max: 20, step: 0.01 } }, - depthToBlurRatioBias: { control: { type: 'range', min: 0, max: 1, step: 0.01 } }, - distortion: { control: { type: 'range', min: 0, max: 1, step: 0.01 } }, - mixContrast: { control: { type: 'range', min: 0, max: 1, step: 0.01 } }, - reflectorOffset: { control: { type: 'range', min: 0, max: 1, step: 0.01 } }, - roughness: { control: { type: 'range', min: 0, max: 1, step: 0.01 } } -}; diff --git a/src/services/Models.service.tsx b/src/services/Models.service.tsx index c7296cb7..6c20c8b9 100644 --- a/src/services/Models.service.tsx +++ b/src/services/Models.service.tsx @@ -89,7 +89,6 @@ export const normaliseMaterialsConfig = (materials: Record, bl if (mat.emissiveMap) { mat.emissiveIntensity = bloomConfig?.materialIntensity || 3.3; - mat.toneMapped = false; } }); }; @@ -308,12 +307,17 @@ function buildFallback(nodes: Nodes, transform: Transform = new Transform()): JS if (node.type === 'Mesh') { return ( { + parent.add(self); + self.parent = node.parent; + return () => parent.remove(self); + }} castShadow receiveShadow key={node.name} - scale={transform.scale} - position={transform.position} - rotation={transform.rotation} + scale={node.scale} + position={node.position} + rotation={node.rotation} geometry={node.geometry} material={node.material} morphTargetInfluences={node.morphTargetInfluences || []} diff --git a/test/functional/cypress-image-diff-screenshots/baseline/visual.cy.ts-avatar-zoom-0.5-side-[-1].png b/test/functional/cypress-image-diff-screenshots/baseline/visual.cy.ts-avatar-zoom-0.5-side-[-1].png index 2240136d..45d2773b 100644 Binary files a/test/functional/cypress-image-diff-screenshots/baseline/visual.cy.ts-avatar-zoom-0.5-side-[-1].png and b/test/functional/cypress-image-diff-screenshots/baseline/visual.cy.ts-avatar-zoom-0.5-side-[-1].png differ diff --git a/test/functional/cypress-image-diff-screenshots/baseline/visual.cy.ts-avatar-zoom-0.5-side-[1].png b/test/functional/cypress-image-diff-screenshots/baseline/visual.cy.ts-avatar-zoom-0.5-side-[1].png index 19601586..71a6462f 100644 Binary files a/test/functional/cypress-image-diff-screenshots/baseline/visual.cy.ts-avatar-zoom-0.5-side-[1].png and b/test/functional/cypress-image-diff-screenshots/baseline/visual.cy.ts-avatar-zoom-0.5-side-[1].png differ diff --git a/test/functional/cypress-image-diff-screenshots/baseline/visual.cy.ts-avatar-zoom-3-side-[-1].png b/test/functional/cypress-image-diff-screenshots/baseline/visual.cy.ts-avatar-zoom-3-side-[-1].png deleted file mode 100644 index 0b3b493f..00000000 Binary files a/test/functional/cypress-image-diff-screenshots/baseline/visual.cy.ts-avatar-zoom-3-side-[-1].png and /dev/null differ diff --git a/test/functional/cypress-image-diff-screenshots/baseline/visual.cy.ts-avatar-zoom-3-side-[1].png b/test/functional/cypress-image-diff-screenshots/baseline/visual.cy.ts-avatar-zoom-3-side-[1].png index 247ae7a1..b7427eea 100644 Binary files a/test/functional/cypress-image-diff-screenshots/baseline/visual.cy.ts-avatar-zoom-3-side-[1].png and b/test/functional/cypress-image-diff-screenshots/baseline/visual.cy.ts-avatar-zoom-3-side-[1].png differ diff --git a/test/functional/cypress/e2e/visual.cy.ts b/test/functional/cypress/e2e/visual.cy.ts index cf70f4b1..de0726ab 100644 --- a/test/functional/cypress/e2e/visual.cy.ts +++ b/test/functional/cypress/e2e/visual.cy.ts @@ -8,7 +8,7 @@ const VISUAL_TEST_CONFIG = Object.freeze({ back: -1 }, testUrl: 'http://localhost:3000/test', - modelUrl: 'https://api.readyplayer.dev/v3/avatars/65f82db95462c113fe5c5bb6.glb', + modelUrl: 'https://api.readyplayer.dev/v3/avatars/66e06ad13f0d3ce06690b656.glb', testThreshold: 0.05 });