Merge pull request #58 from readyplayerme/hotfix/window-ref

fix: enable toggling ambient occlusion in showcase

src/components/BaseCanvas/BaseCanvas.component.tsx

@@ -2,6 +2,7 @@ import React, { ReactNode, FC, CSSProperties } from 'react';
 import { Canvas, Dpr } from '@react-three/fiber';
 import { Vector3 } from 'three';
 import { CameraProps } from 'src/types';
+import { hasWindow } from 'src/services/Client.service';
 import styles from './BaseCanvas.module.scss';
 
 interface BaseCanvasProps extends CameraProps {
@@ -12,12 +13,14 @@ interface BaseCanvasProps extends CameraProps {
   className?: string;
 }
 
+const BASE_DPR = hasWindow ? window.devicePixelRatio : 1;
+
 export const BaseCanvas: FC<BaseCanvasProps> = ({
   children = undefined,
   fov = 50,
   position = new Vector3(0, 0, 5),
   style,
-  dpr = [window.devicePixelRatio * 0.5, 2],
+  dpr = [BASE_DPR * 0.5, 2],
   className
 }) => (
   <Canvas

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

@@ -2,6 +2,7 @@ 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';
+import { hasWindow } from 'src/services/Client.service';
 import { BaseModelProps } from 'src/types';
 import { Spawn } from '../../Spawn/Spawn';
 
@@ -20,13 +21,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 (window.TouchEvent && e instanceof TouchEvent) {
+    if (hasWindow && window.TouchEvent && e instanceof TouchEvent) {
       setTouchEvent(e as TouchEvent);
     }
     setIsTouching(true);
   };
   const setTouchingOff = (e: MouseEvent | TouchEvent) => {
-    if (window.TouchEvent && e instanceof TouchEvent) {
+    if (hasWindow && window.TouchEvent && e instanceof TouchEvent) {
       setTouchEvent(null);
     }
     setIsTouching(false);
@@ -38,7 +39,7 @@ export const Model: FC<ModelProps> = ({ scene, scale = 1, modelRef, onLoaded, on
         scene.rotation.y += event.movementX * ROTATION_STEP;
       }
 
-      if (isTouching && window.TouchEvent && event instanceof TouchEvent) {
+      if (hasWindow && 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 */
@@ -67,21 +68,21 @@ export const Model: FC<ModelProps> = ({ scene, scale = 1, modelRef, onLoaded, on
   useEffect(() => {
     gl.domElement.addEventListener('mousedown', setTouchingOn);
     gl.domElement.addEventListener('touchstart', setTouchingOn, { passive: true });
-    gl.domElement.addEventListener('mouseup', setTouchingOff);
+    window.addEventListener('mouseup', setTouchingOff);
     gl.domElement.addEventListener('touchend', setTouchingOff);
     gl.domElement.addEventListener('touchcancel', setTouchingOff);
 
-    gl.domElement.addEventListener('mousemove', onTouchMove);
+    window.addEventListener('mousemove', onTouchMove);
     gl.domElement.addEventListener('touchmove', onTouchMove, { passive: true });
 
     return () => {
       gl.domElement.removeEventListener('mousedown', setTouchingOn);
       gl.domElement.removeEventListener('touchstart', setTouchingOn);
-      gl.domElement.removeEventListener('mouseup', setTouchingOff);
+      window.removeEventListener('mouseup', setTouchingOff);
       gl.domElement.removeEventListener('touchend', setTouchingOff);
       gl.domElement.removeEventListener('touchcancel', setTouchingOff);
 
-      gl.domElement.removeEventListener('mousemove', onTouchMove);
+      window.removeEventListener('mousemove', onTouchMove);
       gl.domElement.removeEventListener('touchmove', onTouchMove);
     };
   });

src/services/Client.service.ts

@@ -0,0 +1 @@
+export const hasWindow = typeof window !== 'undefined';