在反应中加载 .ply 文件和three.js答案

【问题标题】：Loading .ply file with three.js in react在反应中加载 .ply 文件和three.js
【发布时间】：2022-10-19 17:57:09
【问题描述】：

我对 React 还是很陌生，目前正在尝试在 three.js 的帮助下可视化点云（.ply 文件）并做出反应。

但是，当尝试加载文件时，我没有收到任何错误，点云根本没有出现。其他一切虽然...

我通过控制台收到的唯一信息是Infinty% loaded。

Click here to download the .ply file used in this example

这是我的代码：

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

【问题讨论】：

标签： reactjs three.js react-three-fiber

【解决方案1】：

对您的问题的迟到答复。您需要做的就是将 *.ply 文件移动到 react 应用程序的公共文件夹中，然后在加载器中像这样使用它：

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

这对我有用

【讨论】：