In­ter­ac­tiv­ity in 3D

Web Designer - - Tutorials | Get Started With Three.js — Part 4 -

Screens on mo­bile and desk­top are two di­men­sional. They have x and y axes. A first step in 3D in­ter­ac­tions is to trans­late the 2D co-or­di­nates of a touch or mouse po­si­tion, into 3D space. This is done by cast­ing a ray or line and cap­tur­ing where it in­ter­sects with ob­jects. Three. js has a ‘ray­caster’ class that han­dles this and can re­turn the ar­ray of ob­jects in­ter­sected. You can an­a­lyse the in­ter­sected ob­jects and re­act to the event. This can be trig­gered on clicks, touches, mouse move­ments or other events. Drag­ging, which is a com­bi­na­tion of click­ing and mov­ing a fin­ger or mouse, is com­mon as well. Also us­ing ac­celerom­e­ter or gy­ro­scope data makes for ex­cit­ing in­ter­ac­tions as well.

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.