Loading an E57 file directly in THREE.js is not straightforward because there is no out of the box loader for this format. three-e57-loaderis a cross-platform E57 file loader for THREE.js which bridges this gap. It takes URL of a E57 file as an input and returns THREE.BufferGeometry instance.
This library works well in react and react-native environment using react-three-fiber.
yarn add three-e57-loader three
or
npm i three-e57-loader three
import * as THREE from 'three'
import { E57Loader } from 'three-e57-loader'
const loader = new E57Loader();
const scene = new THREE.Scene();
onLoad = (geometry) => {
geometry.center();
const vertexColors = geometry.hasAttribute('color') === true;
const color = vertexColors ? undefined : 0xffffff;
const material = new THREE.PointsMaterial({ size: 1, vertexColors, color });
const points = new THREE.Points(geometry, material);
scene.add(points);
}
const onError = (error) => {
console.log(error);
}
const onProgress = (xhr) => {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
}
// url = 'http://to/my/folder/file.e57'
loader.load(url, onLoad, onProgress, onError);