react-giojs - :tada: A Declarative 3D Globe Data Visualization Library built with Three

  •        292

React-Giojs is the react version of the open source library Gio.js. Gio.js is an open source library for web 3D globe data visualization built with Three.js. What makes Gio.js different is that it is simple to use Gio.js to customize a 3D data visualization model in a declarative way, add your own data, and integrate it into your own modern web application. If everything goes well, you should see this.

https://github.com/syt123450/giojs
https://github.com/syt123450/react-giojs

Dependencies:

react : 16.2.0
react-dom : 16.2.0
three : ^0.90.0

Tags
Implementation
License
Platform

   




Related Projects

giojs - 🌏 A Declarative 3D Globe Data Visualization Library built with Three.js

  •    Javascript

Gio.js is an open source library for web 3D globe data visualization built with Three.js. What makes Gio.js different is that it is simple to use Gio.js to customize a 3D data visualization model in a declarative way, add your own data, and integrate it into your own modern web application. Gio.js is an open source library for web 3D globe data visualization built with Three.js. What makes Gio.js different is that it is simple to use Gio.js to customize a 3D data visualization model in a declarative way, add your own data, and integrate it into your own modern web application.

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.

react-planner - :pencil2: A React Component for plans design

  •    Javascript

react-planner is a React component which can be used to draw model buildings. Drag & drop from a catalog of customizable and ready-to-use objects, you can start from 2D wireframes and land on 3D models. As a developer you can provide your users with new objects by adding them to the catalog.

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.

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.


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.

encom-globe - 🌎 WebGL globe based on the boardroom scene from Tron: Legacy

  •    Javascript

The Encom Globe is a WebGL-based clone of the globe from the boardroom scene in Tron: Legacy. If you don't recall that scene, check out Bradley Munkowitz's excellent writeup about its production for more information. This version attempts to stay as true to the in-movie original as possible while maintaining a high frame rate on low powered machines and devices. It is getting pretty close to acheiving that goal and mimics most of the details seen on screen, including the loading animations for the globe hexagon particles, the satellites, and the markers.

Cesium - An open-source JavaScript library for world-class 3D globes and maps

  •    Javascript

CesiumJS is a JavaScript library for creating 3D globes and 2D maps in a web browser without a plugin. It uses WebGL for hardware-accelerated graphics, and is cross-platform, cross-browser, and tuned for dynamic-data visualization.

react-vfx - WebGL effects for React elements

  •    TypeScript

NOTE: VFXSpan doesn't work if the content includes child nodes.

cesium - An open-source JavaScript library for world-class 3D globes and maps :earth_americas:

  •    Javascript

CesiumJS is a JavaScript library for creating 3D globes and 2D maps in a web browser without a plugin. It uses WebGL for hardware-accelerated graphics, and is cross-platform, cross-browser, and tuned for dynamic-data visualization. Have questions? Ask them on the community forum.

react-native-webgl - Implements WebGL for react-native

  •    Objective-C

react-native-webgl implements WebGL 1 in React Native. Ths library exposes a WebGLView that implements WebGL in React Native.

react-ape - 🦍• [Work in Progress] React Renderer to build UI interfaces using canvas/WebGL

  •    Javascript

React Renderer to build UI interfaces using canvas/WebGL. React Ape is a react renderer to build UI interfaces using canvas/WebGL. React Ape was built to be an optional React-TV renderer. It's mainly a renderer focused on creating things for TV, PS4, Nintendo Switch, PS Vita, PS3 and low memory devices. If you're curious about the name: It's a "joke" with Netflix's React Gibbon renderer. I choose to use Ape then.

G3D - A pure 3D render engine compatible with webgl, running both in browser and gcanvas.

  •    Javascript

G3D is a javascript 3D engine based on WebGL. Compared with other WebGL 3D engines, G3D is a pure render engine, which means it depends on no DOM APIs but just a canvas(or canvas-like) object. This feature makes it possible that G3D works not only in browser but also in some hybrid environments like GCanvas (Weex or ReactNative). See website for more information.

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-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.

gl-react - [gl-react v3 alpha] – a React library to write and compose WebGL shaders

  •    Javascript

This repository hosts gl-react v3. For gl-react v2, please see ProjectSeptemberInc/gl-react. gre/gl-react repository is a complete rewrite of ProjectSeptemberInc/gl-react library (gl-react v2). It plans to be the gl-react v3. We keep both repository at same time because (1) this work is not yet finished and (2) this repository is now a "multi libraries" repository (it's just easier to maintain that way).

whs.js - :rocket: 🌪 Super-fast 3D framework for Web Applications 🥇 & Games 🎮. Based on Three.js

  •    Javascript

whs is currently at v2 major version. We don't have clear plans for v3 yet. So v2 will probably remain the main stable version until at least 2018. We try to publish patch releases every 20 days or even more often.

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.

jeelizFaceFilter - Javascript/WebGL lightweight face tracking library designed for augmented reality webcam filters

  •    Javascript

This JavaScript library detects and tracks the face in real time from the webcam video feed captured with WebRTC. Then it is possible to overlay 3D content for augmented reality applications. We provide various demonstrations using main WebGL 3D engines. We have included in this repository the release versions of the 3D engines to work with a determined version (they are in /libs/<name of the engine>/). This library is lightweight and it does not include any 3D engine or third party library. We want to keep it framework agnostic so the outputs of the library are raw: if the a face is detected or not, the position and the scale of the detected face and the rotation Euler angles. But thanks to the featured helpers, examples and boilerplates, you can quickly deal with a higher level context (for motion head tracking, for face filter or face replacement...). We continuously add new demontrations, so stay tuned ! Also, feel free to open an issue if you have any question or suggestion.






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.