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

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();
}

Read more here: Source link