BonnierNews / react-native-3d-model-view

A React Native view for displaying 3D models
MIT License
215 stars 57 forks source link

No reaction #15

Closed ViktorVojtek closed 5 years ago

ViktorVojtek commented 5 years ago

Hi,

I've implemented your package based on the guidelines you have provided. I went through some issues with swift, but I have solved them already...

The thing is, I only get the "[react-native-3d-model-view]:Load model start." message. And that means only "onLoadModelStart" method was fired.

It doesn't matter how long I'll wait, nothing else going to happened. None of the others methodes would fire.

Is there anything I should do and is missing in guide?

Thanks for your help and best regards, Viktor

ViktorVojtek commented 5 years ago

Ok I figured out that I have missing "texture" key in object of props "source". Now it continues to "AR - Session started" and then application crashes immediately...

Here is the source of my component:

class AR extends React.Component { constructor(props) { super(props);

this.state = {
  message: ''
};
this.arView = null;

this.onLoadModelStart = this.onLoadModelStart.bind(this);
this.onLoadModelSuccess = this.onLoadModelSuccess.bind(this);
this.onLoadModelError = this.onLoadModelError.bind(this);
this.onStart = this.onStart.bind(this);
this.onSurfaceFound = this.onSurfaceFound.bind(this);
this.onSurfaceLost = this.onSurfaceLost.bind(this);
this.onSessionInterupted = this.onSessionInterupted.bind(this);
this.onSessionInteruptedEnded = this.onSessionInteruptedEnded.bind(this);
this.onPlaceObjectSuccess = this.onPlaceObjectSuccess.bind(this);
this.onPlaceObjectError = this.onPlaceObjectError.bind(this);
this.onTrackingQualityInfo = this.onTrackingQualityInfo.bind(this);

}

static navigationOptions = { header: (navigator) => (

),
title: '',

}

async snapshot() { try { const event = await this.arView.getSnapshot(false);

  console.log(event);
} catch (err) {
  console.log(err);
}

}

onLoadModelStart() { console.log('[react-native-3d-model-view]:', 'Load model start.'); }

onLoadModelSuccess() { console.log('[react-native-3d-model-view]:', 'Load model success.'); }

onLoadModelError() { console.log('[react-native-3d-model-view]:', 'Load model error.'); }

onStart() { console.log('[react-native-3d-model-view]:', 'AR - Session started.'); }

onSurfaceFound() { console.log('[react-native-3d-model-view]:', 'AR - Planar surface found.'); }

onSurfaceLost() { console.log('[react-native-3d-model-view]:', 'AR - Planar surface lost.'); }

onSessionInterupted() { console.log('[react-native-3d-model-view]:', 'AR - Session interupted.'); }

onSessionInteruptedEnded() { console.log('[react-native-3d-model-view]:', 'AR - Session interupted ended.'); }

onPlaceObjectSuccess() { console.log('[react-native-3d-model-view]:', 'AR - Place object success!'); }

onPlaceObjectError() { console.log('[react-native-3d-model-view]:', 'AR - Place object error.'); }

onTrackingQualityInfo(event) { this.setState({message: event.nativeEvent.presentation}); console.log('[react-native-3d-model-view]:', 'AR -', event.nativeEvent.id, event.nativeEvent.presentation, event.nativeEvent.recommendation); }

render () { const modelUrl = this.props.navigation.getParam('model'); const modelTexture = this.props.navigation.getParam('texture');

return (
  <View style={styles.ARHolder}>
    {
      Platform.OS === 'ios' ?
      [
        <ARModelView
          ref={(arView) => {
            console.log(arView);
            this.arView = arView;
          }}
          style={styles.modelView}
          source={{
            model: `${modelUrl}?raw=true`,
            texture: `${modelTexture}?raw=true`,
          }}
          scale={0.1}
          onLoadModelStart={this.onLoadModelStart}
          onLoadModelSuccess={this.onLoadModelSuccess}
          onLoadModelError={this.onLoadModelError}
          onStart={this.onStart}
          onSurfaceFound={this.onSurfaceFound}
          onSurfaceLost={this.onSurfaceLost}
          onSessionInterupted={this.onSessionInterupted}
          onSessionInteruptedEnded={this.onSessionInteruptedEnded}
          onPlaceObjectSuccess={this.onPlaceObjectSuccess}
          onPlaceObjectError={this.onPlaceObjectError}
          onTrackingQualityInfo={this.onTrackingQualityInfo}
          key={0}
        />,
        <Text style={[styles.controlItem, styles.message]} key={1}>{this.state.message}</Text>,
        <TouchableOpacity onPress={() => this.arView.restart()} style={styles.restartButton} key={2}>
          <Text style={styles.controlItem}>Restart</Text>
        </TouchableOpacity>,
        <TouchableOpacity onPress={this.snapshot} style={styles.photoButton} key={3}>
          <Text style={styles.controlItem}>Take photo</Text>
        </TouchableOpacity>,
      ] :
      <View style={styles.center}>
        <Text>No AR for Andorid yet.</Text>
      </View>
    }
  </View>
);

} }

johankasperi commented 5 years ago

Glad you figured it out :)

ViktorVojtek commented 5 years ago
Dobrý deň,
 odo dňa 29.4.2019 do 10.5.2019 som na dovolenke.
V prípade potreby prosím kontaktujte kolegu, pána Martina
  Uličného (mulicny@enli.sk)

Hello,
I am on the vacation from 29.4.2019 to 10.5.2019.
In case of an emergency, please contact my colleague Mr. Mrtin
  Uličný (mulicny@enli.sk)

S pozdravom/Kind regards,

-- 

        Viktor Vojtek

        Executive officer, CTO

         

         

        ENLI s.r.o

        AR & VR solutions provider

        Žižkova 2633/13, Košice, 04011, Slovak Republic

         

        +421 918 222 968

        Visit us at http://enli.sk/en