Threejs 使用 JavaScript 函數庫或 API 來在網頁瀏覽器中創建和展示動畫的三維計算機圖形
expo-gl 提供 WebGL2 的Expo模塊

React-three-fiber 是一套基於 Threejs 的 React 渲染器。
react-spring 是一套基於彈簧物理學的動畫庫，應滿足您大多數與UI相關的動畫需求。
可以參考 Juri 大大的 https://ithelp.ithome.com.tw/articles/10247210

? @ react-three / gltfjsx –將GLTF轉換為JSX組件
? @ react-three / drei –反應三纖維的有用幫手
? @ react-three / 3 /後處理–後處理效果
? @ react-three / flex –用於反應三纖維的flexbox
? @ react-three / xr – VR / AR控制器和事件
? @ react-three / cannon –基於物理的鉤子
? zustand –狀態管理
✌️ react-spring –基於彈簧物理的動畫庫
? 反應使用手勢–鼠標/觸摸手勢
? react-three-gui – GUI /調試工具

先上code https://github.com/CS6/react-native-three-fiber-test

建立專案

react-native init  rn3d

先看這篇 https://docs.expo.io/bare/existing-apps/
然後照這篇做 https://docs.expo.io/bare/installing-unimodules/

import React, { useRef, Suspense, useState, useEffect, useCallback, useMemo } from "react";
import { StyleSheet, View } from "react-native";
import { Canvas, useFrame, useThree } from "react-three-fiber";
import { loadDaeAsync, Renderer, THREE, utils } from 'expo-three';
import { ExpoWebGLRenderingContext, GLView } from 'expo-gl';
import { useSprings, useSpring, a } from 'react-spring/three'
global.THREE = global.THREE || THREE;

放上 package.json 讓大家參考

"react-spring": "8.0.27",
"buffer": "^5.6.0",
"expo-asset-utils": "^1.2.0",
"expo-font": "^8.3.0",
"expo-gl": "~9.1.1",
"expo-three": "5.4.0",
"gl-react": "^4.0.1",
"gl-react-native": "^4.0.1",
"react": "16.13.1",
"react-native": "0.63.3",
"react-native-unimodules": "^0.11.0",
"react-three-fiber": "^4.2.8",
"three": "^0.117.1"

看到兩個方塊就成功了～可以點喔

嘗試自己加個方塊～

來把 react-three-fiber 的範例加入Canvas

記得在開頭宣告 THREE

global.THREE = global.THREE || THREE;

https://codesandbox.io/embed/r3f-montage-jz9l97qn89

終於run起來了～～ 但是怎麼不會動(´ﾟдﾟ`)

原來是模擬器不支援效能不足啊! 換用手機就正常了