This past week, I dedicated my time to creating a personal website for myself.
It features information displayed in semi-transparent divs layered over an animation of a spinning cube (pretty basic concept, right?).
However, the issue I encountered is that while examples on threjs.org/examples run smoothly on mobile devices, my site seems to struggle to render Three.js components on mobile platforms.
I have tried several solutions so far:
Firstly, I made sure that my website gracefully degrades from WebGL by incorporating detector in index.html and using the following code snippet to declare my Three.js renderer:
renderer = Detector.webgl ? new THREE.WebGLRenderer({ alpha: true }): new THREE.CanvasRenderer({ alpha: true });
Secondly, I organized my code well with init, animate, and render methods.
Thirdly, I added stats.js (as seen in the examples) and adjusted my HTML, CSS, and JS files accordingly.
Despite these efforts, I am still unable to resolve the issue!
The current state of the page displays perfectly on desktops and responds effectively to window resizing, but when accessed via a phone, nothing appears in the background.
From what I can tell, I'm following the same approach as the examples, yet I'm not achieving the desired performance on mobile devices.
Your assistance would be greatly appreciated!
You can view the site here: krewn.github.io, which consists of only three files each fewer than 80 lines.
Edit: After making some changes (fixing undeclared variables and adding "use strict"), the 3D rendering now works on both desktop and mobile, except for mobile Mozilla browsers - which is peculiar since the examples on threejs.org work flawlessly on mobile Mozilla...