minecraft-renderer 0.1.78 → 0.1.80

package/src/three/waypointSprite.ts

@@ -21,19 +21,19 @@ export const WAYPOINT_CONFIG = {
   LAYOUT: {
     DOT_Y: 0.3,
     NAME_Y: 0.45,
-    DISTANCE_Y: 0.55,
+    DISTANCE_Y: 0.55
   },
   // Multiplier for canvas internal resolution to keep text crisp
   CANVAS_SCALE: 2,
   ARROW: {
     enabledDefault: false,
     pixelSize: 50,
-    paddingPx: 50,
+    paddingPx: 50
   },
   // Default visual scale factor (can be overridden globally or per-waypoint)
   DEFAULT_VISUAL_SCALE: 1,
   // Default opacity (can be overridden globally or per-waypoint)
-  DEFAULT_OPACITY: 1,
+  DEFAULT_OPACITY: 1
 }
 
 export type WaypointSprite = {
@@ -43,12 +43,7 @@ export type WaypointSprite = {
   enableOffscreenArrow: (enabled: boolean) => void
   setArrowParent: (parent: THREE.Object3D | null) => void
   // Convenience combined updater
-  updateForCamera: (
-    cameraPosition: THREE.Vector3,
-    camera: THREE.PerspectiveCamera,
-    viewportWidthPx: number,
-    viewportHeightPx: number
-  ) => boolean
+  updateForCamera: (cameraPosition: THREE.Vector3, camera: THREE.PerspectiveCamera, viewportWidthPx: number, viewportHeightPx: number) => boolean
   // Utilities
   setColor: (color: number) => void
   setLabel: (label?: string) => void
@@ -58,33 +53,35 @@ export type WaypointSprite = {
   dispose: () => void
 }
 
-export function createWaypointSprite (options: {
-  position: THREE.Vector3 | { x: number, y: number, z: number },
-  color?: number,
-  label?: string,
-  depthTest?: boolean,
+export function createWaypointSprite(options: {
+  position: THREE.Vector3 | { x: number; y: number; z: number }
+  color?: number
+  label?: string
+  depthTest?: boolean
   // Y offset in world units used by updateScaleWorld only (screen-pixel API ignores this)
-  labelYOffset?: number,
-  metadata?: any,
-  visualScale?: number,
-  opacity?: number,
+  labelYOffset?: number
+  metadata?: any
+  visualScale?: number
+  opacity?: number
 }): WaypointSprite {
-  let displayColor = options.color ?? 0xFF_00_00
+  let displayColor = options.color ?? 0xff_00_00
   const depthTest = options.depthTest ?? false
 
   // Get visual scale from options, metadata, server metadata, or default
   // Priority: options.visualScale > metadata.visualScale > window.serverMetadata?.waypointVisualScale > DEFAULT
-  const visualScale = options.visualScale
-    ?? options.metadata?.visualScale
-    ?? (typeof window === 'undefined' ? undefined : (window as any).serverMetadata?.waypointVisualScale)
-    ?? WAYPOINT_CONFIG.DEFAULT_VISUAL_SCALE
+  const visualScale =
+    options.visualScale ??
+    options.metadata?.visualScale ??
+    (typeof window === 'undefined' ? undefined : (window as any).serverMetadata?.waypointVisualScale) ??
+    WAYPOINT_CONFIG.DEFAULT_VISUAL_SCALE
 
   // Get opacity from options, metadata, server metadata, or default
   // Priority: options.opacity > metadata.opacity > window.serverMetadata?.waypointOpacity > DEFAULT
-  const opacity = options.opacity
-    ?? options.metadata?.opacity
-    ?? (typeof window === 'undefined' ? undefined : (window as any).serverMetadata?.waypointOpacity)
-    ?? WAYPOINT_CONFIG.DEFAULT_OPACITY
+  const opacity =
+    options.opacity ??
+    options.metadata?.opacity ??
+    (typeof window === 'undefined' ? undefined : (window as any).serverMetadata?.waypointOpacity) ??
+    WAYPOINT_CONFIG.DEFAULT_OPACITY
 
   const labelCanvas = createCanvas(getLabelCanvasSize(), getLabelCanvasSize())
   drawCombinedOntoCanvas(labelCanvas, displayColor, options.label ?? '', '0m', visualScale)
@@ -98,7 +95,7 @@ export function createWaypointSprite (options: {
     transparent: true,
     opacity: 1,
     depthTest,
-    depthWrite: false,
+    depthWrite: false
   })
   const sprite = new THREE.Sprite(material)
   sprite.position.set(0, 0, 0)
@@ -122,11 +119,11 @@ export function createWaypointSprite (options: {
   const { x, y, z } = options.position
   group.position.set(x, y, z)
 
-  function refreshLabelTexture () {
+  function refreshLabelTexture() {
     labelTexture.needsUpdate = true
   }
 
-  function paintArrowOnCanvas () {
+  function paintArrowOnCanvas() {
     if (!arrowCanvas || !arrowCtx) return
     const size = arrowCanvas.width
     arrowCtx.clearRect(0, 0, size, size)
@@ -144,7 +141,7 @@ export function createWaypointSprite (options: {
     if (arrowTexture) arrowTexture.needsUpdate = true
   }
 
-  function setColor (newColor: number) {
+  function setColor(newColor: number) {
     displayColor = newColor
     lastDistanceText = '0m'
     lastDistanceBucket = 0
@@ -153,13 +150,13 @@ export function createWaypointSprite (options: {
     if (arrowSprite) paintArrowOnCanvas()
   }
 
-  function setLabel (newLabel?: string) {
+  function setLabel(newLabel?: string) {
     currentLabel = newLabel ?? ''
     drawCombinedOntoCanvas(labelCanvas, displayColor, currentLabel, lastDistanceText, visualScale)
     refreshLabelTexture()
   }
 
-  function updateDistanceText (label: string, distanceText: string) {
+  function updateDistanceText(label: string, distanceText: string) {
     if (distanceText === lastDistanceText) {
       return
     }
@@ -169,27 +166,22 @@ export function createWaypointSprite (options: {
     refreshLabelTexture()
   }
 
-  function setVisible (visible: boolean) {
+  function setVisible(visible: boolean) {
     sprite.visible = visible
   }
 
-  function setPosition (nx: number, ny: number, nz: number) {
+  function setPosition(nx: number, ny: number, nz: number) {
     group.position.set(nx, ny, nz)
   }
 
-  function updateScaleScreenPixels (
-    cameraPosition: THREE.Vector3,
-    cameraFov: number,
-    distance: number,
-    viewportHeightPx: number
-  ) {
-    const vFovRad = cameraFov * Math.PI / 180
+  function updateScaleScreenPixels(cameraPosition: THREE.Vector3, cameraFov: number, distance: number, viewportHeightPx: number) {
+    const vFovRad = (cameraFov * Math.PI) / 180
     const worldUnitsPerScreenHeightAtDist = Math.tan(vFovRad / 2) * 2 * distance
-    const scale = worldUnitsPerScreenHeightAtDist * (WAYPOINT_CONFIG.TARGET_SCREEN_PX * visualScale / viewportHeightPx)
+    const scale = worldUnitsPerScreenHeightAtDist * ((WAYPOINT_CONFIG.TARGET_SCREEN_PX * visualScale) / viewportHeightPx)
     sprite.scale.set(scale, scale, 1)
   }
 
-  function ensureArrow () {
+  function ensureArrow() {
     if (arrowSprite) return
     const size = 128
     arrowCanvas = createCanvas(size, size)
@@ -206,22 +198,18 @@ export function createWaypointSprite (options: {
     if (arrowParent) arrowParent.add(arrowSprite)
   }
 
-  function enableOffscreenArrow (enabled: boolean) {
+  function enableOffscreenArrow(enabled: boolean) {
     arrowEnabled = enabled
     if (!enabled && arrowSprite) arrowSprite.visible = false
   }
 
-  function setArrowParent (parent: THREE.Object3D | null) {
+  function setArrowParent(parent: THREE.Object3D | null) {
     if (arrowSprite?.parent) arrowSprite.parent.remove(arrowSprite)
     arrowParent = parent
     if (arrowSprite && parent) parent.add(arrowSprite)
   }
 
-  function updateOffscreenArrow (
-    camera: THREE.PerspectiveCamera,
-    viewportWidthPx: number,
-    viewportHeightPx: number
-  ): boolean {
+  function updateOffscreenArrow(camera: THREE.PerspectiveCamera, viewportWidthPx: number, viewportHeightPx: number): boolean {
     if (!arrowEnabled) return true
     ensureArrow()
     if (!arrowSprite) return true
@@ -246,7 +234,7 @@ export function createWaypointSprite (options: {
     const y = toWp.dot(upCam)
 
     const aspect = viewportWidthPx / viewportHeightPx
-    const vFovRad = camera.fov * Math.PI / 180
+    const vFovRad = (camera.fov * Math.PI) / 180
     const hFovRad = 2 * Math.atan(Math.tan(vFovRad / 2) * aspect)
 
     // Determine if waypoint is inside view frustum using angular checks
@@ -294,8 +282,8 @@ export function createWaypointSprite (options: {
 
     // Apply padding in pixel space by clamping
     const padding = WAYPOINT_CONFIG.ARROW.paddingPx
-    const pxX = ((ndcX + 1) * 0.5) * viewportWidthPx
-    const pxY = ((1 - ndcY) * 0.5) * viewportHeightPx
+    const pxX = (ndcX + 1) * 0.5 * viewportWidthPx
+    const pxY = (1 - ndcY) * 0.5 * viewportHeightPx
     const clampedPxX = Math.min(Math.max(pxX, padding), viewportWidthPx - padding)
     const clampedPxY = Math.min(Math.max(pxY, padding), viewportHeightPx - padding)
     ndcX = (clampedPxX / viewportWidthPx) * 2 - 1
@@ -305,7 +293,8 @@ export function createWaypointSprite (options: {
     const placeDist = Math.max(2, camera.near * 4)
     const halfPlaneHeight = Math.tan(vFovRad / 2) * placeDist
     const halfPlaneWidth = halfPlaneHeight * aspect
-    const pos = camPos.clone()
+    const pos = camPos
+      .clone()
       .add(forward.clone().multiplyScalar(placeDist))
       .add(right.clone().multiplyScalar(ndcX * halfPlaneWidth))
       .add(upCam.clone().multiplyScalar(ndcY * halfPlaneHeight))
@@ -320,21 +309,16 @@ export function createWaypointSprite (options: {
 
     // Constant pixel size for arrow (use fixed placement distance) with visual scale
     const worldUnitsPerScreenHeightAtDist = Math.tan(vFovRad / 2) * 2 * placeDist
-    const sPx = worldUnitsPerScreenHeightAtDist * (WAYPOINT_CONFIG.ARROW.pixelSize * visualScale / viewportHeightPx)
+    const sPx = worldUnitsPerScreenHeightAtDist * ((WAYPOINT_CONFIG.ARROW.pixelSize * visualScale) / viewportHeightPx)
     arrowSprite.scale.set(sPx, sPx, 1)
     return false
   }
 
-  function computeDistance (cameraPosition: THREE.Vector3): number {
+  function computeDistance(cameraPosition: THREE.Vector3): number {
     return cameraPosition.distanceTo(group.position)
   }
 
-  function updateForCamera (
-    cameraPosition: THREE.Vector3,
-    camera: THREE.PerspectiveCamera,
-    viewportWidthPx: number,
-    viewportHeightPx: number
-  ): boolean {
+  function updateForCamera(cameraPosition: THREE.Vector3, camera: THREE.PerspectiveCamera, viewportWidthPx: number, viewportHeightPx: number): boolean {
     const distance = computeDistance(cameraPosition)
     updateScaleScreenPixels(cameraPosition, camera.fov, distance, viewportHeightPx)
 
@@ -349,7 +333,7 @@ export function createWaypointSprite (options: {
     return onScreen
   }
 
-  function dispose () {
+  function dispose() {
     const mat = sprite.material
     mat.map?.dispose()
     mat.dispose()
@@ -378,28 +362,22 @@ export function createWaypointSprite (options: {
     updateDistanceText,
     setVisible,
     setPosition,
-    dispose,
+    dispose
   }
 }
 
 // Internal helpers
-function computeLabelCanvasLineScale (): number {
+function computeLabelCanvasLineScale(): number {
   const dpr = globalThis.devicePixelRatio || 1
   const effectiveDpr = Math.min(dpr, LABEL_CANVAS_MAX_DEVICE_PIXEL_RATIO)
   return WAYPOINT_CONFIG.CANVAS_SCALE * effectiveDpr
 }
 
-function getLabelCanvasSize (): number {
+function getLabelCanvasSize(): number {
   return Math.round(WAYPOINT_CONFIG.CANVAS_SIZE * computeLabelCanvasLineScale())
 }
 
-function drawCombinedOntoCanvas (
-  canvas: OffscreenCanvas,
-  color: number,
-  id: string,
-  distance: string,
-  visualScale: number
-): void {
+function drawCombinedOntoCanvas(canvas: OffscreenCanvas, color: number, id: string, distance: string, visualScale: number): void {
   const size = canvas.width
   const scale = computeLabelCanvasLineScale()
   const ctx = canvas.getContext('2d')!
@@ -443,17 +421,12 @@ function drawCombinedOntoCanvas (
 
 export const WaypointHelpers = {
   // World-scale constant size helper
-  computeWorldScale (distance: number, fixedReference = 10) {
+  computeWorldScale(distance: number, fixedReference = 10) {
     return Math.max(0.0001, distance / fixedReference)
   },
   // Screen-pixel constant size helper
-  computeScreenPixelScale (
-    camera: THREE.PerspectiveCamera,
-    distance: number,
-    pixelSize: number,
-    viewportHeightPx: number
-  ) {
-    const vFovRad = camera.fov * Math.PI / 180
+  computeScreenPixelScale(camera: THREE.PerspectiveCamera, distance: number, pixelSize: number, viewportHeightPx: number) {
+    const vFovRad = (camera.fov * Math.PI) / 180
     const worldUnitsPerScreenHeightAtDist = Math.tan(vFovRad / 2) * 2 * distance
     return worldUnitsPerScreenHeightAtDist * (pixelSize / viewportHeightPx)
   }

package/src/three/waypoints.ts

@@ -32,9 +32,7 @@ export class WaypointsRenderer {
   private lastUpdateTime = 0
   private readonly UPDATE_THROTTLE_MS = 16 // ~60fps max update rate
 
-  constructor(
-    private readonly worldRenderer: WorldRendererThree
-  ) {
+  constructor(private readonly worldRenderer: WorldRendererThree) {
     if (process.env.NODE_ENV !== 'production') {
       // this.addWaypoint('spawn', 0, 0, 0, { })
     }
@@ -60,8 +58,7 @@ export class WaypointsRenderer {
     for (const waypoint of this.waypoints.values()) {
       const waypointPos = new THREE.Vector3(waypoint.x, waypoint.y, waypoint.z)
       const distance = playerPos.distanceTo(waypointPos)
-      const visible = (!waypoint.minDistance || distance >= waypoint.minDistance) &&
-        (waypoint.maxDistance === Infinity || distance <= waypoint.maxDistance)
+      const visible = (!waypoint.minDistance || distance >= waypoint.minDistance) && (waypoint.maxDistance === Infinity || distance <= waypoint.maxDistance)
 
       waypoint.sprite.setVisible(visible)
 
@@ -90,17 +87,11 @@ export class WaypointsRenderer {
 
   // Removed sprite/label texture creation. Use utils/waypointSprite.ts
 
-  addWaypoint(
-    id: string,
-    x: number,
-    y: number,
-    z: number,
-    options: WaypointOptions = {}
-  ) {
+  addWaypoint(id: string, x: number, y: number, z: number, options: WaypointOptions = {}) {
     // Remove existing waypoint if it exists
     this.removeWaypoint(id)
 
-    const color = options.color ?? 0xFF_00_00
+    const color = options.color ?? 0xff_00_00
     const { label, metadata } = options
     const minDistance = options.minDistance ?? 0
     const maxDistance = options.maxDistance ?? Infinity
@@ -108,8 +99,8 @@ export class WaypointsRenderer {
     const sprite = createWaypointSprite({
       position: new THREE.Vector3(x, y, z),
       color,
-      label: (label || id),
-      metadata,
+      label: label || id,
+      metadata
     })
     sprite.enableOffscreenArrow(true)
     sprite.setArrowParent(this.waypointScene)
@@ -117,9 +108,15 @@ export class WaypointsRenderer {
     this.waypointScene.add(sprite.group)
 
     this.waypoints.set(id, {
-      id, x: x + 0.5, y: y + 0.5, z: z + 0.5, minDistance, maxDistance,
-      color, label,
-      sprite,
+      id,
+      x: x + 0.5,
+      y: y + 0.5,
+      z: z + 0.5,
+      minDistance,
+      maxDistance,
+      color,
+      label,
+      sprite
     })
   }
 
@@ -139,11 +136,11 @@ export class WaypointsRenderer {
   }
 
   testWaypoint() {
-    this.addWaypoint('Test Point', 0, 70, 0, { color: 0x00_FF_00, label: 'Test Point' })
-    this.addWaypoint('Spawn', 0, 64, 0, { color: 0xFF_FF_00, label: 'Spawn' })
-    this.addWaypoint('Far Point', 100, 70, 100, { color: 0x00_00_FF, label: 'Far Point' })
-    this.addWaypoint('Far Point 2', 180, 170, 100, { color: 0x00_00_FF, label: 'Far Point 2' })
-    this.addWaypoint('Far Point 3', 1000, 100, 1000, { color: 0x00_00_FF, label: 'Far Point 3' })
+    this.addWaypoint('Test Point', 0, 70, 0, { color: 0x00_ff_00, label: 'Test Point' })
+    this.addWaypoint('Spawn', 0, 64, 0, { color: 0xff_ff_00, label: 'Spawn' })
+    this.addWaypoint('Far Point', 100, 70, 100, { color: 0x00_00_ff, label: 'Far Point' })
+    this.addWaypoint('Far Point 2', 180, 170, 100, { color: 0x00_00_ff, label: 'Far Point 2' })
+    this.addWaypoint('Far Point 3', 1000, 100, 1000, { color: 0x00_00_ff, label: 'Far Point 3' })
   }
 
   getWaypoint(id: string): Waypoint | undefined {

package/src/three/world/cursorBlock.ts

@@ -29,7 +29,7 @@ export class CursorBlock {
   }
 
   cursorLineMaterial!: LineMaterial
-  interactionLines: null | { blockPos: Vec3, mesh: THREE.Group, shapePositions: BlocksShapes | undefined } = null
+  interactionLines: null | { blockPos: Vec3; mesh: THREE.Group; shapePositions: BlocksShapes | undefined } = null
   prevColor: string | undefined
   blockBreakMesh: THREE.Mesh
   breakTextures: THREE.Texture[] = []
@@ -37,12 +37,20 @@ export class CursorBlock {
   constructor(public readonly worldRenderer: WorldRendererThree) {
     // Initialize break mesh and textures
     const destroyStagesImages = [
-      destroyStage0, destroyStage1, destroyStage2, destroyStage3, destroyStage4,
-      destroyStage5, destroyStage6, destroyStage7, destroyStage8, destroyStage9
+      destroyStage0,
+      destroyStage1,
+      destroyStage2,
+      destroyStage3,
+      destroyStage4,
+      destroyStage5,
+      destroyStage6,
+      destroyStage7,
+      destroyStage8,
+      destroyStage9
     ]
 
     for (let i = 0; i < 10; i++) {
-      void loadThreeJsTextureFromUrl(destroyStagesImages[i]).then((texture) => {
+      void loadThreeJsTextureFromUrl(destroyStagesImages[i]).then(texture => {
         texture.magFilter = THREE.NearestFilter
         texture.minFilter = THREE.NearestFilter
         this.breakTextures.push(texture)
@@ -53,7 +61,7 @@ export class CursorBlock {
       transparent: true,
       blending: THREE.MultiplyBlending,
       premultipliedAlpha: true,
-      alphaTest: 0.5,
+      alphaTest: 0.5
     })
     this.blockBreakMesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), breakMaterial)
     this.blockBreakMesh.visible = false
@@ -92,14 +100,14 @@ export class CursorBlock {
             return inCreative ? 0x40_80_ff : 0x00_00_00
         }
       })(),
-      linewidth: Math.max(pixelRatio * 0.7, 1) * 2,
+      linewidth: Math.max(pixelRatio * 0.7, 1) * 2
       // dashed: true,
       // dashSize: 5,
     })
     this.prevColor = this.worldRenderer.worldRendererConfig.highlightBlockColor
   }
 
-  updateBreakAnimation(blockPosition: { x: number, y: number, z: number } | undefined, stage: number | null, mergedShape?: BlockShape) {
+  updateBreakAnimation(blockPosition: { x: number; y: number; z: number } | undefined, stage: number | null, mergedShape?: BlockShape) {
     this.hideBreakAnimation()
     if (stage === null || !blockPosition || !mergedShape) return
 
@@ -108,10 +116,9 @@ export class CursorBlock {
     this.blockBreakMesh.scale.set(width * 1.001, height * 1.001, depth * 1.001)
     position.add(new Vec3(blockPosition.x, blockPosition.y, blockPosition.z))
     this.blockBreakMesh.position.set(position.x, position.y, position.z)
-    this.blockBreakMesh.visible = true;
-
-    (this.blockBreakMesh.material as THREE.MeshBasicMaterial).map = this.breakTextures[stage] ?? this.breakTextures.at(-1);
-    (this.blockBreakMesh.material as THREE.MeshBasicMaterial).needsUpdate = true
+    this.blockBreakMesh.visible = true
+    ;(this.blockBreakMesh.material as THREE.MeshBasicMaterial).map = this.breakTextures[stage] ?? this.breakTextures.at(-1)
+    ;(this.blockBreakMesh.material as THREE.MeshBasicMaterial).needsUpdate = true
   }
 
   hideBreakAnimation() {
@@ -129,7 +136,13 @@ export class CursorBlock {
   }
 
   setHighlightCursorBlock(blockPos: Vec3 | null, shapePositions?: BlocksShapes, force = false): void {
-    if (blockPos && this.interactionLines && blockPos.equals(this.interactionLines.blockPos) && sameArray(shapePositions ?? [], this.interactionLines.shapePositions ?? []) && !force) {
+    if (
+      blockPos &&
+      this.interactionLines &&
+      blockPos.equals(this.interactionLines.blockPos) &&
+      sameArray(shapePositions ?? [], this.interactionLines.shapePositions ?? []) &&
+      !force
+    ) {
       return
     }
     if (this.interactionLines !== null) {

package/src/three/world/vr.ts

@@ -63,7 +63,7 @@ export async function initVR(worldRenderer: WorldRendererThree, documentRenderer
       display: 'flex',
       justifyContent: 'center',
       zIndex: '8',
-      gap: '8px',
+      gap: '8px'
     })
   }
 
@@ -79,7 +79,7 @@ export async function initVR(worldRenderer: WorldRendererThree, documentRenderer
       background: 'transparent',
       border: '1px solid rgb(255, 255, 255)',
       borderRadius: '4px',
-      opacity: '0.7',
+      opacity: '0.7'
     })
 
     closeButton.addEventListener('click', () => {
@@ -90,7 +90,6 @@ export async function initVR(worldRenderer: WorldRendererThree, documentRenderer
     return closeButton
   }
 
-
   async function checkVRSupport() {
     try {
       const supported = await navigator.xr?.isSessionSupported('immersive-vr')
@@ -122,16 +121,16 @@ export async function initVR(worldRenderer: WorldRendererThree, documentRenderer
     }
   }
   let hand1: any = controllerModelFactory.createControllerModel(controller1)
-  controller1.addEventListener('connected', (event) => {
+  controller1.addEventListener('connected', event => {
     hand1.xrInputSource = event.data
-    manageXrInputSource(event.data as { gamepad: Gamepad | undefined, handedness?: string }, 'left')
+    manageXrInputSource(event.data as { gamepad: Gamepad | undefined; handedness?: string }, 'left')
     user.add(controller1)
   })
   controller1.add(hand1)
   let hand2: any = controllerModelFactory.createControllerModel(controller2)
-  controller2.addEventListener('connected', (event) => {
+  controller2.addEventListener('connected', event => {
     hand2.xrInputSource = event.data
-    manageXrInputSource(event.data as { gamepad: Gamepad | undefined, handedness?: string }, 'right')
+    manageXrInputSource(event.data as { gamepad: Gamepad | undefined; handedness?: string }, 'right')
     user.add(controller2)
   })
   controller2.add(hand2)
@@ -184,7 +183,7 @@ export async function initVR(worldRenderer: WorldRendererThree, documentRenderer
 
     if (rotSnapReset) {
       if (Math.abs(hand1.xAxis) > 0.8) {
-        yawOffset -= Math.PI / 4 * Math.sign(hand1.xAxis)
+        yawOffset -= (Math.PI / 4) * Math.sign(hand1.xAxis)
         rotSnapReset = false
       }
     } else if (Math.abs(hand1.xAxis) < 0.1) {
@@ -220,7 +219,7 @@ const xrStandardRightButtonsMap = [
   // need to think of a way to support touchpad input
   [3 /* Thumbstick Press */, 'Right Stick'],
   [4 /* A */, 'A'],
-  [5 /* B */, 'B'],
+  [5 /* B */, 'B']
 ]
 const xrStandardLeftButtonsMap = [
   [0 /* trigger */, 'Left Trigger'],
@@ -228,14 +227,14 @@ const xrStandardLeftButtonsMap = [
   // need to think of a way to support touchpad input
   [3 /* Thumbstick Press */, 'Left Stick'],
   [4 /* A */, 'X'],
-  [5 /* B */, 'Y'],
+  [5 /* B */, 'Y']
 ]
 const remapButtons = (rightButtons: any[], leftButtons: any[]) => {
   // return remapped buttons
   const remapped = [] as string[]
   const remapWithMap = (buttons, map) => {
     for (const [index, standardName] of map) {
-      const standardMappingIndex = standardButtonsMap.findIndex((aliases) => aliases.find(alias => standardName === alias))
+      const standardMappingIndex = standardButtonsMap.findIndex(aliases => aliases.find(alias => standardName === alias))
       remapped[standardMappingIndex] = buttons[index]
     }
   }
@@ -245,12 +244,7 @@ const remapButtons = (rightButtons: any[], leftButtons: any[]) => {
 }
 const remapAxes = (axesRight, axesLeft) => {
   // 0, 1 are reserved for touch
-  return [
-    axesLeft[2],
-    axesLeft[3],
-    axesRight[2],
-    axesRight[3]
-  ]
+  return [axesLeft[2], axesLeft[3], axesRight[2], axesRight[3]]
 }
 
 function typedAssign<T extends Record<string, any>>(target: T, source: Partial<T>) {