expo-three
expo-three copied to clipboard
expo-three animates on web but not on Android
I am trying to draw a simple animating Cube using expo-three.
The following code works for the web, but not on android.
On Android, it is showing a backgroundColor
screen only and I am yet to figure out the reason.
import * as React from "react";
import { View, StyleSheet } from "react-native";
import Constants from "expo-constants";
import { GLView } from "expo-gl";
import { TextureLoader, THREE } from "expo-three";
import ExpoTHREE from "expo-three";
export default class App extends React.Component {
constructor(props) {
super(props);
}
_onGLContextCreate = async (gl) => {
this.scene = new THREE.Scene();
this.camera = new THREE.Camera(
75,
gl.drawingBufferWidth / gl.drawingBufferHeight,
0.1,
1000
);
this.scene.add(this.camera);
this.renderer = new ExpoTHREE.Renderer({ gl });
this.geometry = new THREE.BoxGeometry(1, 1, 1);
this.material = new THREE.MeshBasicMaterial({
color: 0xff0000,
});
this.obj = new THREE.Mesh(this.geometry, this.material);
this.edges = new THREE.EdgesGeometry(this.geometry);
this.scene.add(this.obj);
this.animate();
};
animate = () => {
requestAnimationFrame(this.animate);
this.obj.rotation.x += 0.01;
this.obj.rotation.y += 0.01;
this.renderer.render(this.scene, this.camera);
};
render = () => {
return (
<View style={styles.container}>
<GLView
style={{ width: 100, height: 100 }}
onContextCreate={this._onGLContextCreate}
/>
</View>
);
};
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
paddingTop: Constants.statusBarHeight,
backgroundColor: "#111111",
padding: 8,
},
});
My package info is as follows
{
"dependencies": {
"expo": "^38.0.9",
"expo-gl": "8.3.1",
"expo-graphics": "^1.1.0",
"expo-three": "^5.5.1",
"expo-three-ar": "^0.0.0",
"react": "~16.11.0",
"react-dom": "~16.11.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
"react-native-web": "0.11.7",
"three": "^0.119.1"
},
"devDependencies": {
"@babel/core": "7.9.0",
"@types/react": "~16.9.41",
"@types/react-dom": "~16.9.8",
"@types/react-native": "~0.62.13",
"typescript": "^3.4.5"
},
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo web",
"eject": "expo eject"
},
"private": true
}
Also, if I run the code, I get the following warning.
Warning: THREE.WebGLRenderer: OES_texture_float_linear extension not supported.
I don't really mind about the warning but I wonder if anyone could help me run the expo three on Android :)
As per #172 , make sure to include gl.endFrameEXP();
.
I've noticed that things animation on the real device but not on the iOS simulator (using expo go)