Loading .ply file with three.js in react - reactjs

Question

I'm pretty new to React and am currently trying to visualize a point cloud (.ply file) with the help of three.js and react.
When trying to load the file though, I don't get any errors, the point cloud doesn't appear at all. Everything else does though...
Only thing I receive via the console is Infinty% loaded.
Click here to download the .ply file used in this example
Here's my code:
import React from "react";
import * as THREE from "three";
import { PLYLoader } from "three/examples/jsm/loaders/PLYLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
var container;
var camera, scene, renderer, controls, loader;
export default function Visualization() {
return <div></div>;
}
init();
animate();
function init() {
//Creating the container for the ply
container = document.createElement("div");
document.body.appendChild(container);
//initializing the camera
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 2000);
camera.position.z = 2;
camera.position.set(0, 9, 1500);
//initializing the scene
scene = new THREE.Scene();
scene.add(new THREE.AxesHelper(30));
//initializing renderer
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.outputEncoding = THREE.sRGBEncoding;
//adding renderer to DOM
container.appendChild(renderer.domElement);
//initializing interactive controls
controls = new OrbitControls(camera, renderer.domElement);
controls.update();
//rendering ply file
const plyLoader = new PLYLoader();
plyLoader.load(
"./Crankcase.ply",
function (geometry) {
const mesh = new THREE.Points(geometry);
mesh.rotateX(-Math.PI / 2);
scene.add(mesh);
},
// called when loading is in progress
function (xhr) {
console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
},
// called when loading has errors
function (error) {
console.log("An error happened");
console.log(error);
}
);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
controls.update();
}

Answer 1

A late reply to your question.
All you need to do is move your *.ply file to the public folder of your react application and in loader just use it like this:
plyLoader.load(
"Crankcase.ply",
function (geometry) {
const mesh = new THREE.Points(geometry);
mesh.rotateX(-Math.PI / 2);
scene.add(mesh);
},
// called when loading is in progress
function (xhr) {
console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
},
// called when loading has errors
function (error) {
console.log("An error happened");
console.log(error);
}
);
This worked for me