diff --git a/src/components/Models/Model/Model.component.tsx b/src/components/Models/Model/Model.component.tsx index f3f20e91..8045320b 100644 --- a/src/components/Models/Model/Model.component.tsx +++ b/src/components/Models/Model/Model.component.tsx @@ -1,6 +1,6 @@ import React, { FC, Ref, useEffect, useState, useCallback, useMemo } from 'react'; import { Group, Mesh } from 'three'; -import { normaliseMaterialsConfig, triggerCallback } from 'src/services'; +import { normaliseMaterialsConfig, triggerCallback, usePersistantRotation } from 'src/services'; import { useGraph, useThree } from '@react-three/fiber'; import { hasWindow } from 'src/services/Client.service'; import { BaseModelProps } from 'src/types'; @@ -32,6 +32,9 @@ export const Model: FC = ({ scene, scale = 1, modelRef, onLoaded, on } setIsTouching(false); }; + + usePersistantRotation(scene); + const onTouchMove = useCallback( (event: MouseEvent | TouchEvent) => { if (isTouching && event instanceof MouseEvent) { @@ -47,7 +50,7 @@ export const Model: FC = ({ scene, scale = 1, modelRef, onLoaded, on setTouchEvent(event); } }, - [isTouching, touchEvent] + [isTouching, touchEvent, scene] ); normaliseMaterialsConfig(materials, bloom); diff --git a/src/services/Models.service.tsx b/src/services/Models.service.tsx index 70cd13e1..467c4f8e 100644 --- a/src/services/Models.service.tsx +++ b/src/services/Models.service.tsx @@ -9,7 +9,8 @@ import { Euler, Vector3, BufferGeometry, - Skeleton + Skeleton, + Group } from 'three'; import { useFrame } from '@react-three/fiber'; import type { ObjectMap, SkinnedMeshProps } from '@react-three/fiber'; @@ -214,29 +215,31 @@ const dracoLoader = new DRACOLoader(); dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.5/'); loader.setDRACOLoader(dracoLoader); -export const useGltfLoader = (source: Blob | string): GLTF => { - const gltfRef = useRef(); - return suspend( +export const useGltfLoader = (source: Blob | string): GLTF => + suspend( async () => { if (source instanceof Blob) { const buffer = await source.arrayBuffer(); return (await loader.parseAsync(buffer, '')) as unknown as GLTF; } - const gltf = await loader.loadAsync(source); - - if (gltfRef.current) { - gltf.scene.rotation.y = gltfRef.current.scene.rotation.y; - } - - gltfRef.current = gltf; - - return gltf; + return loader.loadAsync(source); }, [source], { lifespan: 100 } ); -}; + +export function usePersistantRotation(scene: Group) { + const refToPreviousScene = useRef(scene); + + useEffect(() => { + if (refToPreviousScene.current !== scene) { + // eslint-disable-next-line no-param-reassign + scene.rotation.y = refToPreviousScene.current.rotation.y; + refToPreviousScene.current = scene; + } + }, [scene]); +} export class Transform { constructor() {