Description
react native 0.76.5 react-native-gl-model-view android the 3Dmodel can not move?
when I try
use react-native-gl-model-view to display 3d molel with .obj file ,
in react native 0.76.5 android
it can display,
but the model can not move by e.nativeEvent.
the ios is ok!
the code like this:
import React from 'react';
import {
ActivityIndicator,
View,
StyleSheet,
TouchableOpacity,
Text,
Animated,
} from 'react-native';
import ModelView from 'react-native-gl-model-view';
import {Buffer} from 'buffer';
import axios from 'axios';
const AnimatedModelView = Animated.createAnimatedComponent(ModelView);
// XXX: This is the standard content header returned for a blob.
//const octetStreamHeader = 'data:application/octet-stream;base64,';
class My3DModel extends React.Component {
constructor() {
super();
this.state = {
rotateX: new Animated.Value(-8),
rotateZ: new Animated.Value(0),
fromXY: undefined,
valueXY: undefined,
model: null,
texture: null,
error: null,
loading: false,
};
...
onMoveEnd = () => {
this.setState({
fromXY: undefined,
});
};
onMove = e => {
let {pageX, pageY} = e.nativeEvent,
{rotateX, rotateZ, fromXY, valueXY} = this.state;
if (!this.state.fromXY) {
this.setState({
fromXY: [pageX, pageY],
valueXY: [rotateZ.__getValue(), rotateX.__getValue()],
});
} else {
rotateZ.setValue(valueXY[0] + (pageX - fromXY[0]) / 2);
rotateX.setValue(valueXY[1] + (pageY - fromXY[1]) / 2);
}
};
render() {
const {model, texture} = this.state;
let {rotateZ, rotateX, fromXY} = this.state;
if(model!=null)
console.log('model:', model.slice(0, 100));
else
console.log("model:",model);
let modelSrc={uri: model,}
return (
<View style={styles.container}>
{ model//&& texture
? <AnimatedModelView
model={modelSrc}
/*texture={{
uri: 'demon.png',
}}*/
onStartShouldSetResponder={() => true}
onResponderRelease={this.onMoveEnd}
onResponderMove={this.onMove}
animate={!!fromXY}
tint={{r: 0, g: 255, b: 255.0, a: 1}}
//tint={{r:240, g: 255, b: 255.0, a: 0.8}}
scale={4.5}
rotateX={rotateX}
rotateZ={rotateZ}
translateZ={-5}
translateY={-1}
style={styles.container}
/>
: this.renderControls(this.props, this.state)}
</View>
);
}
}