pmndrs/xr

Эта страница переведена автоматически. Технические детали смотрите в оригинале. Открыть оригинал

2,6 тыс. stars Качество 64 Тренд 40NOASSERTION

🤳 VR/AR для react-three-fiber

Обзор

xr: Превратите любое приложение R3F в интерактивный погружающий опыт. 1. const store = create XRStore() создать XR store 2. store.enterAR() вызывать enter AR при нажатии на кнопку 3. ... Оберни свой контент XR-компонентом ... или прочитайте это руководство по конвертации приложения react-three/fiber в XR. - 💾 Хранение - 👆 Взаимодействия - 👌 Дескрипторы - 🧊 Обнаружение объектов - ✴ Начало - 🪄 Телепортация - 🕹️ Геймпад - ➕ Вторичные источники входа - 📺 Слои - 🎮 Пользовательский контроллер/Руки/... - ⚓️ Якоря - 📱 Доминирующие наложения - 🎯 Тест на попадание - ⛨ Охранники - От @react-три/XR V5 — от Natuerlich Этот пакет поставляет навык использования для агентов кода, соответствующий установленной версии. Установите его с помощью skills-npm, который связывает навыки установленных пакетов для вашего агента: Этот проект поддерживается несколькими компаниями и отдельными лицами, создающими передовые 3D-веб- и XR-опыты. Ознакомьтесь с ними!

Обзор (машинный перевод)

XR Превратите любое приложение R3F в интерактивный и погружающий опыт.

Как это выглядит?

Простая сцена с сеткой, которая переключает цвет материала между `"red"` и `"blue"` при нажатии через касание или указание.

Как включить XR для вашего приложения @react-three/оптоволокна?

const store = createXRStore() создать хранилище XR
store.enterAR() вызов Enter AR при нажатии на кнопку
... оберни свой контент XR-компонентом

… или прочитайте это руководство по конвертации приложения react-three/fiber в XR.

Уроки

💾 Магазин
👆 Взаимодействия
👌 Ручки
🧊 Обнаружение объектов
✴ Происхождение
🪄 Телепортация
🕹️ Геймпад
➕ Вторичные источники входа
📺 Слои
🎮 Кастомный контроллер/руки/…
⚓️ Якорные магазины
📱 Dom Overlays
🎯 Хит-тест
⛨ Гвардии

Внешние уроки

🥇 WebXR First Steps React от Meta Quest

Путеводители по миграции

От @react-три/XR V5
из Natuerlich

Навыки агента

Эта страница переведена автоматически. Технические детали смотрите в оригинале.

README

Показан фрагмент оригинального README. Открыть оригинал.

xr Turn any R3F app into an interactive immersive experience.

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

What does it look like?

A simple scene with a mesh that toggles its material color between `"red"` and `"blue"` when clicked through touching or pointing.

import { Canvas } from '@react-three/fiber'
import { XR, createXRStore } from '@react-three/xr'
import { useState } from 'react'

const store = createXRStore()

export function App() {
  const [red, setRed] = useState(false)
  return (
    <>
       store.enterAR()}>Enter AR
      
        
           setRed(!red)} position={[0, 1, -1]}>
            
            
          
        
      
    
  )
}