Open ogaseb opened 4 years ago
You might end up using react-native-webview
to wrap your Three.js canvas webpage into your Expo native app.
Anyway, just let me know if you found how to make react-three-fiber
+ expo-three-orbit-controls
exchangeably work.
I did a mistake and wrapped OrbitControlsView
in parent View
that's why I was getting errors. But, even doing it "right" so without parent View
it's rendering everything correctly, but it's not responsive, touch controls don't work. Now I'm not sure if it's a problem with my device (oneplus 6) or there is something that I'm missing.
@ProPanek In my case, I end up using<WebView source={{ uri: 'http://10.0.2.2:8080/embedding-page' }} />
wrapper, because most of the parts of my react-three-fiber
canvas have problems with Expo app.
E.g.,
OrbitControls
in both Next.js and Expo is just my luck. https://github.com/expo/expo-cli/issues/2059#issuecomment-623681485It's really hard to implement an interchangeable Three.js canvas with Next.js and Expo.
I though react-three-fiber
will solve that but it's not! (But if not the only way, it's the best way to use Three.js with Next.js.)
Three.js is really build FOR WEB. I guess expo-three
have their own implementations how to load native files but not web files.
For anyone trying to get it to work along with react-three-fiber:
import {
Canvas,
useRender,
useFrame,
useUpdate,
useThree,
useResource,
useLoader,
} from "react-three-fiber/native";
const Test: React.FC = () => {
const [camera, setCamera] = useState<Camera | null>(null);
function Camera(props?: any) {
const { camera } = useThree();
useEffect(() => {
setCamera(camera);
}, []);
return <perspectiveCamera ref={camera} {...props} />;
}
return(
<View style={{ flex: 1 }}>
<OrbitControlsView style={{ flex: 1 }} camera={camera}>
<Canvas>
<Camera/>
</Canvas>
</OrbitControlsView>
</View>
)
}
Only issue i'm facing now, is that the Canvas is not receiving touch/click events anymore.
Thanks @dmegue your example was super helpful. I was able to get this working in a more concise way with:
const Test = () => {
const [camera, setCamera] = useState<Camera | null>(null);
return(
<View style={{ flex: 1 }}>
<OrbitControlsView style={{ flex: 1 }} camera={camera}>
<Canvas onCreated={({ camera }) => setCamera(camera)}></Canvas>
</OrbitControlsView>
</View>
)
}
i have found another library that manages to fix orbit controls for RN with r3f https://github.com/TiagoCavalcante/r3f-native-orbitcontrols ive tested this and it seems to do the trick, without deafening the gesture events
I also tried the r3f-native-orbitcontrols, but my functions at onChange are to expensive to be executed on every render during touch. How can i mimick a onrelease event in r3f-native-orbitcontrols?
Hi! Is there even a way to make it work with the
Canvas
component thatreact-three-fiber
is providing? I was trying to wrapCanvas
with your component but it doesn't seem to work like that.