Hey, I’m new to three.js but I think my problem might be related to my specific setup. In a remote workspace in VS Code I created a react app that uses the three.js PLYloader to load and display a ply file. This works fine until I change networks. Suddenly total of ProgressEvent is 0 and loaded is 1801 no matter which ply I try to load.
If I create a new react app and simply copy the code it works again. I’m clueless as to why that is and I would appreciate any help!
Here is my three.js code for the react component I render:
//initialize camera position
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 150);
camera.position.z = 2;
camera.position.set(0, 9, 100);
//initialize scene
scene = new THREE.Scene();
scene.add(new THREE.AxesHelper(30));
// add scene lighting
const light = new THREE.SpotLight()
light.position.set(20, 20, 20)
scene.add(light)
//initialize renderer
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.outputEncoding = THREE.sRGBEncoding;
//add renderer to DOM
container.appendChild(renderer.domElement);
//initialize interactive controls to move in scene
controls = new OrbitControls(camera, renderer.domElement);
controls.update();
//initialize ply loader
const plyLoader = new PLYLoader();
plyLoader.load(
"R0149.ply",
function (geometry) {
geometry.computeVertexNormals();
const material = new THREE.PointsMaterial( { size: 0.01, vertexColors: true } );
// const mesh = new THREE.Points( geometry, material );
const mesh = new THREE.Mesh( geometry, material );
mesh.name = 'ply';
scene.add( mesh );
console.log(scene.getObjectByName('ply'));
},
// called when loading is in progress
function (xhr) {
console.log(xhr);
console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
},
// called when loading has errors
function (error) {
console.log("An error happened");
console.log(error);
}
);
}