CODEWITHSUNDEEP
three.jspixi.js
user2401543
user2401543

Reputation: 1149

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.

Upvotes: 1

Views: 2395

Answers (2)

felixmariotto
felixmariotto

Reputation: 77

Building up on Mugen87's answer, you can also use THREE.Shape to make visual containers adapted to the user screen size : https://threejs.org/docs/#api/en/extras/core/Shape

You can use THREE.Shape to make mesh-based text, is illustrated in this example : https://threejs.org/examples/?q=text#webgl_geometry_text_shapes

You should also have a look at three-mesh-ui, an add-on for building mesh-based user interface with three.js : https://github.com/felixmariotto/three-mesh-ui

Upvotes: 2

Mugen87
Mugen87

Reputation: 31046

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.

Upvotes: 2

Related Questions