Threejs with react native using expo

Questions
#1

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.

#2

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. :’)

#3

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 :frowning_face: .

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')”

#4

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.

#5

:smiley: 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();
  };
}
#6

:frowning_face: Now I am facing error in creating orbitcontrol in threejs within react native.
Any ideas or suggestions please. Thanks in advance