facebookarchive / react-360

Create amazing 360 and VR content using React
https://facebook.github.io/react-360
Other
8.73k stars 1.23k forks source link

BUG --- Error: Invalid transform name: scaleZ #578

Open drubio1989 opened 6 years ago

drubio1989 commented 6 years ago

Description

Is this a Bug or a Feature Request? For a Bug please explain below what you did, what you expected to happen, and what actually happens.

This is a bug found in React 360 scaleZ prop feature on an Entity.

Expected behavior

I expected for an entity to scale on the X, Y, and Z axes. However, an entity is only able to scale on the X and Y and not the Z.

Actual behavior

The actual behavior shows the following error message:

ExceptionsManager.js:65 Error: Invalid transform name: scaleZ

Reproduction

List all the steps required to encounter the issue you're reporting. These steps should be clear and concise.

index.js

`const AnimatedEntity = Animated.createAnimatedComponent(Entity);

export class BitCoinVR extends React.Component {
  state = {
    rotation: new Animated.Value(0),  // Initial value for opacity: 0
  }

 componentDidMount() {
    Animated.loop(Animated.timing(
      this.state.rotation,
    {
      toValue: 360,
      duration: 6000,
    }
  )).start();
}

render() {
  return (
    <View>
      <AnimatedEntity
       // Bug takes place right here
       style={{transform: [{scaleX: 3}, {scaleY: 3}, {scaleZ: 3},
                          {rotateX: 90}, {rotateZ: this.state.rotation}]}}
        source={{obj: asset('bitcoin.obj')}}
      />
    </View>
  );
}
};

AppRegistry.registerComponent('BitCoinVR', () => BitCoinVR);

Solution

What needs to be done to address this issue? Ideally, provide a pull request with a fix.

scaleZ: needs to be a valid parameter for the transform prop.

Additional Information

larrylin28 commented 6 years ago

The fix is already in latest code: https://github.com/facebook/react-360/blob/c3e7e7f75abe39bcb90623e8c74963afa483149f/Libraries/VRReactOverrides/processTransform.vr.js#L75 But not in the npm module yet.

drubio1989 commented 6 years ago

Hey, thanks for this heads up @larrylin28. Appreciate it.