Hi I am an intermediator in three.js and new to react native. I am trying to create a webgl project in react native for mobile application with three js. I have seen that the ‘expo-cli’ has nice feature to run the react native apps. I tried that expo with a sample script I got on internet for the integration of react native with three js. But I am facing several errors on it. Since I am new to react native, I could n’t find solution for that issue. Can anyone please share a working example source code for the react native with three js application, what should I place within App.js . Thanks in Advance.
How kind of you that you decided to share exactly none of them with us - I mean, who even needs details, warnings, and error messages, ‘em a’ ‘ight? :’)
Recon it may be caused by not specifying the issue, like, at all? :’)
Did you try the official boilerplate that’s linked in react-three-fiber docs? :’)
Always welcome. :’)
Thank you for your reply @mjurczyk. What is react-three-fiber . I didn’t use that, I just install three and react. Please share an example with source code regarding this. I need to create a mobile hybrid application using react and threejs, this is what I know 
.
I tried with the following link Using Expo and Three.js with React-Native | by Zohayb Shaikh | Medium
But I got an error as “TypeError: undefined is not an object (evaluating '_expo.default.GLView')”
Please have a look into the following links .
below is not using react-three is fiber
and the following is using react-three-fiber
the codes are being different in using react-three-fiber. the codes are like xml. all lines are using tags.
is it necessary or we can go through the first method which having the codes like normal three.js script.
I resolve the issue, Here is the updated code
import Expo from "expo";
import React, { Component } from "react";
import * as THREE from "three";
import ExpoTHREE from "expo-three";
import { GLView } from "expo-gl";
import { Renderer } from "expo-three";
export default class App extends Component {
render() {
return (
<GLView style={{ flex: 1 }} onContextCreate={this._onGLContextCreate} />
);
}
_onGLContextCreate = async (gl) => {
// 1. Scene
var scene = new THREE.Scene();
// 2. Camera
const camera = new THREE.PerspectiveCamera(
75,
gl.drawingBufferWidth / gl.drawingBufferHeight,
0.1,
1000
);
// 3. Renderer
const renderer = new Renderer({ gl });
renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
//scene.add(cube);
const animate = () => {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
gl.endFrameEXP();
};
animate();
};
}
Now I am facing error in creating orbitcontrol in threejs within react native.
Any ideas or suggestions please. Thanks in advance
Hello, I am also trying to use react native expo with three js to make a mobile app that uses three js, I have copied your code just to get started but when I remove the backslashes from “//scene.add(cube);” I get the error in my console “requiring unknown module 598 if you are sure the module exists try restarting metro” I sure this is a react native error but I have no idea what it means or how to fix it. Please help, thanks
I should add I was pretty familiar with threejs a couple of months ago but since starting college I havent had as much time for coding so I am a bit rusty, forgive me if this is a basic error.
have you seen @react-three/fiber/native this will also allow you to load models, gltfs, textures and such. touch events are working too. most of drei helpers work as well GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber except the ones that are strictly for the web.
Is the language for react three fiber native different to the usual three js language? I’m looking at the documentation for react three fiber native and comparing it to my old code for threejs and it looks different
ok I see the language for react three fiber native is slightly different from regular three js, to cut a long story short do you think its possible to create something like this GitHub - nenadV91/Threejs-globe: Particles globe with countries in threejs using react three fiber native?
