Potree 库在 React js 中无法一致工作

Question

我在我的 React Web 应用程序中集成了 potree 来渲染 3D 模型和点云。每当我第一次加载它时，它都会毫不费力地渲染和加载 3D 模型，但如果刷新或重新访问页面，它就会无法加载。提示错误——Potree未定义。 怎么解决这个问题？

这是我的代码片段。

import React from 'react';
import styled from "styled-components/macro";
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader.js"
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";

import * as THREE from 'three';
const Wrapper = styled.div`
 background-color: black;
 display: flex;
 flex-direction: column;
 height: 675px;
 position: relative;
`;

// import vanillaJS Potree libs, /!\ would be best with proper ES6 import


export default class PointcloudNavigator extends React.Component {
   constructor(props) {
       super(props)
       this.potreeContainerDiv = React.createRef();
   }


   render() {
       return (
           <div id="potree-root">
               <Wrapper ref={this.potreeContainerDiv} className={"potree_container "}>
                   <div id="potree_render_area"></div>
               </Wrapper>

           </div>
       )
   }
   addLights = () => {
       const lights = [];

       lights[0] = new THREE.PointLight(0xffffff, 1.2, 0);
       lights[1] = new THREE.PointLight(0xffffff, 1.2, 0);
       lights[2] = new THREE.PointLight(0xffffff, 1.2, 0);
       lights[0].position.set(0, 0, 0);
       lights[1].position.set(1000, 2000, 1000);
       lights[2].position.set(- 1000, - 2000, - 1000);

       this.viewer.scene.scene.add(lights[0]);
       this.viewer.scene.scene.add(lights[1]);
       this.viewer.scene.scene.add(lights[2]);
       const ambientLight = new THREE.AmbientLight(0x404040, 2.0);
       ambientLight.position.set(0, 0, 0);
       this.viewer.scene.scene.add(ambientLight);
       const dirLight = new THREE.DirectionalLight(0xcccccc, 0.5);
       dirLight.position.set(0, 0, 0);
       this.viewer.scene.scene.add(dirLight);
   };

   setPointCloudsVisible = (flag) => {
       this.viewer.setEDLEnabled(true);
       
       // Using opacity we can still perform measurements
       this.viewer.setEDLOpacity(flag ? 1 : 0);
   
       // for(let pointcloud of viewer.scene.pointclouds){
       //     pointcloud.visible = flag;
       // }
     }
   componentDidMount() {
       var width = window.innerWidth;
       var height = window.innerHeight;
       // initialize Potree viewer
       const viewerElem = this.potreeContainerDiv.current
       const Potree = window.Potree
       console.log(Potree);

       this.camera = new THREE.PerspectiveCamera(45, width / height, 1, 2000);
       this.viewer = new Potree.Viewer(viewerElem);
       this.addLights()

       this.viewer.setEDLEnabled(true);
       this.viewer.setFOV(60);
       this.viewer.setPointBudget(1 * 1000 * 1000);
       this.viewer.setClipTask(Potree.ClipTask.SHOW_INSIDE);
       this.viewer.loadSettingsFromURL();

       this.viewer.setControls(this.viewer.orbitControls)

       // console.log({ this.viewer })

       this.viewer.loadGUI(() => {
           this.viewer.setLanguage('en');
           document.getElementById("menu_appearance").next().show();
           this.viewer.toggleSidebar();
       });

       // Load and add point cloud to scene
       // let url = "./point_cloud.ply"
       let url = "http://dev.xyz.in/3d/entwine_pointcloud/ept.json"

       // let url = "./odm_mesh.ply"

       this.scene = this.viewer.scene;
       Potree.loadPointCloud(url).then(e => {
           let pointcloud = e.pointcloud;
           let material = pointcloud.material;

           material.activeAttributeName = "rgba";
           // material.activeAttributeName = "elevation";
           // pointcloud.material.elevationRange = [60, 120];
           material.minSize = 2;
           material.pointSizeType = Potree.PointSizeType.FIXED

           this.viewer.scene.addPointCloud(pointcloud);

           this.viewer.fitToScreen();

           console.log("This is the url", url);
       }, e => console.err("ERROR: ", e));
       const objLoader = new OBJLoader(this.manager);
       const mtlLoader = new MTLLoader(this.manager);
       objLoader.crossOrigin = '';
       mtlLoader.crossOrigin = '';

       mtlLoader.load(`http://dev.xyz.in/3d/119/odm_texturing/odm_textured_model_geo.mtl`, (materials) => {
           // let changeMapKd = async () => {
           //     Object.keys(materials.materialsInfo).map((material, key) => {
           //         console.log(materials.materialsInfo[material], '++++++++++++++++++++++++++++++++++', key)
           //         materials.materialsInfo[material].map_kd = `${materials.materialsInfo[material].map_kd}?${this.props.user.sas_token}`
           //     })
           // }
           // changeMapKd().then(() => {
           console.log(materials)
           materials.preload()
           objLoader.setMaterials(materials)
           objLoader.load(`http://dev.xyz.in/3d/119/odm_texturing/odm_textured_model_geo.obj`, (object) => {
               console.log("sfjbdjghdbfksdlnfdkfsm", object)
               // this.camera.position.y = -50;
               // this.camera.position.z = 10;
               var box = new THREE.Box3().setFromObject(object);
               box.getCenter(object.position)
               object.position.multiplyScalar(-1);
               var pivot = new THREE.Group();
               this.viewer.scene.scene.add(pivot);
               pivot.add(object)

               this.setPointCloudsVisible(false);

           })
           // })
       })

   }


}

Answer 1

你能解决这个问题吗？