如何確保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和移動電話上運行良好。