diff --git a/src/components/BaseCanvas/BaseCanvas.component.tsx b/src/components/BaseCanvas/BaseCanvas.component.tsx index 8f6194f8..095e4d41 100644 --- a/src/components/BaseCanvas/BaseCanvas.component.tsx +++ b/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 = ({ children = undefined, fov = 50, position = new Vector3(0, 0, 5), style, - dpr = [window.devicePixelRatio * 0.5, 2], + dpr = [BASE_DPR * 0.5, 2], className }) => ( = ({ scene, scale = 1, modelRef, onLoaded, on const [isTouching, setIsTouching] = useState(false); const [touchEvent, setTouchEvent] = useState(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 = ({ 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 = ({ 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); }; }); diff --git a/src/services/Client.service.ts b/src/services/Client.service.ts new file mode 100644 index 00000000..832d465c --- /dev/null +++ b/src/services/Client.service.ts @@ -0,0 +1 @@ +export const hasWindow = typeof window !== 'undefined';