adds sdk27 three-js example

with-three-js/.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["babel-preset-expo"],
+  "env": {
+    "development": {
+      "plugins": ["transform-react-jsx-source"]
+    }
+  }
+}

with-three-js/.gitignore

@@ -0,0 +1,3 @@
+node_modules/**/*
+.expo/*
+npm-debug.*

with-three-js/.watchmanconfig

@@ -0,0 +1 @@
+{}

with-three-js/App.js

@@ -0,0 +1,116 @@
+import Expo from 'expo';
+import ExpoTHREE from 'expo-three';
+import React from 'react';
+import * as THREE from 'three';
+import { StyleSheet, Text, View } from 'react-native';
+
+console.disableYellowBox = true;
+
+let animationStack = [];
+let animationKeys = {};
+
+const getRandomArbitrary = (min, max) => {
+  return Math.random() * (max - min) + min;
+};
+
+const createCubeMesh = async ({ scene, gl }) => {
+  const geometry = new THREE.BoxGeometry(40, 40, 70);
+  const material = new THREE.MeshBasicMaterial({
+    transparent: true,
+    opacity: 0.7,
+    map: await ExpoTHREE.createTextureAsync({
+      asset: Expo.Asset.fromModule(require('./assets/ice.jpg')),
+    }),
+  });
+
+  const cube = new THREE.Mesh(geometry, material);
+  cube.position.y = getRandomArbitrary(-60, 60);
+
+  scene.add(cube);
+  return cube;
+};
+
+export default class App extends React.Component {
+  render() {
+    return <Expo.GLView style={{ flex: 1 }} onContextCreate={this._handleContextCreate} />;
+  }
+
+  _handleContextCreate = async gl => {
+    // Scene
+    const scene = new THREE.Scene();
+    scene.background = new THREE.Color('#ECECEC');
+
+    // Camera
+    const camera = new THREE.PerspectiveCamera(
+      70,
+      gl.drawingBufferWidth / gl.drawingBufferHeight,
+      0.1,
+      1000
+    );
+    camera.position.y = 0;
+    camera.position.z = 150;
+    camera.position.x = 150;
+
+    const renderer = ExpoTHREE.createRenderer({ gl, antialias: true });
+    renderer.gammaInput = true;
+    renderer.gammaOutput = true;
+    renderer.shadowMap.enabled = true;
+    renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight);
+
+    const cube = await createCubeMesh({ scene, gl });
+    animationStack.push({
+      id: cube.id,
+      iterations: 0,
+      mesh: cube,
+      rotationZ: 0.01,
+      rotationX: getRandomArbitrary(-0.01, 0.01),
+    });
+
+    let totalIterations = 0;
+
+    const render = async () => {
+      requestAnimationFrame(render);
+      totalIterations += 1;
+
+      if (totalIterations > 70) {
+        const cube = await createCubeMesh({ scene, gl });
+
+        animationStack.push({
+          id: cube.id,
+          iterations: 0,
+          mesh: cube,
+          rotationZ: 0.01,
+          rotationX: getRandomArbitrary(-0.01, 0.01),
+        });
+
+        totalIterations = 0;
+      }
+
+      animationStack.forEach(entity => {
+        if (entity) {
+          entity.iterations += 1;
+          entity.mesh.position.x += 1;
+          entity.mesh.rotation.z += entity.rotationZ;
+          entity.mesh.rotation.x += entity.rotationX;
+        }
+
+        if (entity.iterations > gl.drawingBufferWidth) {
+          animationKeys[entity.id] = true;
+          scene.remove(entity.mesh);
+        }
+      });
+
+      animationStack = animationStack.filter(entity => {
+        return !animationKeys[entity.id];
+      });
+
+      animationKeys = {};
+
+      renderer.render(scene, camera);
+
+      gl.endFrameEXP();
+    };
+
+    render();
+  };
+}

with-three-js/app.json

@@ -0,0 +1,21 @@
+{
+  "expo": {
+    "name": "with-three-js",
+    "description": "Example using Three JS",
+    "slug": "ice",
+    "privacy": "public",
+    "sdkVersion": "27.0.0",
+    "platforms": ["ios", "android"],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ECECEC"
+    },
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

with-three-js/package.json

@@ -0,0 +1,11 @@
+{
+  "main": "node_modules/expo/AppEntry.js",
+  "private": true,
+  "dependencies": {
+    "expo-three": "^2.2.2-alpha.1",
+    "expo": "^27.0.1",
+    "react": "16.3.1",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-27.0.0.tar.gz",
+    "three": "^0.89.0"
+  }
+}