SDK Version: 43
Platform: all
Can find and test the project here emad on Expo
import {GLView } from 'expo-gl';
import React, { useState, } from "react";
import ExpoTHREE, { Renderer} from 'expo-three';
import { Dimensions } from 'react-native';
import { Camera } from 'expo-camera';
import {
AmbientLight,
BoxBufferGeometry,
Fog,
Mesh,
MeshStandardMaterial,
PerspectiveCamera,
PointLight,
Scene,
SpotLight,
} from 'three';
import BackButton from '../components/BackButton';
const windowWidth = Dimensions.get('screen').width;
const windowHeight = Dimensions.get('window').height;
const bag = require('../../assets/logo/light_logo.png');
export default function App({navigation}) {
let timeout;
const [hasPermission, setHasPermission] = useState(false);
React.useEffect(() => {
// Clear the animation loop when the component unmounts
(async () => {
const { status } = await Camera.requestCameraPermissionsAsync();
setHasPermission(true);
})();
return () => clearTimeout(timeout);
}, []);
return (<Camera style={{ height: windowHeight, width: windowWidth }}>
<BackButton onPress={() => { navigation.replace('SplashScreen') }} fixed />
<GLView
style={{ flex: 1 }}
onContextCreate={async (gl) => {
const { drawingBufferWidth: width, drawingBufferHeight: height } = gl;
const sceneColor = 0x000000;
// Create a WebGLRenderer without a DOM element
const renderer = new Renderer({ gl, alpha: true });
renderer.setSize(width, height);
renderer.clearColor(0, 0, 0, 1);
const camera = new PerspectiveCamera(68, width / height, 0.1, 1000);
camera.position.set(0, 5, 10);
const scene = new Scene();
scene.fog = new Fog(sceneColor, 1, 10000);
const ambientLight = new AmbientLight(0x101010);
scene.add(ambientLight);
const pointLight = new PointLight(0xffffff, 2, 1000, 1);
pointLight.position.set(0, 200, 200);
scene.add(pointLight);
const spotLight = new SpotLight(0xffffff, 0.5);
spotLight.position.set(0, 500, 100);
spotLight.lookAt(scene.position);
scene.add(spotLight);
const cube = new IconMesh();
const model = {
'bag.obj': {uri: 'http://vvfsalerno.hostinggratis.it/public/models/3d-model.obj'},
'bag.mtl': {uri: 'http://vvfsalerno.hostinggratis.it/public/models/3d-model.mtl'},
};
// Load model!
await ExpoTHREE.loadAsync([model['bag.obj'], model['bag.mtl']], null, name => model[name])
.then((obj) => {
// // Update size and position
ExpoTHREE.utils.scaleLongestSideToSize(obj, 4);
ExpoTHREE.utils.alignMesh(obj, { y: 1 });
// Add the mesh to the scene
scene.add(obj);
camera.lookAt(obj.position);
}).catch((error) => {
console.log(error);
});
console.log(scene.children.length)
function update() {
if (scene.children.length == 4)
scene.children[3].rotateY(0.03);
}
// Setup an animation loop
const render = () => {
timeout = requestAnimationFrame(render);
update();
renderer.render(scene, camera);
gl.endFrameEXP();
};
render();
}}
/>
</Camera>
);
}
class IconMesh extends Mesh {
constructor() {
super(
new BoxBufferGeometry(1.0, 1.0, 1.0),
new MeshStandardMaterial({
color: 0xff0000
})
);
}
}
With this code I arrive to simulate an AR on expo, it works on IOS even if the model result broken:
while on Android the object is not rendered at all and give me this error:
Expected URL scheme 'http' or 'https' but was 'file'
at node_modules\react-native\Libraries\BatchedBridge\NativeModules.js:104:50 in promiseMethodWrapper
at node_modules\expo-modules-core\build\NativeModulesProxy.native.js:15:23 in moduleName.methodInfo.name
at node_modules\expo-file-system\build\FileSystem.js:105:17 in downloadAsync
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:294:29 in invoke
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:155:27 in invoke
at node_modules\regenerator-runtime\runtime.js:190:16 in PromiseImpl$argument_0
at node_modules\react-native\node_modules\promise\setimmediate\core.js:45:6 in tryCallTwo
at node_modules\react-native\node_modules\promise\setimmediate\core.js:200:22 in doResolve
at node_modules\react-native\node_modules\promise\setimmediate\core.js:66:11 in Promise
at node_modules\regenerator-runtime\runtime.js:189:15 in callInvokeWithMethodAndArg
at node_modules\regenerator-runtime\runtime.js:212:38 in enqueue
at node_modules\regenerator-runtime\runtime.js:239:8 in exports.async
at node_modules\expo-file-system\build\FileSystem.js:101:7 in downloadAsync
at node_modules\expo-asset\build\PlatformUtils.js:49:25 in _downloadAsyncManagedEnv
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:294:29 in invoke
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:155:27 in invoke
at node_modules\regenerator-runtime\runtime.js:165:18 in PromiseImpl.resolve.then$argument_0
at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:123:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:177:14 in _callImmediatesPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:437:30 in callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:388:6 in __callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:132:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:365:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:131:4 in flushedQueue