如何确保three.js是移动友好的 [英] How to make sure three.js is mobile friendly

问题描述

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

This last week I have been building myself a personal website.

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

It has some information in semi transparent divs in front of an animation of a spinning cube. (pretty basic stuff right?)

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

Well here's the rub, I noticed that examples at threjs.org/examples run on mobile well and despite my best efforts to do things likewise my site doesn't appear to be rendering threejs components on mobile.

到目前为止，我已经尝试了几件事:

So far I have tried a few things:

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

First to ensure that I was rolling back gracefully from webgl I included detector in index.html and use

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

声明我的threejs渲染器.

to declare my threejs renderer.

其次，我确保我的代码很好地分解了 init、animate 和 render 方法.

Second I ensured that my code was well factored with an init, animate, and render method.

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

Third I included stats.js (as the examples do) modifying my html css and js accordingly.

然而我似乎什么都没做！

And yet nothing I seem to do is working!

页面现在可以在计算机上正常呈现并且对窗口大小调整事件响应良好，但在手机上没有任何背景显示.

The page as it stands now renders fine on the computer and responds well to window resize events, but on a phone nothing appears in the background.

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

As far as I can see I am going about things in the same manner that the examples do and yet I am not getting the mobile performance.

非常感谢您的帮助！

哦，网站在这里:krewn.github.io 并且只包含三个文件，每个文件都少于 80线.

Oh, the site is here: krewn.github.io and consists of only three files each fewer than 80 lines.

经过一些更改(声明未声明的变量并添加use strict"；除了移动 Mozilla 之外，3d 在桌面和移动设备上呈现，这很奇怪，因为threejs.org 上的示例适用于移动 Mozilla...

after some changes (declairing undeclaired variables and adding "use strict"; the 3d renders on desktop and mobile except for mobile Mozilla, which is strange because the examples at threejs.org work on mobile Mozilla...

推荐答案

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

Like @2pha mentioned in his comment your site isn't working:

未捕获的语法错误:在严格模式之外尚不支持块范围的声明(let、const、function、class)

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

尝试添加:

"use strict";

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

at the top of all your .js files, I bet then it will run fine on both Chrome and mobile phone.

这篇关于如何确保three.js是移动友好的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！