CODEWITHSUNDEEP
javascriptmobilewebthree.js
kpie
kpie

Reputation: 11100

How to make sure three.js is mobile friendly

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...

Upvotes: 2

Views: 3528

Answers (1)

Wilt
Wilt

Reputation: 44336

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.

Upvotes: 1

Related Questions