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