Awesome Open Source
Awesome Open Source

MathworldVR

MathworldVR

WebVR math platform made with A-Frame, Three.js, React, Redux.

Build Status Coverage Status Code climate tested with jest Tag License

Usage

  • Download and install a WebVR-enabled browser. Currently only Firefox, Firefox Nightly and experimental versions of Chromium supports the Vive controllers. (You will need to enable these flags for WebVR and Gamepad Extensions: chrome://flags#enable-webvr and chrome://flags#enable-gamepad-extensions.)
  • Visit https://mathworldvr.com/ and play with the math functions.

Libraries

App state in predictable state container

MathworldVR uses Redux for all the stuff around the app's state. It helps you write applications that behave consistently. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger. For example, CalcButton component used as a backspace on calculator is dispatching Redux action when user "clicks it" with VR hand-controller!

Stateless Calculator component:

const Calculator = ({ backspace }) => {
  return (
    <Entity className="interactive calculator">
      // ...
      <CalcButton value="<-" id="calc-backspace" actionToTrigger={backspace} />
      // ...
    </Entity>
  )
}

Calculator container:

import { connect } from 'react-redux'
import { Calculator } from 'components'
import { calculatorBackspace } from 'actions'

// ...
const mapDispatchToProps = (dispatch) => ({
  backspace: () => dispatch(calculatorBackspace()),
})

export default connect(mapDispatchToProps)(Calculator)

CalcButton nicely dispatching Redux action that we are passing to it dynamically on 'hover-start' event:

export default class CalcButton extends React.Component {
  startIntersection = () => {
    const { actionToTrigger } = this.props
    // Dispatching Redux action from within WebVR
    // by touching the CalcButton with VR hand-controller
    actionToTrigger()
  }

  render() {
    return (
      <Entity
        id={this.props.id}
        className="interactive button"
        hoverable
        clickable
        events={{
          'hover-start': this.startIntersection
        }}
      >
        <Text value={this.props.value} />
      </Entity>
    )
  }
}

Local Development

Prerequisites

First, fork the project. Then:

git clone [email protected]:yourusername/mathworldvr && cd mathworldvr
npm install // or yarn install
npm start

Then, load http://localhost:3000 in your browser.

Generating Builds

npm run build

Questions

For questions and support, ask on StackOverflow.

Stay in Touch

A-Frame Community

Contributing

Get involved! Check out the Contributing Guide for how to get started.

License

This program is free software and is distributed under an MIT License.


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,513,654
Reactjs (72,862
Redux (13,081
Webpack (9,593
Mathematics (2,592
Virtual Reality (666
Aframe (426
Webvr (344
Related Projects