By three.js and react can i make airspeed indicators

Questions
, ,
1

Screenshot (123)
Screenshot (123)1920×1080 123 KB

can i make like this by svg image with three.js and embeded this to react …and also if i want to pass data .can it possible???

2

if it’s flat just draw your svg on top and of course you can enrich it with data. if it has to move perspectively try drei/<Html> GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber or draw the controls in threejs with lines and meshes.

there is also drei/<RenderTexture> drei/RenderTexture - CodeSandbox this allows you to make textures with with a real scene, these can even receive events, but you can also force them to render only once, so it would be very performant.

3

With plain three.js you can load SVG images via SVGLoader like demonstrated in the following example: three.js webgl - svg loader

In the onLoad() callback of SVGLoader, you can use the resulting shapes to create flat shape meshes via ShapeGeometry or extruded meshes via ExtrudeGeometry. If you then want to interact with these entities, you can implement simple raycasting like demonstrated here.

1 Like