three.jspixi.js

The best approach to use only ThreeJS for building interactive UI without HTML DOM overlays


May I have a 2D layer for UI, Text, Buttons, etc over the 3D scene in ThreeJS? Ideally something like engine from PixiJS inside ThreeJS? I've seen PixiJS offers some 3D features so why not combine both libraries in something super-powerful? I just do not want to place any HTML Dom elements over WebGL canvas as this will probably slow down performance on Mobile devices.


Solution

  • One way to solve this issue is to implement the UI as screen space sprites like demonstrated in the following official example (check out how the red sprites are rendered):

    https://threejs.org/examples/webgl_sprites

    The idea is to render them with a separate orthographic camera and an additional call of WebGLRenderer.render(). Besides, instances of THREE.Sprite do support raycasting which is of course useful when implementing interaction.