React Motion and A-Frame demo. Animating the camera position using springs

Mar 14, 2017

A demo I created for a BogotaJS presentation about using declarative 3D with a-frame and react. It uses React Motion to animate the camera position naturally.

Open Demo

Scene Source

import React, { Component } from 'react';
import 'aframe';
import {Scene, Entity, Sky} from 'aframe-react'
import {Motion,spring} from 'react-motion';

class SpheresScene extends Component {

  constructor(props) {
    super(props);
    this.state = {
      spherePos: {
        x:0,
        y:0,
        z:0
      }
    }

  }

  componentDidMount() {
    setInterval(function(){
      var x = Math.random()*10
      var y = Math.random()*10
      var z = 10+ Math.random()*10
      this.setState({
        spherePos: {
          x,y,z
        }
      })
    }.bind(this),600)
  }

  render() {
    return (
        <Scene> 
          <Motion defaultStyle= style=>
            {value => <Entity geometry= material= position={[value.x,value.y,-value.z]}/>}
          </Motion>
          <Motion defaultStyle= style=>
            {value => <Entity geometry= material="color: #ed9ee6; metalness: 0.1" position={[-value.x/2,value.y/2,-value.z/2]}/>}
          </Motion>
          <Motion defaultStyle= style=>
            {value => <Entity geometry= material="color: #c3dc74; metalness: 0.1" position={[value.x/4,value.y/4,-value.z/4]}/>}
          </Motion>

 

          <Entity camera="userHeight: 1.8"  position={[0,-2,8]}></Entity>
          
          <Entity sky=" " />
       </Scene>
    );
  }
}

export default SpheresScene;