react-xr - 🤳 VR/AR with react-three-fiber

  •        834

These demos are real, you can click them! They contain the full code, too. To get started with default controller models add DefaultXRControllers component. It will fetch appropriate input profile models. You can learn more here.

https://github.com/pmndrs/react-xr#readme

Dependencies:

@webxr-input-profiles/motion-controllers : ^1.0.0
react-merge-refs : ^1.1.0

Tags
Implementation
License
Platform

   




Related Projects

exokit - Native VR/AR/XR engine for JavaScript 🦖

  •    Javascript

Find more examples here and on YouTube. This project enables developers to build XR experiences using the same code that runs on the web. Exokit engine is written on top of Node and emulates a web browser, providing native hooks for WebGL, WebXR, WebAudio, and other APIs used in immersive experiences.

react-three-flex - 💪📦 Flexbox for react-three-fiber

  •    TypeScript

Placing content in THREE.js is hard. @react-three/flex brings the webs flexbox spec to react-three-fiber. It is based on Yoga, Facebook's open source layout engine for react-native. These demos are real, you can click them! They contain the full code, too.

react-postprocessing - 📬 postprocessing for react-three-fiber

  •    TypeScript

react-postprocessing is a postprocessing wrapper for @react-three/fiber. This is not (yet) meant for complex orchestration of effects, but can save you hundreds of LOC for a straight forward effects-chain. This library provides an EffectPass which automatically organizes and merges any given combination of effects. This minimizes the amount of render operations and makes it possible to combine many effects without the performance penalties of traditional pass chaining. Additionally, every effect can choose its own blend function.

use-cannon - 👋💣 physics based hooks for react-three-fiber

  •    TypeScript

Experimental React hooks for cannon-es. Use this in combination with react-three-fiber. Let's make a cube falling onto a plane. You can play with a sandbox here.

drei - 🌭 useful helpers for react-three-fiber

  •    Javascript

A growing collection of useful helpers and abstractions for react-three-fiber. The native route of the library does not export Html or Loader. The default export of the library is web which does export Html and Loader.


react-three-fiber - 🇨🇭 A React renderer for Three.js

  •    TypeScript

react-three-fiber is a React renderer for threejs. Build your scene declaratively with re-usable, self-contained components that react to state, are readily interactive and can tap into React's ecosystem.

react-three-a11y - ♿️ Accessibility tools for React Three Fiber

  •    TypeScript

👩‍🦯 Provide accessibility support to R3F such as focus indication, keyboard tab index, and screen reader support

react-three-next - React Three Fiber, Nextjs, Tailwind starter

  •    Javascript

First Load JS of 74Kb. This starter will automatically pick the marked R3F components and inject them into a canvas layout so we can navigate seamlessly between the pages with some dynamic dom and canvas content without reloading or creating a new canvas every time. Inform the nextjs page that the component is a Threejs component. For that, simply add the r3f property to the parent component.

racing-game - 🏎 Open source racing game developed by everyone willing

  •    TypeScript

This project is a showcase for the feasibility of React in gaming. Every thing is a self contained component using react-three-fiber to express threejs with React semantics. If that seems strange to you read this explanation. This project is 100% open source and community built, CC0 assets only, everyone is invited to participate. If you have a PR merged you are added to the triage team. Refer to CONTRIBUTING.md for more information.

react-fiber-resources - Resources for React Fiber

  •    Javascript

This is a repository of resources for React Fiber. React Fiber is a new React reconciler algorithm, which is used from v16.

react-native-location - React Native plug-in that provides GPS location information

  •    Objective-C

Native GPS location support for React Native. Three installation methods are provided here for compatibility and ease of use. All of them require installing the package using NPM. However, you can install the iOS specific bits using one of three methods: RNPM, React-Native Link (only v0.28), or manual linking in XCode.

react-three-renderer - Render into a three.js canvas using React.

  •    Javascript

Render into a three.js canvas using React. Would you like to know more? See the wiki or go straight to the API documentation.

react-fiber-architecture - A description of React's new core algorithm, React Fiber

  •    

React Fiber is an ongoing reimplementation of React's core algorithm. It is the culmination of over two years of research by the React team. The goal of React Fiber is to increase its suitability for areas like animation, layout, and gestures. Its headline feature is incremental rendering: the ability to split rendering work into chunks and spread it out over multiple frames.

three

  •    Javascript

A helper three.js library for building AR web experiences that run in WebARonARKit and WebARonARCore. See three.ar.js API documentation for details.

rsuite - :package: A suite of React components .

  •    Javascript

RSUITE (React Suite) is a set of react component libraries for enterprise system products. Built by HYPERS front-end team and UX team, mainly serving company's big data products. After three major revisions, a large number of components and rich functionality have been accumulated.

react-360 - Create amazing 360 and VR content using React

  •    Javascript

React 360 is a framework for the creation of interactive 360 experiences that run in your web browser. It pairs modern APIs like WebGL and WebVR with the declarative power of React, producing applications that can be consumed through a variety of devices. Leveraging web technologies and the existing React ecosystem, React 360 aims to simplify the construction of cross-platform 360 experiences. Next, install the React 360 CLI – a command-line tool that generates the basic layout of new projects.

react-three - React bindings to create and control a 3D scene using three.js

  •    Javascript

Create/control a three.js canvas using React. To use React for drawing 2D using WebGL, try react-pixi.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.