Potree点云查看器通过Express运行示例页面显示空白求助

为啥会出现空白页面？ #

1. 版本严重脱节：你通过npm安装的Potree是0.1.0版本，而GitHub上最新稳定版已经到1.8了，npm仓库里的这个旧版本长期未更新，示例页面依赖的资源路径、文件结构和新版完全不匹配，导致加载失败。
2. 静态资源未托管：你的Express代码只返回了单个HTML文件，但页面中引用的Potree核心JS、样式表、模型资源等没有被Express设置为可访问的静态资源，浏览器无法获取这些依赖，自然只能显示标签页标题。

具体解决步骤 #

第一步：改用GitHub最新版Potree #

放弃npm的旧版本，直接拉取GitHub官方仓库的最新代码：

git clone https://github.com/potree/potree.git
cd potree
npm install
npm run build

第二步：调整Express代码，托管静态资源 #

修改你的app.js，让Express同时提供Potree核心资源和示例资源的访问路径：

const express = require('express');
const app = express();
const path = require('path');

// 托管Potree编译后的核心静态资源
app.use('/build', express.static(path.join(__dirname, 'potree/build')));
// 托管示例所需的各类资源（如模型、shapefile文件等）
app.use('/examples', express.static(path.join(__dirname, 'potree/examples')));

// 返回示例HTML文件
app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, 'potree/examples/shapefiles.html'));
});

app.listen(process.env.port || 1234);
console.log('Running at Port 1234');

第三步：验证页面加载 #

启动服务后，访问http://localhost:1234，按F12打开开发者工具查看控制台，确认是否还有404资源加载错误，若有则检查路径是否与HTML内的引用对应。

补充说明 #

不少用户都遇到过相同问题，核心原因就是npm上的Potree包长期未维护，与GitHub最新版本的资源结构脱节，直接使用GitHub源码构建是目前最可靠的方案。

内容的提问来源于stack exchange，提问作者user10028792