Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

react native 0.76.5 react-native-gl-model-view android the 3Dmodel can not move? #927

Open
cmwxj opened this issue Jan 10, 2025 · 0 comments

Comments

@cmwxj
Copy link

cmwxj commented Jan 10, 2025

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>
);

}
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant