Mobile website design with three.js scene

Hey!

I am looking for some mobile optimized sites that work with threejs.
Especially in the combination of 2D UI elements next/below/above the scene to interact with it. But also other concepts based on wipe gestures or similar mechanisms are of interest.

I want to learn from these concepts what is possible and how to best handle a 3D scene.

I would be happy if everyone has the desire to post mobile 3D websites that stayed in his head. Especially with a good user experience.

Maybe it will be easier to create something new and horizon expanding in the future!

Many thanks to everyone involved :slight_smile:

Two great articles on Three.js Fundamentals for this:

I can also point you to two working examples of my own. My Connect 6 game is reasonably mobile-friendly - all the buttons, instructions, etc are HTML elements in front of the Canvas. My Clusters game is nearly all 2D but uses Three.js with orthogonal camera – it has multiple canvases, HTML buttons, keyboard and touchscreen support.

Generic advice:

  • I was worried that HTML objects in front of the 3d canvas would slow down rendering but it’s actually pretty good. Certain effects (drop shadows, CSS animations) are pretty expensive on some browsers.
  • Supporting modern phones is MUCH easier than older phones. Know in advance how much you want to support.
  • There’s really no substitute for understanding Javascript’s mouse, keyboard, and especially touchscreen events. Lots of trial and error to get the hang of it. Read the developer.mozilla.org docs on each event type.
  • For multiple-finger touchscreen effects, it can be handy to look at the source code of various three.js controls, especially OrbitControls
1 Like