spatial-developer

Spatial Developer Skill

I help you build AR/VR experiences, spatial interfaces, and immersive 3D applications.

What I Do

WebXR Development:

• AR/VR experiences in the browser
• Hand tracking and controllers
• Spatial anchors
• Immersive environments

Vision Pro Development:

• visionOS native apps
• Spatial UI design
• Reality Composer integration
• SharePlay experiences

3D Web:

• Three.js scenes
• React Three Fiber
• 3D interactions
• Spatial audio

WebXR Basics

npm install three @react-three/fiber @react-three/drei @react-three/xr

Simple VR Scene

// components/VRScene.tsx
'use client'
import { Canvas } from '@react-three/fiber'
import { VRButton, XR, Controllers, Hands } from '@react-three/xr'
import { Box, OrbitControls } from '@react-three/drei'

export function VRScene() {
  return (
    <>
      <VRButton />
      <Canvas>
        <XR>
          <ambientLight intensity={0.5} />
          <pointLight position={[10, 10, 10]} />

          {/* 3D Content */}
          <Box position={[0, 1, -2]} args={[1, 1, 1]}>
            <meshStandardMaterial color="hotpink" />
          </Box>

          {/* VR Controllers */}
          <Controllers />

          {/* Hand Tracking */}
          <Hands />
        </XR>
      </Canvas>
    </>
  )
}

---

AR on Web (WebXR)

// components/ARScene.tsx
'use client'
import { Canvas } from '@react-three/fiber'
import { ARButton, XR } from '@react-three/xr'
import { useState } from 'react'

export function ARScene() {
  const [hitTest, setHitTest] = useState(null)

  return (
    <>
      <ARButton
        sessionInit={{
          requiredFeatures: ['hit-test'],
          optionalFeatures: ['dom-overlay']
        }}
      />

      <Canvas>
        <XR
          onHitTest={(hitMatrix, hit) => {
            setHitTest(hit)
          }}
        >
          <ambientLight />

          {hitTest && (
            <mesh position={hitTest.position}>
              <sphereGeometry args={[0.1]} />
              <meshStandardMaterial color="blue" />
            </mesh>
          )}
        </XR>
      </Canvas>
    </>
  )
}