如何确保three.js适合移动设备

时间:2016-03-11 06:43:05

标签: javascript mobile web three.js

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

它在旋转立方体动画前面的半透明div中有一些信息。 (非常基本的东西吧?)

嗯,好吧,我注意到threjs.org/examples上的示例在移动设备上运行良好,尽管我尽最大努力做同样的事情我的网站似乎并没有在移动设备上呈现三个组件。

到目前为止,我尝试了一些事情:

首先要确保我从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行。

编辑:经过一些更改(声明未声明的变量并添加"使用严格&#34 ;;除了移动设备Mozilla之外,桌面和移动设备上的3D渲染,这很奇怪,因为threejs.org上的示例适用于移动设备Mozilla ...

1 个答案:

答案 0 :(得分:1)

就像他在评论中提到的@ 2pha一样,你的网站没有工作:

  

未捕获的SyntaxError:在严格模式之外尚不支持块范围的声明(let,const,function,class)

尝试添加:

"use strict";

位于所有.js个文件的顶部,我打赌它可以在Chrome和手机上正常运行。