Sunday, February 05, 2023

How would I just insert my three.js visualization in to a react native app?

So I found this website that had a real time editor for react native apps

Except every demo was broken and failed. No amount of debugging would bring any back to life. 

I update the library version and security things break just one problem after the next. 

I am really upset with it really because it's so cool if it actually worked. 

I tried the gyro, magnetometer, light sensor, all just read 0... Zip nada.  

three.js just will not run for anything. 

This one is working after mashing library version numbers for 2 hours:  

It react native itself broken? or just expo? and it expo a library or this website?

Response from ChatGPT.  

In order to integrate a Three.js visualization into a React Native app, you will need to wrap your Three.js code in a React Native component. Here are the steps you can follow:

  1. Install the react-three-fiber library: React-three-fiber is a React renderer for Three.js that makes it easy to use Three.js in React Native. You can install it using npm by running the following command: npm install react-three-fiber.

  2. Create a React Native component: Create a new React Native component that will render your Three.js visualization. You can use the useThree hook provided by react-three-fiber to access the Three.js renderer and scene.

  3. Wrap your Three.js code: Wrap your existing Three.js code in the React Native component you created in step 2. You can use the Canvas component provided by react-three-fiber to create a Three.js renderer, and the useRender hook to trigger updates to your Three.js scene.

  4. Import the React Native component: Import the React Native component you created in step 2 into your main React Native app, and use it to render your Three.js visualization.

Here is an example of what your React Native component might look like:

import React from 'react'; import { Canvas, useThree } from 'react-three-fiber'; const ThreeJSVisualization = () => { const { gl, scene, camera } = useThree(); // Your Three.js code here return ( <Canvas gl={gl} camera={camera}> <ambientLight /> <pointLight position={[10, 10, 10]} /> {/* Your Three.js scene here */} </Canvas> ); }; export default ThreeJSVisualization;

This is a basic example of how you can integrate a Three.js visualization into a React Native app using react-three-fiber. You can learn more about react-three-fiber and how to use it to create Three.js scenes in React Native by visiting the official documentation at

Below is the actual code that worked in Expo

import React, { useRef, useState } from 'react'; import { StyleSheet, View } from 'react-native'; import { Canvas, useRender, 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(() => (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', }, });

Package.json { "dependencies": { "three": "^0.108.0", "expo-gl": "8.0.0", "scheduler": "0.13.3", "expo-three": "5.0.0", "react-reconciler": "0.20.4", "react-three-fiber": "4.0.17" } }

No comments: