问题
This last week I have been building myself a personal website.
It has some information in semi transparent divs in front of an animation of a spinning cube. (pretty basic stuff right?)
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:
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 });
to declare my threejs renderer.
Second I ensured that my code was well factored with an init, animate, and render method.
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.
your help is greatly appreciated!
Oh, the site is here: krewn.github.io and consists of only three files each fewer than 80 lines.
Edit: 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...
回答1:
Like @2pha mentioned in his comment your site isn't working:
Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
try to add:
"use strict";
at the top of all your .js files, I bet then it will run fine on both Chrome and mobile phone.
来源：https://stackoverflow.com/questions/35933855/how-to-make-sure-three-js-is-mobile-friendly