Back to Details

spatial-developer

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Spatial Developer Skill

空间开发技能

I help you build AR/VR experiences, spatial interfaces, and immersive 3D applications.
我可以帮助你构建AR/VR体验、空间界面和沉浸式3D应用。

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开发：
  • 浏览器中的AR/VR体验
  • 手部追踪与控制器
  • 空间锚点
  • 沉浸式环境
Vision Pro开发：
  • visionOS原生应用
  • 空间UI设计
  • Reality Composer集成
  • SharePlay体验
3D网页开发：
  • Three.js场景
  • React Three Fiber
  • 3D交互
  • 空间音频

WebXR Basics

WebXR基础

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

Simple VR Scene

简单VR场景

typescript
// 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>
    </>
  )
}
typescript
// 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内容 */}
          <Box position={[0, 1, -2]} args={[1, 1, 1]}>
            <meshStandardMaterial color="hotpink" />
          </Box>

          {/* VR控制器 */}
          <Controllers />

          {/* 手部追踪 */}
          <Hands />
        </XR>
      </Canvas>
    </>
  )
}

AR on Web (WebXR)

网页端AR（WebXR）

typescript
// 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>
    </>
  )
}
typescript
// 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>
    </>
  )
}

Vision Pro Spatial UI

Vision Pro空间UI

swift
// ContentView.swift
import SwiftUI
import RealityKit

struct ContentView: View {
    var body: some View {
        RealityView { content in
            // Add 3D content
            let model = ModelEntity(
                mesh: .generateSphere(radius: 0.1),
                materials: [SimpleMaterial(color: .blue, isMetallic: false)]
            )

            content.add(model)
        }
        .toolbar {
            ToolbarItem(placement: .bottomOrnament) {
                HStack {
                    Button("Reset") {
                        // Reset scene
                    }

                    Button("Share") {
                        // SharePlay
                    }
                }
            }
        }
    }
}
swift
// ContentView.swift
import SwiftUI
import RealityKit

struct ContentView: View {
    var body: some View {
        RealityView { content in
            // 添加3D内容
            let model = ModelEntity(
                mesh: .generateSphere(radius: 0.1),
                materials: [SimpleMaterial(color: .blue, isMetallic: false)]
            )

            content.add(model)
        }
        .toolbar {
            ToolbarItem(placement: .bottomOrnament) {
                HStack {
                    Button("重置") {
                        // 重置场景
                    }

                    Button("分享") {
                        // SharePlay
                    }
                }
            }
        }
    }
}

3D Interaction Patterns

3D交互模式

Gaze-Based Selection

基于视线的选择

typescript
'use client'
import { useXR } from '@react-three/xr'
import { useFrame } from '@react-three/fiber'
import { useState } from 'react'

export function GazeSelect() {
  const { player } = useXR()
  const [gazing, setGazing] = useState(false)

  useFrame(() => {
    // Raycast from camera
    const direction = player.camera.getWorldDirection(new Vector3())
    // Check intersection with objects
    // If gazing for 2 seconds, select
  })

  return (
    <mesh onPointerEnter={() => setGazing(true)}>
      <boxGeometry />
      <meshStandardMaterial
        color={gazing ? 'green' : 'white'}
      />
    </mesh>
  )
}
typescript
'use client'
import { useXR } from '@react-three/xr'
import { useFrame } from '@react-three/fiber'
import { useState } from 'react'
import { Vector3 } from 'three'

export function GazeSelect() {
  const { player } = useXR()
  const [gazing, setGazing] = useState(false)

  useFrame(() => {
    // 从相机发射射线
    const direction = player.camera.getWorldDirection(new Vector3())
    // 检测与物体的交点
    // 如果视线停留2秒，则选择
  })

  return (
    <mesh onPointerEnter={() => setGazing(true)}>
      <boxGeometry />
      <meshStandardMaterial
        color={gazing ? 'green' : 'white'}
      />
    </mesh>
  )
}

Hand Gesture Recognition

手势识别

typescript
'use client'
import { useXREvent } from '@react-three/xr'

export function GestureControl() {
  useXREvent('squeeze', (e) => {
    console.log('Pinch gesture detected')
    // Perform action
  })

  useXREvent('select', (e) => {
    console.log('Select gesture')
  })

  return (
    <mesh>
      <sphereGeometry args={[0.05]} />
      <meshStandardMaterial color="red" />
    </mesh>
  )
}
typescript
'use client'
import { useXREvent } from '@react-three/xr'

export function GestureControl() {
  useXREvent('squeeze', (e) => {
    console.log('检测到捏合手势')
    // 执行操作
  })

  useXREvent('select', (e) => {
    console.log('选择手势')
  })

  return (
    <mesh>
      <sphereGeometry args={[0.05]} />
      <meshStandardMaterial color="red" />
    </mesh>
  )
}

Spatial Audio

空间音频

typescript
'use client'
import { PositionalAudio } from '@react-three/drei'
import { useRef } from 'react'

export function SpatialSound() {
  const sound = useRef()

  return (
    <mesh position={[2, 1, -3]}>
      <sphereGeometry args={[0.2]} />
      <meshStandardMaterial color="yellow" emissive="yellow" />

      <PositionalAudio
        ref={sound}
        url="/sounds/ambient.mp3"
        distance={5}
        loop
        autoplay
      />
    </mesh>
  )
}
typescript
'use client'
import { PositionalAudio } from '@react-three/drei'
import { useRef } from 'react'

export function SpatialSound() {
  const sound = useRef()

  return (
    <mesh position={[2, 1, -3]}>
      <sphereGeometry args={[0.2]} />
      <meshStandardMaterial color="yellow" emissive="yellow" />

      <PositionalAudio
        ref={sound}
        url="/sounds/ambient.mp3"
        distance={5}
        loop
        autoplay
      />
    </mesh>
  )
}

When to Use Me

何时选择我

Perfect for:
  • Building AR/VR web experiences
  • Creating Vision Pro apps
  • Implementing 3D interactions
  • Spatial UI design
  • Immersive storytelling
I'll help you:
  • Set up WebXR projects
  • Build AR features
  • Implement hand tracking
  • Design spatial interfaces
  • Optimize 3D performance
适用场景：
  • 构建AR/VR网页体验
  • 创建Vision Pro应用
  • 实现3D交互
  • 空间UI设计
  • 沉浸式叙事
我可以帮你：
  • 搭建WebXR项目
  • 构建AR功能
  • 实现手部追踪
  • 设计空间界面
  • 优化3D性能

What I'll Create

我能创建的内容

🥽 VR Experiences
📱 AR Applications
👋 Hand Tracking
🎧 Spatial Audio
🌐 WebXR Scenes
🍎 Vision Pro Apps
Let's build the future of spatial computing!
🥽 VR体验
📱 AR应用
👋 手部追踪
🎧 空间音频
🌐 WebXR场景
🍎 Vision Pro应用
让我们一起构建空间计算的未来！