r3f-xr-widgets / ResizableWindow

Function: ResizableWindow()

ResizableWindow(props): Element

Defined in: src/components/ResizableWindow.tsx:83

An interactive 3D window component with drag-to-move and resize handles.

Features:

• Drag the bottom handle to move the window in 3D space
• Drag the top-right handle to resize the window
• Positional audio feedback on interaction
• Haptic feedback on XR controllers
• Optional camera-facing rotation (initial or continuous)

Parameters

props

ResizableWindowProps

Returns

Element

Example

import { ResizableWindow, AudioEffects } from 'r3f-xr-widgets'

function Scene() {
  return (
    <>
      <AudioEffects />
      <ResizableWindow
        position={[0, 1.5, -1]}
        aspectRatio={16/9}
        baseScale={0.3}
        handleColor="hotpink"
      >
        <mesh>
          <boxGeometry />
          <meshStandardMaterial />
        </mesh>
      </ResizableWindow>
    </>
  )
}

Adapted from @react-three/xr editor example

See

https://github.com/pmndrs/xr/tree/main/examples/editor