Potree's point cloud viewer displays an empty screen

Currently, I am facing difficulties with the Potree viewer as I try to display one of the sample html files from the potree npm library. Running on npm version 8.19.2, I have installed potree version '0.1.0' using the command 'npm install potree'. However, it seems that the latest version available on GitHub is 1.8.

In order to test the installation, I have been utilizing node express by running 'node app.js'. The express server appears to be working correctly as it is able to locate and display the html file. Despite this, the page remains blank with only the tab labelled as 'Potree Viewer', indicating that the viewer launches successfully but does not progress beyond that point. Has anyone else encountered this issue or is it just me? I have attempted uninstalling and reinstalling without any success.

This is what my 'app.js' file looks like:

const express = require('express');
const app = express();
const path = require('path');
const router = express.Router();
router.get('/',function(req,res){
  res.sendFile(path.join(__dirname+'/node_modules/potree/examples/shapefiles.html'));
});
 
app.use('/', router);
app.listen(process.env.port || 1234);
console.log('Running at Port 1234');

Answer №1

Adding more details to the unresolved issue at hand, I have yet to find a solution. It appears that the problematic line is:

import * as THREE from "../libs/three.js/build/three.module.js";

This line in the script section of the HTML file within the potree examples directory seems to be causing the execution to crash. When I comment out everything after this import line up to the closing script tag and insert an alert before this line, like so:

    <script type="module">
    alert("ok");
    import * as THREE from "../libs/three.js/build/three.module.js";
    /*
    ...
    */
    </script>

, the alert does not appear. However, if I also comment out the entire '... THREE ...' import line, as shown below:

    <script type="module">
    alert("ok");
    /*
    import * as THREE from "../libs/three.js/build/three.module.js";
    ...
    */
    </script>

, the alert now successfully displays, even though the "three.module.js" file exists. Here is the console output when running the web server from my Visual Studio Flask project (which used to function correctly 6 months ago):

Serving Flask app 'MyPotreeTest' (lazy loading)
Environment: production
WARNING: This is a development server. Do not use it in a production deployment.
Use a production WSGI server instead.
Debug mode: off
Running on http://localhost:1234/ (Press CTRL+C to quit)
127.0.0.1 - - [28/Sep/2022 17:26:37] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [28/Sep/2022 17:26:37] "GET /static/css/s2_bstreeview.min.css HTTP/1.1" 200 -
127.0.0.1 - - [28/Sep/2022 17:26:37] "GET /static/scripts/modernizr-2.6.2.js HTTP/1.1" 404 -
127.0.0.1 - - [28/Sep/2022 17:26:37] "GET /static/scripts/s2_bstreeview.min.js HTTP/1.1" 200 -
127.0.0.1 - - [28/Sep/2022 17:26:38] "GET /static/Ico/favicon.ico HTTP/1.1" 200 -
127.0.0.1 - - [28/Sep/2022 17:26:43] "GET /login HTTP/1.1" 200 -
(remaining lines omitted for brevity)

Your assistance will be highly appreciated. I have attempted to download and transfer version 1.8 to my web server, similar to what I did 6 months ago when it was operational. Additionally, I tried installing it with node and npm following the instructions on the 'https://github.com/potree/potree' page, but unfortunately, no changes were observed.

I believe it could be a simple configuration or library version conflict, even though I am using the same files as before. Unfortunately, I cannot pinpoint why it's not working.

Answer №2

If you are facing a similar problem, just transferring the potree version to the web server and showing the html files in the sample folder without first building it in node will not function correctly with potree version 1.8. However, this method does work with potree version 1.7.1.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The CORS policy has blocked the AWS API Gateway request originating from 'http://localhost:8080'

Currently, I am facing an issue with deploying an API for use in Front End. The API functions properly when tested alone, but it returns a CORS error when integrated into a Vue app. The specific error message is as follows: Access to XMLHttpRequest at &a ...

The reason why the bootstrap Quick Install Package isn't loading

Currently, I am in the process of developing an ASP.Net Core Web Application. After using the Quick Install Package to install Bootstrap, it has now been added to my dependencies: https://i.stack.imgur.com/fMnWV.png Within the "node_modules" folder, eve ...

Encountering an error when creating LevelDB with NodeJS

