浏览器打开 three.js-r160/editor/index.html 后，为何显示白屏

本文链接：https://blog.csdn.net/belldeep/article/details/139562663

从百度网盘请输入提取码下载 three.js-r160.zip 解压到 D:\

请先看：Three.js 编辑器 editor 使用详解

浏览器打开 /three.js-r160/editor/index.html 时出现白屏可能是由于以下原因：

资源加载失败：页面依赖的 JavaScript 或 CSS 文件没有正确加载。

跨域问题：如果你是从本地文件系统打开这个页面，浏览器的安全策略可能会阻止加载某些资源。

JavaScript 错误：页面中的 JavaScript 代码可能存在错误，导致页面渲染失败。

浏览器兼容性：你使用的浏览器可能不支持所需的 HTML5 特性或者 WebGL 。

解决方法：

检查网络请求：检查浏览器的开发者工具中的网络（Network）面板，查看是否有资源加载失败。

本地服务器：使用本地服务器（如 Apache, Nginx, 或 HTTP 服务器）来托管页面，而不是直接从文件系统打开。

检查控制台：查看浏览器的开发者工具中的控制台（Console）面板，查找 JavaScript 错误或警告信息。

更新浏览器：确保你的浏览器是最新版本，或者至少支持 WebGL。

WebGL 检查：使用 WebGL 检测工具来检查系统的 WebGL 支持情况。

如果以上方法都不能解决问题，可能需要更详细的错误信息或者进一步的调试来确定问题所在。

参阅：http://www.webgl3d.cn/pages/aac9ab/

cd D:\three.js-r160
python -m http.server

浏览器访问 http://localhost:8000/editor/
浏览器访问 http://localhost:8000/examples/

从 nginx: download 下载 nginx-1.26.1.zip 解压到D:\nginx-1.26.1

编辑 D:\nginx-1.26.1\conf\nginx.conf 第35行后：

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            proxy_pass http://127.0.0.1:8000;
            root   D:/three.js-r160;
            index  index.html index.htm;
        }
        # 
        location ~*  \.(css|js|txt|glb|mp4)$ {
            root  D:/three.js-r160;
            access_log off;
            expires 24h;
        }

先运行 nginx.exe -t
nginx: the configuration file D:\nginx-1.26.1/conf/nginx.conf syntax is ok
nginx: configuration file D:\nginx-1.26.1/conf/nginx.conf test is successful

cd D:\nginx-1.26.1
启动命令: start nginx
修改 nginx.conf 后，重新启动: nginx -s reload

快速停止命令：nginx -s stop
正常退出命令：nginx -s quit

copy D:\nginx-1.26.1\html\index.html D:\three.js-r160\
浏览器访问 http://localhost/editor/