Merge pull request #53 from readyplayerme/fix/unable-to-move-camera

Fix/unable to move camera

src/components/Models/Model/Model.component.tsx

@@ -1,4 +1,4 @@
-import React, { FC, Ref, useEffect, useState, useCallback } from 'react';
+import React, { FC, Ref, useEffect, useState, useCallback, useMemo } from 'react';
 import { Group, Mesh } from 'three';
 import { normaliseMaterialsConfig, triggerCallback } from 'src/services';
 import { useGraph, useThree } from '@react-three/fiber';
@@ -20,13 +20,13 @@ export const Model: FC<ModelProps> = ({ scene, scale = 1, modelRef, onLoaded, on
   const [isTouching, setIsTouching] = useState(false);
   const [touchEvent, setTouchEvent] = useState<TouchEvent | null>(null);
   const setTouchingOn = (e: MouseEvent | TouchEvent) => {
-    if (e instanceof TouchEvent) {
+    if (window.TouchEvent && e instanceof TouchEvent) {
       setTouchEvent(e as TouchEvent);
     }
     setIsTouching(true);
   };
   const setTouchingOff = (e: MouseEvent | TouchEvent) => {
-    if (e instanceof TouchEvent) {
+    if (window.TouchEvent && e instanceof TouchEvent) {
       setTouchEvent(null);
     }
     setIsTouching(false);
@@ -38,7 +38,7 @@ export const Model: FC<ModelProps> = ({ scene, scale = 1, modelRef, onLoaded, on
         scene.rotation.y += event.movementX * ROTATION_STEP;
       }
 
-      if (isTouching && event instanceof TouchEvent) {
+      if (isTouching && window.TouchEvent && event instanceof TouchEvent) {
         /* eslint-disable-next-line no-param-reassign */
         const movementX = Math.round(event.touches[0].pageX - touchEvent!.touches[0].pageX);
         /* eslint-disable-next-line no-param-reassign */
@@ -66,13 +66,13 @@ export const Model: FC<ModelProps> = ({ scene, scale = 1, modelRef, onLoaded, on
 
   useEffect(() => {
     gl.domElement.addEventListener('mousedown', setTouchingOn);
-    gl.domElement.addEventListener('touchstart', setTouchingOn);
+    gl.domElement.addEventListener('touchstart', setTouchingOn, { passive: true });
     gl.domElement.addEventListener('mouseup', setTouchingOff);
     gl.domElement.addEventListener('touchend', setTouchingOff);
     gl.domElement.addEventListener('touchcancel', setTouchingOff);
 
     gl.domElement.addEventListener('mousemove', onTouchMove);
-    gl.domElement.addEventListener('touchmove', onTouchMove);
+    gl.domElement.addEventListener('touchmove', onTouchMove, { passive: true });
 
     return () => {
       gl.domElement.removeEventListener('mousedown', setTouchingOn);
@@ -86,10 +86,15 @@ export const Model: FC<ModelProps> = ({ scene, scale = 1, modelRef, onLoaded, on
     };
   });
 
+  const spawnComponent = useMemo(
+    () => <Spawn avatar={scene} onSpawnFinish={onSpawnAnimationFinish} />,
+    [onSpawnAnimationFinish]
+  );
+
   return (
     <group ref={modelRef} dispose={null} rotation={[0, 0, 0]}>
       <primitive object={scene} scale={scale} />
-      <Spawn avatar={scene} onSpawnFinish={onSpawnAnimationFinish} />
+      {spawnComponent}
     </group>
   );
 };

src/types/index.ts

@@ -141,8 +141,8 @@ export type EffectConfiguration = {
   /**
    * Enables ambient occlusion for the current scene.
    */
-  ambientOcclusion?: boolean
-}
+  ambientOcclusion?: boolean;
+};
 
 export interface SpawnState {
   /**