trame vtk wasm & space mouse

Web
1

How do I enable vtk wasm, trame with space mouse support in the browser?

2

I am not sure how the events from the space mouse are presented to the browser.

But it is very likely that the mouse binding from wasm are incomplete and therefore do not currently handle the space mouse. I’m not sure is someone at Kitware has a space mouse.

@jaswantp do you know where the mouse binding is happening in JS for WASM?

3

@Sebastien_Jourdain , @jaswantp — I have this code snippet that uses a gamepad to control an acrball camera. How do add custom java script to the render loop for vtk wasm and then udpate the camera based on this code?




var prevTx = 0.0;
var prevTy = 0.0;
var prevTz = 0.0;
var prevRx = 0.0;
var prevRy = 0.0;
var prevRz = 0.0;


function handleGamepadInput() {
	if (!isWindowActive) {
		// If window is not active, don't process input
		return;
	}

	if (!camera)
	{
		return;
	
	}

	var gamepads = navigator.getGamepads();
	var gamepad = null;
	
	for (var i = 0; i < gamepads.length; i++) {
	  if (gamepads[i] && gamepads[i].id.toLowerCase().includes('spacemouse')) {
		gamepad = gamepads[i];
		break;
	  }
	}	
	
	if (gamepad) {
		if (gamepad.buttons[0].pressed) {
			camera.fitView();
			setHudText("Fit View");
			somethingchanged = true;	
			return;		
		}
		var Tx = gamepad.axes[0];
		var Ty = gamepad.axes[1];
		var Tz = gamepad.axes[2];
		var Rx = gamepad.axes[3];
		var Ry = gamepad.axes[4];
		var Rz = gamepad.axes[5];

		var ROTATIONAL_SCALE = 50.0;
		var TRANSLATIONAL_SCALE = 0.1;

		var RzoomPenalty = Math.exp(-1.0/(camera.getZoom()*.1));
		var TzoomPenalty = Math.exp(-1.0/(camera.getZoom()*.1));

		Rx *=  ROTATIONAL_SCALE*RzoomPenalty;
		Ry *=  ROTATIONAL_SCALE*RzoomPenalty;
		Rz *= -ROTATIONAL_SCALE*RzoomPenalty;
		Tx *=  TRANSLATIONAL_SCALE*TzoomPenalty;
		Ty *=  1.0;//TRANSLATIONAL_SCALE*TzoomPenalty;
		Tz *=  -TRANSLATIONAL_SCALE*TzoomPenalty;

		var SMOOTHING_FACTOR = 0.1;

		function smoothValue(prev, current) {
			return prev + (current - prev) * SMOOTHING_FACTOR;
		}

		Tx = smoothValue(prevTx, Tx);
		Ty = smoothValue(prevTy, Ty);
		Tz = smoothValue(prevTz, Tz);
		Rx = smoothValue(prevRx, Rx);
		Ry = smoothValue(prevRy, Ry);
		Rz = smoothValue(prevRz, Rz);
		
		function shouldMove(prev, current) {
			var delta = Math.abs(prev - current);
			if (delta < 1e-6) 
				return false;
			delta/=current;
			if (delta < 0.01) {
				return false;
			}
			return true;
		}

		if (shouldMove(prevTx, Tx) || shouldMove(prevTy, Ty) || shouldMove(prevTz, Tz) || shouldMove(prevRx, Rx) || shouldMove(prevRy, Ry) || shouldMove(prevRz, Rz))
		{


			setPZRing();			

			// Create a rotation matrix from the Rx, Ry, Rz values
			// Create a quaternion for each axis rotation
			let quatX = quat.create();
			let quatY = quat.create();
			let quatZ = quat.create();

			// Set the quaternions to represent the desired rotations
			quat.rotateX(quatX, quatX, glMatrix.toRadian(Rx));
			quat.rotateY(quatY, quatY, glMatrix.toRadian(Rz));
			quat.rotateZ(quatZ, quatZ, glMatrix.toRadian(Ry));

			// Combine the rotations by multiplying the quaternions
			let rotQuat = quat.create();
			quat.multiply(rotQuat, quatZ, quatY);
			quat.multiply(rotQuat, rotQuat, quatX);

			// Translate to the point (0.5, 0.5, 0.5)
			let translationTo = vec3.set(vec3.create(), -0.5, -0.5, -0.5);
			let translationMatrixTo = mat4.fromTranslation(mat4.create(), translationTo);

			// Translate back from the point (0.5, 0.5, 0.5)
			let translationFrom = vec3.set(vec3.create(), 0.5, 0.5, 0.5);
			let translationMatrixFrom = mat4.fromTranslation(mat4.create(), translationFrom);

			// Apply the translations and rotation
			mat4.multiply(camera.translation, translationMatrixFrom, camera.translation);
			quat.multiply(camera.rotation, rotQuat, camera.rotation);
			mat4.multiply(camera.translation, translationMatrixTo, camera.translation);

			// Apply the Tx, Ty, Tz translations
			var vt = vec3.set(vec3.create(), Tx, Tz, Ty);
			var t = mat4.fromTranslation(mat4.create(), vt);
			camera.translation = mat4.mul(camera.translation, t, camera.translation);

			if (camera.translation[14] >= -0.2) {
				camera.translation[14] = -0.2;
			}

			var delta = vec4.set(vec4.create(), Tx * camera.invScreen[0] * Math.abs(camera.translation[14]),
				Tz * camera.invScreen[1] * Math.abs(camera.translation[14]), 0, 0);
			var worldDelta = vec4.transformMat4(vec4.create(), delta, camera.invCamera);
			var translation = mat4.fromTranslation(mat4.create(), worldDelta);
			camera.centerTranslation = mat4.mul(camera.centerTranslation, translation, camera.centerTranslation);



			// Update the camera matrix
			camera.updateCameraMatrix();
			prevTx = Tx;
			prevTy = Ty;
			prevTz = Tz;
			prevRx = Rx;
			prevRy = Ry;
			prevRz = Rz;
			somethingchanged = true;
		}
	}

}