Attempting to access a database using the following code: const LevelUP = require('levelup'); const LevelDown = require('leveldown'); const path = require('os').homedir() + '/keys.db'; const db = LevelUP(LevelDow ...

What strategies can be implemented to enhance the create and update performance for a high volume of entries in Mongoose/MongoDB?

I am seeking the most efficient method to bulk create/update in my Express application that utilizes Mongoose/MongoDB. Is there a way to achieve this with a single database operation? On the frontend, users upload a CSV file which is then converted into a ...

Tips for executing an asynchronous function in a synchronized manner within a Node.js environment

Currently, I am utilizing the Express framework. The issue that I am encountering involves a variable called 'duration'. Whenever a request is made to '/', the total duration of a given video is calculated and saved to this variable. H ...

The address :::3000 is already in use by NestJS

While attempting to deploy my NestJs server on a C-Panel hosting, I have encountered an issue. Despite properly installing all node_modules and ensuring every project file is in place, the server fails to start and continuously displays the following error ...

What is the best way to enforce the image field as mandatory in a node.js application using postman?

If the image field is unchecked in Postman, I need to show an error message in response instead of a successful upload. How can this be achieved? Functionality of Multer const storage = multer.memoryStorage(); fileFilter = (req, file, cb, res) => { ...

What is the best way to load my CSS file using express.static?

How do I properly load my CSS file using express.static in Node.js? I have attempted various methods to link my stylesheet to my HTML file through Express, and I'm also interested in learning how to include images, JavaScript, and other assets to crea ...

Error in Node.js: [Error: Query parameter should not be empty]

I've been recently focusing on a project that involves sending the required name to my profile.js file using a POST request. However, whenever I try to access console.log(req.body.bookName) (as the data being sent is named bookName), it shows an error ...

When trying to run Puppeteer JavaScript on a page in headless mode, the execution fails

My webpage (secretpage.php) has JavaScript in the HTTP response that sends the value of the userName parameter to my server. <svg/onload=fetch('http://localhost:8080/username='+document.getElementById("userName").innerHTML)> When ...

Windows npm configuration settings

After receiving helpful answers to my previous question about using a named parameter in an npm run script, I encountered a new problem. It seems that the $npm_config_variable doesn't function correctly on Windows OS. I am in search of a solution that ...

Mongoose: Tips for Retrieving String Data from a Nested Document

Attempting a query Product.findOne({'variation.sku': req.params.productVariationSKU },{'_id': 0, 'variation.price' :1}) to retrieve the price of a specific product variation, but encountering an issue where all prices for ever ...

npm encountered an issue while attempting to read the JSON file

Every time I attempt to install express using npm, I encounter the same error message: Failed to parse json No data, empty input at 1:1 File: /root/.npm/inherits/2.0.1/package/package.json Failed to parse package.json data. package.json must be actual JSO ...

Determining whether a request should be processed by a middleware in an Express application dynamically

New Beginnings: As a newcomer to the world of Epxress, I recently built a middleware for checking user credentials. Here is how I specified it: var check = function(req, res, next){/* checking user cred*/} I then used it in my code like this: app.use(c ...

The UglifyJsPlugin in Webpack encounters an issue when processing Node modules that contain the "let" keyword

Below is the code snippet from my project which utilizes Vue.js' Webpack official template: .babelrc: "presets": [ "babel-preset-es2015", "babel-preset-stage-2", ] webpack.prod.config.js new webpack.optimize.UglifyJsPlugin({ compress: { ...

Cache service for Ionic npm

While attempting to integrate the Ionic cache service into my Ionic3 project, I followed this tutorial on using Ionic Cache from npm. However, upon running ionic serve, an error was thrown as shown below: TypeError: Object(...) is not a function at CacheS ...

Node.js: The error "req.session.save is not a function" occurred while trying to authenticate

I am currently facing an issue with PassportJS while trying to authenticate users in my application. Once a user logs in, the session is created, but upon redirection, the session seems to become undefined again as it has not been saved properly. I read on ...

Screen content of a post request in Node.js

Can this code in node.js + express be simplified? // Code snippet for registering a new participant app.post('/api/participant', function (req, res, next) { var data = req.body; // Ensure only specific fields are uploaded var parti ...

The scenario of two users simultaneously gaining control access in socket.io creating a race condition

There is a need to ensure that only one user at a time is notified for an available room. I am implementing a solution to prevent multiple users from being notified simultaneously for the same room. socket.on('Check', function (room) { io.in(r ...

Sequelize: Query results do not have defined instance methods and properties

The Sequelize version is 6.6.2 Mysql2 version: 2.2.5 I have constructed my Model in the following manner and defined methods as shown: interface IUserAttributes { user_id: number; logon_name: string; user_password: string; full_name: string; di ...