expo-three icon indicating copy to clipboard operation
expo-three copied to clipboard

expo-three animates on web but not on Android

Open Chikdolman opened this issue 4 years ago • 2 comments

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

Chikdolman avatar Aug 28 '20 13:08 Chikdolman

As per #172 , make sure to include gl.endFrameEXP();.

timnlupo avatar Sep 14 '20 05:09 timnlupo

I've noticed that things animation on the real device but not on the iOS simulator (using expo go)

wcandillon avatar Feb 21 '21 08:02 wcandillon