chore: add resize to the worker example

yomotsu · Feb 15, 2024 · 72d9892 · 72d9892
1 parent a8e1ef1
commit 72d9892
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 57 deletions.
diff --git a/examples/PseudoElement.js b/examples/PseudoElement.js
@@ -47,14 +47,17 @@ export class PseudoElement extends EventDispatcher {
 
 	/**
 	 * Updates the PseudoElement size based on a given bound.
-	 * @param {DOMRect} bound The new bound.
+	 * @param {number} x The new bound x.
+	 * @param {number} y The new bound y.
+	 * @param {number} width The new bound width.
+	 * @param {number} height The new bound height.
 	 */
-	update( bound ) {
+	update( x, y, width, height ) {
 
-		this._domRect.x = bound.x;
-		this._domRect.y = bound.y;
-		this._domRect.width = bound.width;
-		this._domRect.height = bound.height;
+		this._domRect.x = x;
+		this._domRect.y = y;
+		this._domRect.width = width;
+		this._domRect.height = height;
 
 	}
 

diff --git a/examples/worker.html b/examples/worker.html
@@ -8,92 +8,107 @@
 </head>
 <body>
 <div class="info">
-  <p><a href="https://github.com/yomotsu/camera-controls">GitHub repo</a></p>
-  <button id="resetButton">reset</button>
+	<p><a href="https://github.com/yomotsu/camera-controls">GitHub repo</a></p>
+	<button id="resetButton">reset</button>
 </div>
 
 <canvas></canvas>
 
 <script type="module">
 const canvas = document.querySelector( 'canvas' );
-canvas.width = window.innerWidth;
-canvas.height = window.innerHeight;
-const canvasBounds = canvas.getBoundingClientRect();
 const offscreenCanvas = canvas.transferControlToOffscreen();
-
 const worker = new Worker( './worker.js', { type: 'module' } );
+
+const { x, y } = canvas.getBoundingClientRect();
 worker.postMessage( {
-  action: 'init',
-  payload: {
-    canvas: offscreenCanvas,
-    left: canvasBounds.left,
-    top: canvasBounds.top,
-    width: canvasBounds.width,
-    height: canvasBounds.height,
-  } },
-  [ offscreenCanvas ]
+	action: 'init',
+	payload: {
+		canvas: offscreenCanvas,
+		x,
+		y,
+		width: window.innerWidth,
+		height: window.innerHeight,
+	} },
+	[ offscreenCanvas ]
 );
 
+const onResize = () => {
+
+	const { x, y } = canvas.getBoundingClientRect();
+
+	worker.postMessage( {
+		action: 'resize',
+		payload: {
+			x,
+			y,
+			width: window.innerWidth,
+			height: window.innerHeight,
+		}
+	} );
+
+};
+
+window.addEventListener( 'resize', onResize );
+
 const onPointerDown = ( event ) => {
 
-  const pseudoPointerEvent = {
-    pointerId: event.pointerId,
-    pointerType: event.pointerType,
-    clientX: event.clientX,
-    clientY: event.clientY,
-    buttons: event.buttons,
-  };
+	const pseudoPointerEvent = {
+		pointerId: event.pointerId,
+		pointerType: event.pointerType,
+		clientX: event.clientX,
+		clientY: event.clientY,
+		buttons: event.buttons,
+	};
 
-  canvas.ownerDocument.removeEventListener( 'pointermove', onPointerMove, { passive: false } );
-  canvas.ownerDocument.removeEventListener( 'pointerup', onPointerUp );
+	canvas.ownerDocument.removeEventListener( 'pointermove', onPointerMove, { passive: false } );
+	canvas.ownerDocument.removeEventListener( 'pointerup', onPointerUp );
 
-  canvas.ownerDocument.addEventListener( 'pointermove', onPointerMove, { passive: false } );
-  canvas.ownerDocument.addEventListener( 'pointerup', onPointerUp );
+	canvas.ownerDocument.addEventListener( 'pointermove', onPointerMove, { passive: false } );
+	canvas.ownerDocument.addEventListener( 'pointerup', onPointerUp );
 
-  worker.postMessage( { action: 'pointerdown', payload: { event: pseudoPointerEvent } } );
+	worker.postMessage( { action: 'pointerdown', payload: { event: pseudoPointerEvent } } );
 
 };
 
 const onPointerMove = ( event ) => {
 
-  if ( event.cancelable ) event.preventDefault();
+	if ( event.cancelable ) event.preventDefault();
 
-  const pseudoPointerEvent = {
-    pointerId: event.pointerId,
-    pointerType: event.pointerType,
-    clientX: event.clientX,
-    clientY: event.clientY,
-    movementX: event.movementX,
-    movementY: event.movementY,
-    buttons: event.buttons,
-  }
+	const pseudoPointerEvent = {
+		pointerId: event.pointerId,
+		pointerType: event.pointerType,
+		clientX: event.clientX,
+		clientY: event.clientY,
+		movementX: event.movementX,
+		movementY: event.movementY,
+		buttons: event.buttons,
+	}
 
-  worker.postMessage( { action: 'pointermove', payload: { event: pseudoPointerEvent } } );
+	worker.postMessage( { action: 'pointermove', payload: { event: pseudoPointerEvent } } );
 
 };
 
 const onPointerUp = ( event ) => {
 
-  const pseudoPointerEvent = {
-    pointerId: event.pointerId,
-    pointerType: event.pointerType,
-  };
+	const pseudoPointerEvent = {
+		pointerId: event.pointerId,
+		pointerType: event.pointerType,
+	};
 
-  worker.postMessage( { action: 'pointerup', payload: { event: pseudoPointerEvent } } );
+	worker.postMessage( { action: 'pointerup', payload: { event: pseudoPointerEvent } } );
 
 }
 
 const endDragging = () => {
 
-  canvas.ownerDocument.removeEventListener( 'pointermove', onPointerMove, { passive: false } );
-  canvas.ownerDocument.removeEventListener( 'pointerup', onPointerUp );
+	canvas.ownerDocument.removeEventListener( 'pointermove', onPointerMove, { passive: false } );
+	canvas.ownerDocument.removeEventListener( 'pointerup', onPointerUp );
 
 };
 
 worker.addEventListener( 'message', ( { data } ) => data?.action === 'controlend' && endDragging() );
 canvas.addEventListener( 'pointerdown', onPointerDown );
 
-
 resetButton.addEventListener( 'click', () => worker.postMessage( { action: 'reset' } ) );
 
 // debug log

diff --git a/examples/worker.js b/examples/worker.js
@@ -6,6 +6,9 @@ CameraControls.install( { THREE } );
 
 // DOM element doesn't exist in WebWorker. use a virtual element in CameraControls instead.
 const pseudoElement = new PseudoElement();
+let scene;
+let camera;
+let renderer;
 let cameraControls;
 
 self.onmessage = ( { data } ) => {
@@ -16,17 +19,17 @@ self.onmessage = ( { data } ) => {
 
 		case 'init': {
 
-			const { canvas, left, top, width, height } = payload;
+			const { canvas, x, y, width, height } = payload;
 			canvas.style = { width: '', height: '' };
 
 			const clock = new THREE.Clock();
-			const scene = new THREE.Scene();
-			const camera = new THREE.PerspectiveCamera( 60, width / height, 0.01, 100 );
+			scene = new THREE.Scene();
+			camera = new THREE.PerspectiveCamera( 60, width / height, 0.01, 100 );
 			camera.position.set( 0, 0, 5 );
-			const renderer = new THREE.WebGLRenderer( { canvas } );
+			renderer = new THREE.WebGLRenderer( { canvas } );
 			renderer.setSize( width, height );
 
-			pseudoElement.update( { left, top, width, height } );
+			pseudoElement.update( x, y, width, height );
 			cameraControls = new CameraControls( camera, pseudoElement, self );
 			cameraControls.addEventListener( 'controlend', () => self.postMessage( { action: 'controlend' } ) );
 
@@ -65,6 +68,18 @@ self.onmessage = ( { data } ) => {
 
 		}
 
+		case 'resize': {
+
+			const { x, y, width, height } = payload;
+			pseudoElement.update( x, y, width, height );
+			renderer.setSize( width, height );
+			camera.aspect = width / height;
+			camera.updateProjectionMatrix();
+			renderer.render( scene, camera );
+			break;
+
+		}
+
 		case 'pointerdown': {
 
 			const { event } = payload;