如何确保 three.js 对移动设备友好

Question

上周我一直在为自己建立一个个人网站。

它在旋转立方体动画前面的半透明 div 中有一些信息。 （很基本的东西吧？）

这就是问题所在，我注意到 threjs.org/examples 上的示例在移动设备上运行良好，尽管我尽最大努力做同样的事情，但我的网站似乎没有在移动设备上呈现 threejs 组件。

到目前为止，我已经尝试了一些事情：

首先为了确保我从 webgl 优雅地回滚，我在 index.html 中包含检测器并使用

 renderer =  Detector.webgl ? new THREE.WebGLRenderer({ alpha: true }): new THREE.CanvasRenderer({ alpha: true });

声明我的threejs渲染器。

其次，我确保我的代码使用 init、animate 和 render 方法进行了很好的分解。

第三，我包含了 stats.js（就像示例一样）相应地修改了我的 html css 和 js。

但我似乎没有做任何事情！

现在的页面在计算机上呈现良好，并且对窗口调整大小事件响应良好，但在手机上，后台没有任何显示。

据我所知，我正在以与示例相同的方式处理事情，但我没有获得移动性能。

非常感谢您的帮助！

哦，该站点在这里：krewn.github.io，仅包含三个文件，每个文件少于 80 行。

编辑：经过一些更改（声明未声明的变量并添加“use strict”；桌面和移动设备上的 3d 渲染，移动 Mozilla 除外，这很奇怪，因为threejs.org 上的示例适用于移动 Mozilla...

Answer 1

就像@2pha 在他的评论中提到的那样，您的网站无法正常工作：

未捕获的 SyntaxError：在严格模式之外尚不支持块范围的声明（let、const、函数、类）

尝试添加：

"use strict";

在所有 .js 文件的顶部，我敢打赌它会在 Chrome 和手机上运行良好。