如何确保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行。

编辑：经过一些变化（declairing undeclaired变量并添加“使用严格”;在3D渲染上的台式机和除移动Mozilla中，移动这很奇怪，因为在移动Mozilla的threejs.org工作的例子...

Answer 1

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

Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

尝试添加：

"use strict"; 

在所有顶部文件，我敢打赌，它会在Chrome和移动电话上运行良好。