Created react-three-fiber example

with-react-three-fiber/App.js

@@ -0,0 +1,56 @@
+import React, { useRef, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { Canvas, useFrame } from "react-three-fiber";
+
+function Box(props) {
+  // This reference will give us direct access to the mesh
+  const mesh = useRef();
+
+  // Set up state for the hovered and active state
+  const [hovered, setHover] = useState(false);
+  const [active, setActive] = useState(false);
+
+  // Rotate mesh every frame, this is outside of React without overhead
+  useFrame(() => {
+    if (mesh && mesh.current) {
+      mesh.current.rotation.x = mesh.current.rotation.y += 0.01;
+    }
+  });
+
+  return (
+    <mesh
+      {...props}
+      ref={mesh}
+      scale={active ? [1.5, 1.5, 1.5] : [1, 1, 1]}
+      onClick={(e) => setActive(!active)}
+      onPointerOver={(e) => setHover(true)}
+      onPointerOut={(e) => setHover(false)}
+    >
+      <boxBufferGeometry attach="geometry" args={[1, 1, 1]} />
+      <meshStandardMaterial
+        attach="material"
+        color={hovered ? "hotpink" : "orange"}
+      />
+    </mesh>
+  );
+}
+
+export default function App() {
+  return (
+    <View style={styles.container}>
+      <Canvas>
+        <ambientLight />
+        <pointLight position={[10, 10, 10]} />
+        <Box position={[-1.2, 0, 0]} />
+        <Box position={[1.2, 0, 0]} />
+      </Canvas>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "black",
+  },
+});

with-react-three-fiber/README.md

@@ -0,0 +1,25 @@
+# React Three Fiber Example
+
+<p>
+  <!-- iOS -->
+  <img alt="Supports Expo iOS" longdesc="Supports Expo iOS" src="https://img.shields.io/badge/iOS-4630EB.svg?style=flat-square&logo=APPLE&labelColor=999999&logoColor=fff" />
+  <!-- Android -->
+  <img alt="Supports Expo Android" longdesc="Supports Expo Android" src="https://img.shields.io/badge/Android-4630EB.svg?style=flat-square&logo=ANDROID&labelColor=A4C639&logoColor=fff" />
+  <!-- Web -->
+  <img alt="Supports Expo Web" longdesc="Supports Expo Web" src="https://img.shields.io/badge/web-4630EB.svg?style=flat-square&logo=GOOGLE-CHROME&labelColor=4285F4&logoColor=fff" />
+</p>
+
+Create Three.js projects using React components and props!
+
+## 🚀 How to use
+
+> `npx create-react-native-app my-app -t with-react-three-fiber`
+
+- Run `yarn` or `npm install`
+- Run [`expo start`](https://docs.expo.io/versions/latest/workflow/expo-cli/), try it out.
+
+## 📝 Notes
+
+- [react-three-fiber docs](https://github.com/react-spring/react-three-fiber)
+- [three.js docs](https://threejs.org/docs/)
+- [expo-three docs](https://github.com/expo/expo-three)

with-react-three-fiber/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

with-react-three-fiber/package.json

@@ -0,0 +1,16 @@
+{
+  "dependencies": {
+    "expo": "37.0.7",
+    "expo-gl": "8.2.0",
+    "expo-three": "5.4.0",
+    "react": "16.9.0",
+    "react-dom": "16.9.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
+    "react-native-web": "0.11.7",
+    "react-three-fiber": "^4.2.8",
+    "three": "^0.117.1"
+  },
+  "devDependencies": {
+    "@babel/core": "7.9.0"
+  }
+}