reactjsreact-360

Animation not working in ReactVR


It seems I'm missing one thing somewhere as I'm not seeing any errors in the console but the animation doesn't seem to be running or my scene is too heavy that the animation runs before the model is actually loaded...anything I'm missing in my code?

import React from 'react';
import { asset, View, StyleSheet, Model, Animated } from 'react-vr';

const AnimatedModel = Animated.createAnimatedComponent(Model);

export default class Loral extends React.Component {
   constructor(props) {
     super(props);
    this.state = {
      satelliteTransX: new Animated.Value(3),
      satelliteRotY: -45,
    };
  }

  componentDidMount() {
     this.state.satelliteTransX.setValue(3);
     Animated.timing(
       this.state.satelliteTransX,
      {
        toValue: 10,
        duration: 1000,
        delay: 1000
      }
     ).start();
   }

   render() {
     return (
       <View>
         <AnimatedModel 
           source={{
             obj: asset('/Loral-1300Com-obj/Loral-1300Com-main.obj'),
             mtl: asset('/Loral-1300Com-obj/Loral-1300Com-main.mtl')
           }}
           style={{
                 transform: [
                {translate: [this.state.satelliteTransX, 0, -10]},
                { scale: 0.01 },
                { rotateX: 30},
                { rotateY: this.state.satelliteRotY }
             ]
           }} 
         />
      </View>
     );
  }
};

Solution

  • Try setting your translate individually by axis so instead of this:

     style={{
        transform: [
           {translate: [this.state.satelliteTransX, 0, -10]},
           { scale: 0.01 },
           { rotateX: 30},
           { rotateY: this.state.satelliteRotY }
        ]
     }} 
    

    try this

     style={{
        transform: [
           {translateX: this.state.satelliteTransX},
           {translateY: 0},
           {translateZ: -10},
           { scale: 0.01 },
           { rotateX: 30},
           { rotateY: this.state.satelliteRotY }
        ]
     }} 
    

    That should do the trick for you. I have experienced this issue for all animated properties referenced in an array like you have above.