Werkend voorbeeld Three.js onclick 3D-object muis- en (iPad-)touchscreen (met threejs Raycaster / JavaScript-events)

Vraag :

Hoe kan ik klikken op een 3d object om vervolgens een functie te triggeren

Oplossing :

U kunt gebruik maken van de script EventsControls.js (van Vildanov Almaz). Dit vindt u hier :

https://github.com/mrdoob/three.js/pull/6058/files#diff-eeaf107d189d8d1bb4f70a798575d150

Werkt het script ook op een touchscreen bijvoorbeeld een ipad.

Antwoord :
Nee standaard kunnen er issues zijn op een ipad. Enerzijds met de x,y posities.

Oplossing :
Voor onze projecten hebben wij de script " EventsControls.js' gemodificeerd zodat het werkt op een ipad.

Voorbeeld screenmovie pc&ipad

Zelf testen :

https://www.utilewebsites.nl/example/clicktouchthreejs/

Source code voorbeeld downloaden :

example-threejs-click-touchscreen.zip

Als node_module voor bijv. Vuejs :

eventscontrols.zip