hello_picking.html 63 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1">
  6. <title>jMonkeyEngine 3 Tutorial (8) - Hello Picking :: jMonkeyEngine Docs</title>
  7. <link rel="canonical" href="https://wiki.jmonkeyengine.org/docs/3.8/tutorials/beginner/hello_picking.html">
  8. <link rel="prev" href="hello_animation.html">
  9. <link rel="next" href="hello_collision.html">
  10. <meta name="keywords" content="beginner, documentation, intro, node, ray, click, collision, keyinput, input">
  11. <meta name="generator" content="Antora 3.0.1">
  12. <link rel="stylesheet" href="../../../../_/css/site.css">
  13. <meta property="og:image" content="https://wiki.jmonkeyengine.org/_/img/iconx128.png">
  14. <meta property="og:description" content="jMonkeyEngine 3 Tutorial (8) - Hello Picking">
  15. <meta property="og:title" content="jMonkeyEngine Docs">
  16. <link rel="stylesheet" href="../../../../_/css/site-extra.css">
  17. <link rel="stylesheet" href="../../../../_/css/vendor/docsearch.min.css">
  18. <!-- fetched from https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css -->
  19. <link rel="icon" href="../../../../_/img/favicon.ico" type="image/x-icon">
  20. </head>
  21. <body class="article">
  22. <header class="header">
  23. <nav class="navbar">
  24. <div class="navbar-brand">
  25. <a class="navbar-item" href="https://wiki.jmonkeyengine.org">
  26. <img alt="" src="../../../../_/img/jme-logo.png" height="32" type="image/x-icon">
  27. </a>
  28. <div class="navbar-item hide-for-print">
  29. <input id="search-input" type="text" placeholder="Search docs">
  30. </div>
  31. <button class="navbar-burger" data-target="topbar-nav">
  32. <span></span>
  33. <span></span>
  34. <span></span>
  35. </button>
  36. </div>
  37. <div id="topbar-nav" class="navbar-menu">
  38. <div class="navbar-end">
  39. <div class="navbar-item theme-switch-wrapper">
  40. <label class="theme-switch" for="checkbox">
  41. <input type="checkbox" id="checkbox" />
  42. <div class="slider round"></div>
  43. </label>
  44. </div>
  45. <a class="navbar-item" href="https://github.com/jmonkeyengine/wiki">Github</a>
  46. </div>
  47. </div>
  48. </nav>
  49. </header>
  50. <div class="body">
  51. <div class="nav-container" data-component="docs" data-version="3.8">
  52. <aside class="nav">
  53. <div class="panels">
  54. <div class="nav-panel-menu is-active" data-panel="menu">
  55. <nav class="nav-menu">
  56. <h3 class="title"><a href="../../documentation.html">JME</a></h3>
  57. <ul class="nav-list">
  58. <li class="nav-item" data-depth="0">
  59. <ul class="nav-list">
  60. <li class="nav-item" data-depth="1">
  61. <a class="nav-link" href="../../documentation.html">Getting Started</a>
  62. </li>
  63. <li class="nav-item" data-depth="1">
  64. <a class="nav-link" href="https://javadoc.jmonkeyengine.org/v3.4.1-stable">JavaDoc</a>
  65. </li>
  66. <li class="nav-item" data-depth="1">
  67. <a class="nav-link" href="../../release.html">Release Guide</a>
  68. </li>
  69. </ul>
  70. </li>
  71. <li class="nav-item" data-depth="0">
  72. <ul class="nav-list">
  73. <li class="nav-item" data-depth="1">
  74. <button class="nav-item-toggle"></button>
  75. <a class="nav-link" href="beginner.html">Beginner Tutorials</a>
  76. <ul class="nav-list">
  77. <li class="nav-item" data-depth="2">
  78. <a class="nav-link" href="hello_simpleapplication.html">Hello SimpleApplication</a>
  79. </li>
  80. <li class="nav-item" data-depth="2">
  81. <a class="nav-link" href="hello_node.html">Hello Node</a>
  82. </li>
  83. <li class="nav-item" data-depth="2">
  84. <a class="nav-link" href="hello_asset.html">Hello Asset</a>
  85. </li>
  86. <li class="nav-item" data-depth="2">
  87. <a class="nav-link" href="hello_main_event_loop.html">Hello Update Loop</a>
  88. </li>
  89. <li class="nav-item" data-depth="2">
  90. <a class="nav-link" href="hello_input_system.html">Hello Input System</a>
  91. </li>
  92. <li class="nav-item" data-depth="2">
  93. <a class="nav-link" href="hello_material.html">Hello Material</a>
  94. </li>
  95. <li class="nav-item" data-depth="2">
  96. <a class="nav-link" href="hello_animation.html">Hello Animation</a>
  97. </li>
  98. <li class="nav-item is-current-page" data-depth="2">
  99. <a class="nav-link" href="hello_picking.html">Hello Picking</a>
  100. </li>
  101. <li class="nav-item" data-depth="2">
  102. <a class="nav-link" href="hello_collision.html">Hello Collision</a>
  103. </li>
  104. <li class="nav-item" data-depth="2">
  105. <a class="nav-link" href="hello_terrain.html">Hello Terrain</a>
  106. </li>
  107. <li class="nav-item" data-depth="2">
  108. <a class="nav-link" href="hello_audio.html">Hello Audio</a>
  109. </li>
  110. <li class="nav-item" data-depth="2">
  111. <a class="nav-link" href="hello_effects.html">Hello Effects</a>
  112. </li>
  113. <li class="nav-item" data-depth="2">
  114. <a class="nav-link" href="hello_physics.html">Hello Physics</a>
  115. </li>
  116. </ul>
  117. </li>
  118. <li class="nav-item" data-depth="1">
  119. <button class="nav-item-toggle"></button>
  120. <span class="nav-text">Key Concepts</span>
  121. <ul class="nav-list">
  122. <li class="nav-item" data-depth="2">
  123. <a class="nav-link" href="../concepts/best_practices.html">Best Practices</a>
  124. </li>
  125. <li class="nav-item" data-depth="2">
  126. <a class="nav-link" href="../concepts/optimization.html">Optimization</a>
  127. </li>
  128. <li class="nav-item" data-depth="2">
  129. <a class="nav-link" href="../concepts/faq.html">Frequently Asked Questions</a>
  130. </li>
  131. <li class="nav-item" data-depth="2">
  132. <a class="nav-link" href="../concepts/math_for_dummies.html">Math for Dummies</a>
  133. </li>
  134. <li class="nav-item" data-depth="2">
  135. <a class="nav-link" href="../concepts/math.html">Math overview</a>
  136. </li>
  137. <li class="nav-item" data-depth="2">
  138. <a class="nav-link" href="../concepts/math_cheet_sheet.html">3D math "cheat sheet"</a>
  139. </li>
  140. <li class="nav-item" data-depth="2">
  141. <a class="nav-link" href="../concepts/rotate.html">3-D Rotation</a>
  142. </li>
  143. <li class="nav-item" data-depth="2">
  144. <a class="nav-link" href="../concepts/math_video_tutorials.html">Math video tutorial series</a>
  145. </li>
  146. <li class="nav-item" data-depth="2">
  147. <a class="nav-link" href="../concepts/multi-media_asset_pipeline.html">Multi-Media Asset Pipeline</a>
  148. </li>
  149. <li class="nav-item" data-depth="2">
  150. <a class="nav-link" href="../concepts/the_scene_graph.html">The Scene Graph</a>
  151. </li>
  152. <li class="nav-item" data-depth="2">
  153. <a class="nav-link" href="../concepts/scenegraph_for_dummies.html">Scene Graph for Dummies</a>
  154. </li>
  155. <li class="nav-item" data-depth="2">
  156. <a class="nav-link" href="../concepts/terminology.html">3D Graphics Terminology</a>
  157. </li>
  158. <li class="nav-item" data-depth="2">
  159. <a class="nav-link" href="../concepts/transparency_sorting.html">Transparency Sorting</a>
  160. </li>
  161. </ul>
  162. </li>
  163. <li class="nav-item" data-depth="1">
  164. <button class="nav-item-toggle"></button>
  165. <span class="nav-text">Articles and How-to&#8217;s</span>
  166. <ul class="nav-list">
  167. <li class="nav-item" data-depth="2">
  168. <button class="nav-item-toggle"></button>
  169. <span class="nav-text">How to Model</span>
  170. <ul class="nav-list">
  171. <li class="nav-item" data-depth="3">
  172. <a class="nav-link" href="../how-to/modeling/3dsmax/3dsmax.html">3dsmax</a>
  173. </li>
  174. <li class="nav-item" data-depth="3">
  175. <button class="nav-item-toggle"></button>
  176. <a class="nav-link" href="../how-to/modeling/blender/blender.html">Blender</a>
  177. <ul class="nav-list">
  178. <li class="nav-item" data-depth="4">
  179. <a class="nav-link" href="../how-to/modeling/blender/blender_buffer_clearing.html">Buffer Clearing</a>
  180. </li>
  181. <li class="nav-item" data-depth="4">
  182. <a class="nav-link" href="../how-to/modeling/blender/blender_gltf.html">Export as GlTF</a>
  183. </li>
  184. <li class="nav-item" data-depth="4">
  185. <a class="nav-link" href="../how-to/modeling/blender/blender_ogre_export.html">Export as Ogre XML</a>
  186. </li>
  187. <li class="nav-item" data-depth="4">
  188. <a class="nav-link" href="../how-to/modeling/blender/blender_ogre_compatibility.html">Ogre Compatibility</a>
  189. </li>
  190. <li class="nav-item" data-depth="4">
  191. <a class="nav-link" href="../how-to/modeling/blender/makehuman.html">MakeHuman</a>
  192. </li>
  193. <li class="nav-item" data-depth="4">
  194. <a class="nav-link" href="../how-to/modeling/blender/makehuman_blender_ogrexml_toolchain.html">MakeHuman toolchain</a>
  195. </li>
  196. </ul>
  197. </li>
  198. </ul>
  199. </li>
  200. <li class="nav-item" data-depth="2">
  201. <button class="nav-item-toggle"></button>
  202. <span class="nav-text">How to Animate</span>
  203. <ul class="nav-list">
  204. <li class="nav-item" data-depth="3">
  205. <button class="nav-item-toggle"></button>
  206. <span class="nav-text">Mixamo</span>
  207. <ul class="nav-list">
  208. <li class="nav-item" data-depth="4">
  209. <a class="nav-link" href="../how-to/modeling/blender/mixamo.html">Blender Models</a>
  210. </li>
  211. </ul>
  212. </li>
  213. </ul>
  214. </li>
  215. <li class="nav-item" data-depth="2">
  216. <a class="nav-link" href="../how-to/debugging.html">Debugging with Wireframes</a>
  217. </li>
  218. <li class="nav-item" data-depth="2">
  219. <a class="nav-link" href="../how-to/util/free_skymaps.html">How to create free skymaps</a>
  220. </li>
  221. <li class="nav-item" data-depth="2">
  222. <button class="nav-item-toggle"></button>
  223. <span class="nav-text">Java Tips</span>
  224. <ul class="nav-list">
  225. <li class="nav-item" data-depth="3">
  226. <a class="nav-link" href="../how-to/java/localization.html">Localization</a>
  227. </li>
  228. <li class="nav-item" data-depth="3">
  229. <a class="nav-link" href="../how-to/java/swing_canvas.html">Swing Canvas</a>
  230. </li>
  231. <li class="nav-item" data-depth="3">
  232. <a class="nav-link" href="../how-to/java/logging.html">Logging</a>
  233. </li>
  234. <li class="nav-item" data-depth="3">
  235. <a class="nav-link" href="../how-to/java/read_graphic_card_capabilites.html">Read Graphics Capabilities</a>
  236. </li>
  237. </ul>
  238. </li>
  239. <li class="nav-item" data-depth="2">
  240. <button class="nav-item-toggle"></button>
  241. <span class="nav-text">Articles</span>
  242. <ul class="nav-list">
  243. <li class="nav-item" data-depth="3">
  244. <button class="nav-item-toggle"></button>
  245. <span class="nav-text">Physically Based Rendering</span>
  246. <ul class="nav-list">
  247. <li class="nav-item" data-depth="4">
  248. <a class="nav-link" href="../how-to/articles/pbr/pbr_part1.html">PBR – Part one</a>
  249. </li>
  250. <li class="nav-item" data-depth="4">
  251. <a class="nav-link" href="../how-to/articles/pbr/pbr_part2.html">PBR – Part two</a>
  252. </li>
  253. <li class="nav-item" data-depth="4">
  254. <a class="nav-link" href="../how-to/articles/pbr/pbr_part3.html">PBR – Part three</a>
  255. </li>
  256. </ul>
  257. </li>
  258. </ul>
  259. </li>
  260. </ul>
  261. </li>
  262. </ul>
  263. </li>
  264. <li class="nav-item" data-depth="0">
  265. <ul class="nav-list">
  266. <li class="nav-item" data-depth="1">
  267. <button class="nav-item-toggle"></button>
  268. <span class="nav-text">Core Engine</span>
  269. <ul class="nav-list">
  270. <li class="nav-item" data-depth="2">
  271. <a class="nav-link" href="../../core/app/simpleapplication.html">SimpleApplication</a>
  272. </li>
  273. <li class="nav-item" data-depth="2">
  274. <a class="nav-link" href="../../core/system/appsettings.html">AppSettings</a>
  275. </li>
  276. </ul>
  277. </li>
  278. <li class="nav-item" data-depth="1">
  279. <button class="nav-item-toggle"></button>
  280. <span class="nav-text">Controlling Game Logic</span>
  281. <ul class="nav-list">
  282. <li class="nav-item" data-depth="2">
  283. <a class="nav-link" href="../../core/app/update_loop.html">Update Loop</a>
  284. </li>
  285. <li class="nav-item" data-depth="2">
  286. <a class="nav-link" href="../../core/app/state/application_states.html">Application States</a>
  287. </li>
  288. <li class="nav-item" data-depth="2">
  289. <button class="nav-item-toggle"></button>
  290. <a class="nav-link" href="../../core/scene/control/custom_controls.html">Custom Controls</a>
  291. <ul class="nav-list">
  292. <li class="nav-item" data-depth="3">
  293. <button class="nav-item-toggle"></button>
  294. <span class="nav-text">Video</span>
  295. <ul class="nav-list">
  296. <li class="nav-item" data-depth="4">
  297. <a class="nav-link" href="https://www.youtube.com/watch?v=MNDiZ9YHIpM">Control any scene node</a>
  298. </li>
  299. <li class="nav-item" data-depth="4">
  300. <a class="nav-link" href="https://www.youtube.com/watch?v=-OzRZscLlHY">Control a character</a>
  301. </li>
  302. <li class="nav-item" data-depth="4">
  303. <a class="nav-link" href="https://wiki.jmonkeyengine.org/Scenes/SDK-UsecaseDemo_1.zip">Video Source Code</a>
  304. </li>
  305. </ul>
  306. </li>
  307. </ul>
  308. </li>
  309. <li class="nav-item" data-depth="2">
  310. <a class="nav-link" href="../../core/app/multithreading.html">Multithreading</a>
  311. </li>
  312. </ul>
  313. </li>
  314. <li class="nav-item" data-depth="1">
  315. <button class="nav-item-toggle"></button>
  316. <span class="nav-text">Scene Graph</span>
  317. <ul class="nav-list">
  318. <li class="nav-item" data-depth="2">
  319. <a class="nav-link" href="../../core/scene/traverse_scenegraph.html">Traverse SceneGraph</a>
  320. </li>
  321. <li class="nav-item" data-depth="2">
  322. <a class="nav-link" href="../../core/scene/spatial.html">Spatial: Node vs Geometry</a>
  323. </li>
  324. <li class="nav-item" data-depth="2">
  325. <button class="nav-item-toggle"></button>
  326. <a class="nav-link" href="../../core/scene/mesh.html">Mesh</a>
  327. <ul class="nav-list">
  328. <li class="nav-item" data-depth="3">
  329. <a class="nav-link" href="../../core/scene/custom_meshes.html">Custom Meshes</a>
  330. </li>
  331. <li class="nav-item" data-depth="3">
  332. <a class="nav-link" href="../../core/scene/shape/shape.html">Shape</a>
  333. </li>
  334. <li class="nav-item" data-depth="3">
  335. <a class="nav-link" href="../../core/scene/3d_models.html">3D Models</a>
  336. </li>
  337. </ul>
  338. </li>
  339. <li class="nav-item" data-depth="2">
  340. <a class="nav-link" href="../../core/asset/asset_manager.html">Asset Manager</a>
  341. </li>
  342. <li class="nav-item" data-depth="2">
  343. <a class="nav-link" href="../../core/export/save_and_load.html">Saving and Loading Nodes</a>
  344. </li>
  345. <li class="nav-item" data-depth="2">
  346. <a class="nav-link" href="../../core/collision/collision_and_intersection.html">Collision and Intersection</a>
  347. </li>
  348. <li class="nav-item" data-depth="2">
  349. <a class="nav-link" href="../../core/scene/control/level_of_detail.html">Level of Detail</a>
  350. </li>
  351. </ul>
  352. </li>
  353. <li class="nav-item" data-depth="1">
  354. <button class="nav-item-toggle"></button>
  355. <span class="nav-text">Animation, Scene</span>
  356. <ul class="nav-list">
  357. <li class="nav-item" data-depth="2">
  358. <a class="nav-link" href="../../core/animation/animation_new.html">Animation with AnimComposer</a>
  359. </li>
  360. <li class="nav-item" data-depth="2">
  361. <a class="nav-link" href="../../core/animation/animation.html">Animation-Old (AnimControl)</a>
  362. </li>
  363. <li class="nav-item" data-depth="2">
  364. <a class="nav-link" href="../../core/cinematic/cinematics.html">Cinematics (cutscenes, fake destruction physics)</a>
  365. </li>
  366. <li class="nav-item" data-depth="2">
  367. <a class="nav-link" href="../../core/cinematic/motionpath.html">MotionPaths and Waypoints</a>
  368. </li>
  369. </ul>
  370. </li>
  371. <li class="nav-item" data-depth="1">
  372. <button class="nav-item-toggle"></button>
  373. <span class="nav-text">Material, Light, Shadow</span>
  374. <ul class="nav-list">
  375. <li class="nav-item" data-depth="2">
  376. <a class="nav-link" href="../../core/material/how_to_use_materials.html">How to use Materials</a>
  377. </li>
  378. <li class="nav-item" data-depth="2">
  379. <a class="nav-link" href="../../core/material/j3m_material_files.html">.j3m Material Files</a>
  380. </li>
  381. <li class="nav-item" data-depth="2">
  382. <a class="nav-link" href="../../core/material/material_definitions.html">.j3md Material Definitions</a>
  383. </li>
  384. <li class="nav-item" data-depth="2">
  385. <a class="nav-link" href="../../core/material/materials_overview.html">.j3md Properties</a>
  386. </li>
  387. <li class="nav-item" data-depth="2">
  388. <a class="nav-link" href="../../core/shader/jme3_shaders.html">Shaders and JME3</a>
  389. </li>
  390. <li class="nav-item" data-depth="2">
  391. <a class="nav-link" href="../../core/shader/jme3_shadernodes.html">Shader Node System</a>
  392. </li>
  393. <li class="nav-item" data-depth="2">
  394. <a class="nav-link" href="../../core/shader/shader_video_tutorials.html">Shader Video Tutorials</a>
  395. </li>
  396. <li class="nav-item" data-depth="2">
  397. <a class="nav-link" href="../../core/light/light_and_shadow.html">Light and Shadow</a>
  398. </li>
  399. <li class="nav-item" data-depth="2">
  400. <a class="nav-link" href="../../core/texture/anisotropic_filtering.html">Anisotropic Filtering</a>
  401. </li>
  402. <li class="nav-item" data-depth="2">
  403. <a class="nav-link" href="../../core/system/jme3_srgbpipeline.html">Gamma Correction</a>
  404. </li>
  405. <li class="nav-item" data-depth="2">
  406. <a class="nav-link" href="../../core/material/normal_types.html">Normal Map Conventions</a>
  407. </li>
  408. </ul>
  409. </li>
  410. <li class="nav-item" data-depth="1">
  411. <button class="nav-item-toggle"></button>
  412. <span class="nav-text">Audio, Video</span>
  413. <ul class="nav-list">
  414. <li class="nav-item" data-depth="2">
  415. <a class="nav-link" href="../../core/audio/audio.html">Playing Sounds</a>
  416. </li>
  417. <li class="nav-item" data-depth="2">
  418. <a class="nav-link" href="../../core/audio/audio_environment_presets.html">Audio Environment Presets</a>
  419. </li>
  420. <li class="nav-item" data-depth="2">
  421. <a class="nav-link" href="../../core/app/state/screenshots.html">Capture Screenshots</a>
  422. </li>
  423. <li class="nav-item" data-depth="2">
  424. <a class="nav-link" href="../../core/app/state/capture_audio_video_to_a_file.html">Capture Audio/Video</a>
  425. </li>
  426. </ul>
  427. </li>
  428. <li class="nav-item" data-depth="1">
  429. <button class="nav-item-toggle"></button>
  430. <span class="nav-text">Filter, Effect</span>
  431. <ul class="nav-list">
  432. <li class="nav-item" data-depth="2">
  433. <a class="nav-link" href="../../core/effect/effects_overview.html">Overview</a>
  434. </li>
  435. <li class="nav-item" data-depth="2">
  436. <a class="nav-link" href="../../core/effect/bloom_and_glow.html">Bloom and Glow</a>
  437. </li>
  438. <li class="nav-item" data-depth="2">
  439. <a class="nav-link" href="../../core/effect/particle_emitters.html">Particle Emitters</a>
  440. </li>
  441. </ul>
  442. </li>
  443. <li class="nav-item" data-depth="1">
  444. <button class="nav-item-toggle"></button>
  445. <span class="nav-text">Landscapes</span>
  446. <ul class="nav-list">
  447. <li class="nav-item" data-depth="2">
  448. <a class="nav-link" href="../../core/util/sky.html">Sky</a>
  449. </li>
  450. <li class="nav-item" data-depth="2">
  451. <a class="nav-link" href="../../core/terrain/terrain.html">Terrain (TerraMonkey)</a>
  452. </li>
  453. <li class="nav-item" data-depth="2">
  454. <a class="nav-link" href="../../core/collision/terrain_collision.html">Terrain Collision</a>
  455. </li>
  456. <li class="nav-item" data-depth="2">
  457. <a class="nav-link" href="../../core/effect/water.html">Simple Water</a>
  458. </li>
  459. <li class="nav-item" data-depth="2">
  460. <a class="nav-link" href="../../core/effect/post-processor_water.html">Post-Processor Water</a>
  461. </li>
  462. </ul>
  463. </li>
  464. <li class="nav-item" data-depth="1">
  465. <button class="nav-item-toggle"></button>
  466. <span class="nav-text">Camera</span>
  467. <ul class="nav-list">
  468. <li class="nav-item" data-depth="2">
  469. <a class="nav-link" href="../../core/renderer/camera.html">Camera</a>
  470. </li>
  471. <li class="nav-item" data-depth="2">
  472. <a class="nav-link" href="../../core/renderer/making_the_camera_follow_a_character.html">Follow a Character</a>
  473. </li>
  474. <li class="nav-item" data-depth="2">
  475. <a class="nav-link" href="../../core/renderer/remote-controlling_the_camera.html">Remote-Controlling</a>
  476. </li>
  477. <li class="nav-item" data-depth="2">
  478. <a class="nav-link" href="../../core/renderer/multiple_camera_views.html">Multiple Camera Views</a>
  479. </li>
  480. <li class="nav-item" data-depth="2">
  481. <a class="nav-link" href="../../core/renderer/jme3_renderbuckets.html">Render Buckets</a>
  482. </li>
  483. </ul>
  484. </li>
  485. <li class="nav-item" data-depth="1">
  486. <button class="nav-item-toggle"></button>
  487. <span class="nav-text">Rendering</span>
  488. <ul class="nav-list">
  489. <li class="nav-item" data-depth="2">
  490. <a class="nav-link" href="../../core/renderer/render_pipeline.html">Render Pipelines</a>
  491. </li>
  492. </ul>
  493. </li>
  494. <li class="nav-item" data-depth="1">
  495. <button class="nav-item-toggle"></button>
  496. <span class="nav-text">User Interaction</span>
  497. <ul class="nav-list">
  498. <li class="nav-item" data-depth="2">
  499. <a class="nav-link" href="../../core/input/input_handling.html">Input Handling</a>
  500. </li>
  501. <li class="nav-item" data-depth="2">
  502. <a class="nav-link" href="../../core/input/combo_moves.html">Combo Moves</a>
  503. </li>
  504. <li class="nav-item" data-depth="2">
  505. <a class="nav-link" href="../../core/input/mouse_picking.html">Mouse Picking</a>
  506. </li>
  507. </ul>
  508. </li>
  509. <li class="nav-item" data-depth="1">
  510. <button class="nav-item-toggle"></button>
  511. <a class="nav-link" href="../../core/gui/topic_gui.html">Graphical User Interface</a>
  512. <ul class="nav-list">
  513. <li class="nav-item" data-depth="2">
  514. <button class="nav-item-toggle"></button>
  515. <span class="nav-text">Nifty GUI</span>
  516. <ul class="nav-list">
  517. <li class="nav-item" data-depth="3">
  518. <a class="nav-link" href="../../core/gui/nifty_gui.html">Integration Tutorial</a>
  519. </li>
  520. <li class="nav-item" data-depth="3">
  521. <a class="nav-link" href="../../core/gui/nifty_gui_best_practices.html">Best Practices</a>
  522. </li>
  523. <li class="nav-item" data-depth="3">
  524. <a class="nav-link" href="../../core/gui/nifty_gui_scenarios.html">Scenarios</a>
  525. </li>
  526. </ul>
  527. </li>
  528. <li class="nav-item" data-depth="2">
  529. <a class="nav-link" href="../../core/ui/hud.html">Head-Up Display (HUD)</a>
  530. </li>
  531. </ul>
  532. </li>
  533. <li class="nav-item" data-depth="1">
  534. <button class="nav-item-toggle"></button>
  535. <span class="nav-text">Virtual Reality</span>
  536. <ul class="nav-list">
  537. <li class="nav-item" data-depth="2">
  538. <a class="nav-link" href="../../core/vr/virtualreality.html">Virtual Reality</a>
  539. </li>
  540. <li class="nav-item" data-depth="2">
  541. <a class="nav-link" href="../../core/vr/legacyOpenVr.html">Virtual Reality Legacy Support</a>
  542. </li>
  543. <li class="nav-item" data-depth="2">
  544. <a class="nav-link" href="../../core/vr/virtualrealitycontrollers.html">Virtual Reality Legacy Controller Support</a>
  545. </li>
  546. </ul>
  547. </li>
  548. </ul>
  549. </li>
  550. <li class="nav-item" data-depth="0">
  551. <ul class="nav-list">
  552. <li class="nav-item" data-depth="1">
  553. <button class="nav-item-toggle"></button>
  554. <a class="nav-link" href="../../physics/physics.html">Physics</a>
  555. <ul class="nav-list">
  556. <li class="nav-item" data-depth="2">
  557. <a class="nav-link" href="../../physics/bullet_multithreading.html">Multi-Threaded Physics</a>
  558. </li>
  559. <li class="nav-item" data-depth="2">
  560. <a class="nav-link" href="../../physics/collision/physics_listeners.html">Collision Detection</a>
  561. </li>
  562. <li class="nav-item" data-depth="2">
  563. <a class="nav-link" href="../../physics/joint/hinges_and_joints.html">Hinges and Joints</a>
  564. </li>
  565. <li class="nav-item" data-depth="2">
  566. <a class="nav-link" href="../../physics/control/walking_character.html">Walking Character</a>
  567. </li>
  568. <li class="nav-item" data-depth="2">
  569. <a class="nav-link" href="../../physics/control/ragdoll.html">Ragdoll</a>
  570. </li>
  571. <li class="nav-item" data-depth="2">
  572. <a class="nav-link" href="../../physics/control/vehicles.html">Vehicles</a>
  573. </li>
  574. <li class="nav-item" data-depth="2">
  575. <a class="nav-link" href="../../physics/control/softbody.html">Softbody</a>
  576. </li>
  577. <li class="nav-item" data-depth="2">
  578. <a class="nav-link" href="../../physics/bullet_pitfalls.html">Bullet Physics Pitfalls</a>
  579. </li>
  580. </ul>
  581. </li>
  582. </ul>
  583. </li>
  584. <li class="nav-item" data-depth="0">
  585. <ul class="nav-list">
  586. <li class="nav-item" data-depth="1">
  587. <button class="nav-item-toggle"></button>
  588. <span class="nav-text">Networking</span>
  589. <ul class="nav-list">
  590. <li class="nav-item" data-depth="2">
  591. <a class="nav-link" href="../../networking/networking.html">Networking (SpiderMonkey)</a>
  592. </li>
  593. <li class="nav-item" data-depth="2">
  594. <a class="nav-link" href="../../networking/headless_server.html">Headless Server</a>
  595. </li>
  596. <li class="nav-item" data-depth="2">
  597. <a class="nav-link" href="../../networking/monkey_zone.html">Multi-Player Demo Code</a>
  598. </li>
  599. <li class="nav-item" data-depth="2">
  600. <a class="nav-link" href="../../networking/networking_video_tutorials.html">Networking Video Tutorials</a>
  601. </li>
  602. </ul>
  603. </li>
  604. </ul>
  605. </li>
  606. <li class="nav-item" data-depth="0">
  607. <ul class="nav-list">
  608. <li class="nav-item" data-depth="1">
  609. <button class="nav-item-toggle"></button>
  610. <span class="nav-text">User Contributions</span>
  611. <ul class="nav-list">
  612. <li class="nav-item" data-depth="2">
  613. <a class="nav-link" href="../../contributions/contributions.html">User Made Utilities</a>
  614. </li>
  615. <li class="nav-item" data-depth="2">
  616. <button class="nav-item-toggle"></button>
  617. <span class="nav-text">Shader</span>
  618. <ul class="nav-list">
  619. <li class="nav-item" data-depth="3">
  620. <a class="nav-link" href="../../contributions/shader/shaderblow_project.html">ShaderBlow Project</a>
  621. </li>
  622. </ul>
  623. </li>
  624. <li class="nav-item" data-depth="2">
  625. <button class="nav-item-toggle"></button>
  626. <span class="nav-text">Landscapes</span>
  627. <ul class="nav-list">
  628. <li class="nav-item" data-depth="3">
  629. <a class="nav-link" href="../../contributions/lanscapes/vegetationsystem/vegetationsystem.html">Vegetation System</a>
  630. </li>
  631. </ul>
  632. </li>
  633. <li class="nav-item" data-depth="2">
  634. <button class="nav-item-toggle"></button>
  635. <span class="nav-text">Networking</span>
  636. <ul class="nav-list">
  637. <li class="nav-item" data-depth="3">
  638. <a class="nav-link" href="../../contributions/networking/open_game_finder.html">Open Game Finder</a>
  639. </li>
  640. </ul>
  641. </li>
  642. <li class="nav-item" data-depth="2">
  643. <button class="nav-item-toggle"></button>
  644. <span class="nav-text">Entity System</span>
  645. <ul class="nav-list">
  646. <li class="nav-item" data-depth="3">
  647. <a class="nav-link" href="#es/entitysystem.adoc">The Zay-ES Entity System</a>
  648. </li>
  649. </ul>
  650. </li>
  651. <li class="nav-item" data-depth="2">
  652. <button class="nav-item-toggle"></button>
  653. <span class="nav-text">Artificial Intelligence</span>
  654. <ul class="nav-list">
  655. <li class="nav-item" data-depth="3">
  656. <a class="nav-link" href="../../contributions/ai/recast.html">Recast Navigation</a>
  657. </li>
  658. <li class="nav-item" data-depth="3">
  659. <a class="nav-link" href="../../contributions/ai/building_recast.html">Updating and building Recast Native Bindings</a>
  660. </li>
  661. <li class="nav-item" data-depth="3">
  662. <a class="nav-link" href="../../contributions/ai/monkey_brains.html">Monkey Brains</a>
  663. </li>
  664. <li class="nav-item" data-depth="3">
  665. <a class="nav-link" href="../../contributions/ai/steer_behaviours.html">Steer Behaviours</a>
  666. </li>
  667. <li class="nav-item" data-depth="3">
  668. <a class="nav-link" href="../../contributions/ai/jme3_ai.html">jME3 Artificial Intelligence</a>
  669. </li>
  670. </ul>
  671. </li>
  672. <li class="nav-item" data-depth="2">
  673. <button class="nav-item-toggle"></button>
  674. <a class="nav-link" href="../../contributions/gui/topic_contributions_gui.html">GUI</a>
  675. <ul class="nav-list">
  676. <li class="nav-item" data-depth="3">
  677. <a class="nav-link" href="../../contributions/contributions.html#lemur-gui-library">Lemur - a native jME3 GUI library with scene graph tools</a>
  678. </li>
  679. <li class="nav-item" data-depth="3">
  680. <a class="nav-link" href="../../contributions/contributions.html#tonegodgui">tonegodGUI - a native jME3 GUI library</a>
  681. </li>
  682. <li class="nav-item" data-depth="3">
  683. <a class="nav-link" href="../../contributions/contributions.html#immediate-graphical-user-interface">Immediate graphical user interface</a>
  684. </li>
  685. </ul>
  686. </li>
  687. <li class="nav-item" data-depth="2">
  688. <button class="nav-item-toggle"></button>
  689. <span class="nav-text">Tools</span>
  690. <ul class="nav-list">
  691. <li class="nav-item" data-depth="3">
  692. <a class="nav-link" href="../../contributions/tools/navigation.html">Mercator Projection Tool (Marine Navigation)</a>
  693. </li>
  694. <li class="nav-item" data-depth="3">
  695. <a class="nav-link" href="../../contributions/tools/charts.html">Visualizing Maps in JME3 (Marine Charts)</a>
  696. </li>
  697. </ul>
  698. </li>
  699. <li class="nav-item" data-depth="2">
  700. <button class="nav-item-toggle"></button>
  701. <a class="nav-link" href="../../contributions/vr/topic_contributions_vr.html">Virtual Reality (And augmented reality)</a>
  702. <ul class="nav-list">
  703. <li class="nav-item" data-depth="3">
  704. <a class="nav-link" href="../../contributions/contributions.html#tamarin-openxr">Tamarin OpenXR</a>
  705. </li>
  706. </ul>
  707. </li>
  708. <li class="nav-item" data-depth="2">
  709. <button class="nav-item-toggle"></button>
  710. <span class="nav-text">Projects</span>
  711. <ul class="nav-list">
  712. <li class="nav-item" data-depth="3">
  713. <a class="nav-link" href="../../contributions/projects/rise_of_mutants_project.html">Rise of Mutants Project</a>
  714. </li>
  715. </ul>
  716. </li>
  717. </ul>
  718. </li>
  719. </ul>
  720. </li>
  721. <li class="nav-item" data-depth="0">
  722. <ul class="nav-list">
  723. <li class="nav-item" data-depth="1">
  724. <button class="nav-item-toggle"></button>
  725. <a class="nav-link" href="../../sdk/sdk.html">SDK</a>
  726. <ul class="nav-list">
  727. <li class="nav-item" data-depth="2">
  728. <button class="nav-item-toggle"></button>
  729. <span class="nav-text">Video Tutorials</span>
  730. <ul class="nav-list">
  731. <li class="nav-item" data-depth="3">
  732. <button class="nav-item-toggle"></button>
  733. <span class="nav-text">SDK Use Case Tutorials</span>
  734. <ul class="nav-list">
  735. <li class="nav-item" data-depth="4">
  736. <a class="nav-link" href="http://www.youtube.com/watch?v=-OzRZscLlHY">Demo 1 (Quixote demo)</a>
  737. </li>
  738. <li class="nav-item" data-depth="4">
  739. <a class="nav-link" href="http://www.youtube.com/watch?v=6-YWxD3JByE">Demo 2 (Models and Materials)</a>
  740. </li>
  741. </ul>
  742. </li>
  743. <li class="nav-item" data-depth="3">
  744. <button class="nav-item-toggle"></button>
  745. <span class="nav-text">SDK Tutorials</span>
  746. <ul class="nav-list">
  747. <li class="nav-item" data-depth="4">
  748. <a class="nav-link" href="http://www.youtube.com/watch?v=M1_0pbeyJzI">Basics</a>
  749. </li>
  750. <li class="nav-item" data-depth="4">
  751. <a class="nav-link" href="http://www.youtube.com/watch?v=nL7woH40i5c">Importing Models</a>
  752. </li>
  753. <li class="nav-item" data-depth="4">
  754. <a class="nav-link" href="http://www.youtube.com/watch?v=DUmgAjiNzhY">Dragging&amp;Dropping Nodes</a>
  755. </li>
  756. <li class="nav-item" data-depth="4">
  757. <a class="nav-link" href="http://www.youtube.com/watch?v=ntPAmtsQ6eM">Scene Composing</a>
  758. </li>
  759. <li class="nav-item" data-depth="4">
  760. <a class="nav-link" href="http://www.youtube.com/watch?v=zgPV3W6dD4s">Terrain with Collision Shape</a>
  761. </li>
  762. <li class="nav-item" data-depth="4">
  763. <a class="nav-link" href="http://www.youtube.com/watch?v=Feu3-mrpolc">Working with Materials</a>
  764. </li>
  765. <li class="nav-item" data-depth="4">
  766. <a class="nav-link" href="http://www.youtube.com/watch?v=MNDiZ9YHIpM">Custom Controls</a>
  767. </li>
  768. <li class="nav-item" data-depth="4">
  769. <a class="nav-link" href="http://www.youtube.com/watch?v=oZnssg8TBWQ">WebStart Deployment</a>
  770. </li>
  771. <li class="nav-item" data-depth="4">
  772. <a class="nav-link" href="http://www.youtube.com/watch?v=D7JM4VMKqPc">Animation and Effect TrackEditing</a>
  773. </li>
  774. </ul>
  775. </li>
  776. </ul>
  777. </li>
  778. <li class="nav-item" data-depth="2">
  779. <button class="nav-item-toggle"></button>
  780. <span class="nav-text">Getting Started</span>
  781. <ul class="nav-list">
  782. <li class="nav-item" data-depth="3">
  783. <a class="nav-link" href="../../sdk/update_center.html">Updating jMonkeyEngine SDK</a>
  784. </li>
  785. <li class="nav-item" data-depth="3">
  786. <a class="nav-link" href="../../sdk/troubleshooting.html">Troubleshooting</a>
  787. </li>
  788. </ul>
  789. </li>
  790. <li class="nav-item" data-depth="2">
  791. <button class="nav-item-toggle"></button>
  792. <span class="nav-text">Java Development Features</span>
  793. <ul class="nav-list">
  794. <li class="nav-item" data-depth="3">
  795. <a class="nav-link" href="../../sdk/project_creation.html">Project Creation</a>
  796. </li>
  797. <li class="nav-item" data-depth="3">
  798. <a class="nav-link" href="../../sdk/code_editor.html">Code Editor and Palette</a>
  799. </li>
  800. <li class="nav-item" data-depth="3">
  801. <a class="nav-link" href="../../sdk/version_control.html">File Version Control</a>
  802. </li>
  803. <li class="nav-item" data-depth="3">
  804. <a class="nav-link" href="../../sdk/debugging_profiling_testing.html">Debug, Profile, Test</a>
  805. </li>
  806. <li class="nav-item" data-depth="3">
  807. <button class="nav-item-toggle"></button>
  808. <a class="nav-link" href="../../sdk/application_deployment.html">Application Deployment</a>
  809. <ul class="nav-list">
  810. <li class="nav-item" data-depth="4">
  811. <a class="nav-link" href="../../sdk/default_build_script.html">Default Build Script</a>
  812. </li>
  813. <li class="nav-item" data-depth="4">
  814. <a class="nav-link" href="../../sdk/android.html">Android</a>
  815. </li>
  816. <li class="nav-item" data-depth="4">
  817. <a class="nav-link" href="../../sdk/android_cheat_sheet.html">Android Cheat Sheet</a>
  818. </li>
  819. <li class="nav-item" data-depth="4">
  820. <a class="nav-link" href="../../sdk/ios.html">iOS</a>
  821. </li>
  822. </ul>
  823. </li>
  824. </ul>
  825. </li>
  826. <li class="nav-item" data-depth="2">
  827. <button class="nav-item-toggle"></button>
  828. <span class="nav-text">Unique Features</span>
  829. <ul class="nav-list">
  830. <li class="nav-item" data-depth="3">
  831. <button class="nav-item-toggle"></button>
  832. <a class="nav-link" href="../../sdk/model_loader_and_viewer.html">Import, View, Convert Models</a>
  833. <ul class="nav-list">
  834. <li class="nav-item" data-depth="4">
  835. <a class="nav-link" href="../../sdk/asset_packs.html">Asset Packs</a>
  836. </li>
  837. </ul>
  838. </li>
  839. <li class="nav-item" data-depth="3">
  840. <a class="nav-link" href="../../sdk/scene_explorer.html">The SceneExplorer</a>
  841. </li>
  842. <li class="nav-item" data-depth="3">
  843. <a class="nav-link" href="../../sdk/scene_composer.html">Composing a Scene</a>
  844. </li>
  845. <li class="nav-item" data-depth="3">
  846. <a class="nav-link" href="../../sdk/terrain_editor.html">Terrain Editor</a>
  847. </li>
  848. <li class="nav-item" data-depth="3">
  849. <a class="nav-link" href="../../sdk/sample_code.html">Sample Code</a>
  850. </li>
  851. <li class="nav-item" data-depth="3">
  852. <a class="nav-link" href="../../sdk/material_editing.html">Material Editing</a>
  853. </li>
  854. <li class="nav-item" data-depth="3">
  855. <a class="nav-link" href="../../sdk/font_creation.html">Creating Bitmap Fonts</a>
  856. </li>
  857. <li class="nav-item" data-depth="3">
  858. <button class="nav-item-toggle"></button>
  859. <a class="nav-link" href="https://hub.jmonkeyengine.org/t/effecttrack-and-audiotrack-editing-in-the-sdk/23378">Audio and Effect Track Editing</a>
  860. <ul class="nav-list">
  861. <li class="nav-item" data-depth="4">
  862. <a class="nav-link" href="https://www.youtube.com/watch?v=D7JM4VMKqPc">Video: Effect and AudioTrack editing in jMonkeyEngine 3 sdk</a>
  863. </li>
  864. </ul>
  865. </li>
  866. <li class="nav-item" data-depth="3">
  867. <a class="nav-link" href="../../sdk/filters.html">Post-Processor Filter Editor and Viewer</a>
  868. </li>
  869. <li class="nav-item" data-depth="3">
  870. <a class="nav-link" href="../../core/app/state/application_states.html">Application States</a>
  871. </li>
  872. <li class="nav-item" data-depth="3">
  873. <a class="nav-link" href="../../core/scene/control/custom_controls.html">Custom Controls</a>
  874. </li>
  875. <li class="nav-item" data-depth="3">
  876. <a class="nav-link" href="../../sdk/vehicle_creator.html">Vehicle Creator</a>
  877. </li>
  878. <li class="nav-item" data-depth="3">
  879. <a class="nav-link" href="../../sdk/assetbrowser.html">Asset Browser</a>
  880. </li>
  881. <li class="nav-item" data-depth="3">
  882. <a class="nav-link" href="../../sdk/animations.html">Animations</a>
  883. </li>
  884. </ul>
  885. </li>
  886. <li class="nav-item" data-depth="2">
  887. <button class="nav-item-toggle"></button>
  888. <span class="nav-text">Advanced Usage</span>
  889. <ul class="nav-list">
  890. <li class="nav-item" data-depth="3">
  891. <a class="nav-link" href="../../sdk/build_platform.html">Building jMonkeyEngine SDK</a>
  892. </li>
  893. <li class="nav-item" data-depth="3">
  894. <a class="nav-link" href="../../sdk/use_own_jme.html#.adoc">Using your own (modified) version of jME3 in jMonkeyEngine SDK</a>
  895. </li>
  896. <li class="nav-item" data-depth="3">
  897. <a class="nav-link" href="../../sdk/increasing_heap_memory.html">Increasing Heap Memory</a>
  898. </li>
  899. <li class="nav-item" data-depth="3">
  900. <a class="nav-link" href="../../sdk/log_files.html">Log Files</a>
  901. </li>
  902. </ul>
  903. </li>
  904. <li class="nav-item" data-depth="2">
  905. <button class="nav-item-toggle"></button>
  906. <span class="nav-text">Available external plugins</span>
  907. <ul class="nav-list">
  908. <li class="nav-item" data-depth="3">
  909. <a class="nav-link" href="../../contributions/contributions.html">Contributions</a>
  910. </li>
  911. <li class="nav-item" data-depth="3">
  912. <a class="nav-link" href="../../sdk/neotexture.html">Neo Texture Editor for procedural textures</a>
  913. </li>
  914. <li class="nav-item" data-depth="3">
  915. <a class="nav-link" href="http://www.youtube.com/watch?v=yS9a9o4WzL8">Video: Mesh Tool &amp; Physics Editor</a>
  916. </li>
  917. </ul>
  918. </li>
  919. <li class="nav-item" data-depth="2">
  920. <button class="nav-item-toggle"></button>
  921. <a class="nav-link" href="../../sdk/development.html">Developing plugins for jMonkeyEngine SDK</a>
  922. <ul class="nav-list">
  923. <li class="nav-item" data-depth="3">
  924. <a class="nav-link" href="../../sdk/development/setup.html">Creating a plugin</a>
  925. </li>
  926. <li class="nav-item" data-depth="3">
  927. <a class="nav-link" href="../../sdk/development/general.html">Creating components</a>
  928. </li>
  929. <li class="nav-item" data-depth="3">
  930. <a class="nav-link" href="../../sdk/development/scene.html">The Main Scene</a>
  931. </li>
  932. <li class="nav-item" data-depth="3">
  933. <a class="nav-link" href="../../sdk/development/sceneexplorer.html">The Scene Explorer</a>
  934. </li>
  935. <li class="nav-item" data-depth="3">
  936. <a class="nav-link" href="../../sdk/development/projects_assets.html">Projects and Assets</a>
  937. </li>
  938. <li class="nav-item" data-depth="3">
  939. <a class="nav-link" href="../../sdk/development/extension_library.html">Create a library plugin from a jar file</a>
  940. </li>
  941. <li class="nav-item" data-depth="3">
  942. <a class="nav-link" href="../../sdk/development/model_loader.html">Create a new or custom model filetype and loader</a>
  943. </li>
  944. </ul>
  945. </li>
  946. </ul>
  947. </li>
  948. </ul>
  949. </li>
  950. </ul>
  951. </nav>
  952. </div>
  953. <div class="nav-panel-explore" data-panel="explore">
  954. <div class="context">
  955. <span class="title">JME</span>
  956. <span class="version">3.8</span>
  957. </div>
  958. <ul class="components">
  959. <li class="component is-current">
  960. <span class="title">JME</span>
  961. <ul class="versions">
  962. <li class="version is-current">
  963. <a href="../../documentation.html">3.8</a>
  964. </li>
  965. <li class="version">
  966. <a href="../../../3.4/documentation.html">3.4</a>
  967. </li>
  968. <li class="version">
  969. <a href="../../../3.3/documentation.html">3.3</a>
  970. </li>
  971. <li class="version">
  972. <a href="../../../3.2/documentation.html">3.2</a>
  973. </li>
  974. </ul>
  975. </li>
  976. <li class="component">
  977. <span class="title">Wiki Contribution</span>
  978. <ul class="versions">
  979. <li class="version">
  980. <a href="../../../../docs-wiki/3.8/wiki_contributor.html">3.8</a>
  981. </li>
  982. </ul>
  983. </li>
  984. <li class="component">
  985. <span class="title">Wiki UI</span>
  986. <ul class="versions">
  987. <li class="version">
  988. <a href="../../../../wiki-ui/index.html">master</a>
  989. </li>
  990. </ul>
  991. </li>
  992. </ul>
  993. </div>
  994. </div>
  995. </aside>
  996. </div>
  997. <main class="article">
  998. <div class="toolbar" role="navigation">
  999. <button class="nav-toggle"></button>
  1000. <nav class="breadcrumbs" aria-label="breadcrumbs">
  1001. <ul>
  1002. <li><a href="../../documentation.html">JME</a></li>
  1003. <li><a href="beginner.html">Beginner Tutorials</a></li>
  1004. <li><a href="hello_picking.html">Hello Picking</a></li>
  1005. </ul>
  1006. </nav>
  1007. <div class="page-versions">
  1008. <button class="version-menu-toggle" title="Show other versions of page">3.8</button>
  1009. <div class="version-menu">
  1010. <a class="version is-current" href="hello_picking.html">3.8</a>
  1011. <a class="version" href="../../../3.4/tutorials/beginner/hello_picking.html">3.4</a>
  1012. <a class="version" href="../../../3.3/tutorials/beginner/hello_picking.html">3.3</a>
  1013. <a class="version" href="../../../3.2/tutorials/beginner/hello_picking.html">3.2</a>
  1014. </div>
  1015. </div>
  1016. <div class="edit-this-page"><a href="https://github.com/jMonkeyEngine/wiki/edit/master/docs/modules/tutorials/pages/beginner/hello_picking.adoc">Edit this Page</a></div>
  1017. </div>
  1018. <div class="content">
  1019. <article class="doc">
  1020. <h1 class="page">jMonkeyEngine 3 Tutorial (8) - Hello Picking</h1>
  1021. <div id="preamble">
  1022. <div class="sectionbody">
  1023. <div class="paragraph">
  1024. <p>Typical interactions in games include shooting, picking up objects, and opening doors. From an implementation point of view, these apparently different interactions are surprisingly similar: The user first aims and selects a target in the 3D scene, and then triggers an action on it. We call this process picking.</p>
  1025. </div>
  1026. <div class="paragraph">
  1027. <p>You can pick something by either pressing a key on the keyboard, or by clicking with the mouse. In either case, you identify the target by aiming a ray –a straight line– into the scene. This method to implement picking is called <em>ray casting</em> (which is not the same as <em>ray tracing</em>).</p>
  1028. </div>
  1029. <div class="paragraph">
  1030. <p>This tutorial relies on what you have learned in the <a href="hello_input_system.html" class="xref page">Hello Input</a> tutorial. You find more related code samples under <a href="../../core/input/mouse_picking.html" class="xref page">Mouse Picking</a> and <a href="../../core/collision/collision_and_intersection.html" class="xref page">Collision and Intersection</a>.</p>
  1031. </div>
  1032. <div class="imageblock text-center">
  1033. <div class="content">
  1034. <img src="../_images/beginner/beginner-picking.png" alt="beginner-picking.png" width="" height="">
  1035. </div>
  1036. </div>
  1037. </div>
  1038. </div>
  1039. <div class="sect1">
  1040. <h2 id="sample-code"><a class="anchor" href="#sample-code"></a>Sample Code</h2>
  1041. <div class="sectionbody">
  1042. <div class="listingblock">
  1043. <div class="content">
  1044. <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">package jme3test.helloworld;
  1045. import com.jme3.app.SimpleApplication;
  1046. import com.jme3.collision.CollisionResult;
  1047. import com.jme3.collision.CollisionResults;
  1048. import com.jme3.font.BitmapText;
  1049. import com.jme3.input.KeyInput;
  1050. import com.jme3.input.MouseInput;
  1051. import com.jme3.input.controls.ActionListener;
  1052. import com.jme3.input.controls.KeyTrigger;
  1053. import com.jme3.input.controls.MouseButtonTrigger;
  1054. import com.jme3.light.DirectionalLight;
  1055. import com.jme3.material.Material;
  1056. import com.jme3.math.ColorRGBA;
  1057. import com.jme3.math.Ray;
  1058. import com.jme3.math.Vector3f;
  1059. import com.jme3.scene.Geometry;
  1060. import com.jme3.scene.Node;
  1061. import com.jme3.scene.Spatial;
  1062. import com.jme3.scene.shape.Box;
  1063. import com.jme3.scene.shape.Sphere;
  1064. /** Sample 8 - how to let the user pick (select) objects in the scene
  1065. * using the mouse or key presses. Can be used for shooting, opening doors, etc. */
  1066. public class HelloPicking extends SimpleApplication {
  1067. public static void main(String[] args) {
  1068. HelloPicking app = new HelloPicking();
  1069. app.start();
  1070. }
  1071. private Node shootables;
  1072. private Geometry mark;
  1073. @Override
  1074. public void simpleInitApp() {
  1075. initCrossHairs(); // a "+" in the middle of the screen to help aiming
  1076. initKeys(); // load custom key mappings
  1077. initMark(); // a red sphere to mark the hit
  1078. /** create four colored boxes and a floor to shoot at: */
  1079. shootables = new Node("Shootables");
  1080. rootNode.attachChild(shootables);
  1081. shootables.attachChild(makeCube("a Dragon", -2f, 0f, 1f));
  1082. shootables.attachChild(makeCube("a tin can", 1f, -2f, 0f));
  1083. shootables.attachChild(makeCube("the Sheriff", 0f, 1f, -2f));
  1084. shootables.attachChild(makeCube("the Deputy", 1f, 0f, -4f));
  1085. shootables.attachChild(makeFloor());
  1086. shootables.attachChild(makeCharacter());
  1087. }
  1088. /** Declaring the "Shoot" action and mapping to its triggers. */
  1089. private void initKeys() {
  1090. inputManager.addMapping("Shoot",
  1091. new KeyTrigger(KeyInput.KEY_SPACE), // trigger 1: spacebar
  1092. new MouseButtonTrigger(MouseInput.BUTTON_LEFT)); // trigger 2: left-button click
  1093. inputManager.addListener(actionListener, "Shoot");
  1094. }
  1095. /** Defining the "Shoot" action: Determine what was hit and how to respond. */
  1096. final private ActionListener actionListener = new ActionListener() {
  1097. @Override
  1098. public void onAction(String name, boolean keyPressed, float tpf) {
  1099. if (name.equals("Shoot") &amp;&amp; !keyPressed) {
  1100. // 1. Reset results list.
  1101. CollisionResults results = new CollisionResults();
  1102. // 2. Aim the ray from cam loc to cam direction.
  1103. Ray ray = new Ray(cam.getLocation(), cam.getDirection());
  1104. // 3. Collect intersections between Ray and Shootables in results list.
  1105. shootables.collideWith(ray, results);
  1106. // 4. Print the results
  1107. System.out.println("----- Collisions? " + results.size() + "-----");
  1108. for (int i = 0; i &lt; results.size(); i++) {
  1109. // For each hit, we know distance, impact point, name of geometry.
  1110. float dist = results.getCollision(i).getDistance();
  1111. Vector3f pt = results.getCollision(i).getContactPoint();
  1112. String hit = results.getCollision(i).getGeometry().getName();
  1113. System.out.println("* Collision #" + i);
  1114. System.out.println(" You shot " + hit + " at " + pt + ", " + dist + " wu away.");
  1115. }
  1116. // 5. Use the results (we mark the hit object)
  1117. if (results.size() &gt; 0) {
  1118. // The closest collision point is what was truly hit:
  1119. CollisionResult closest = results.getClosestCollision();
  1120. // Let's interact - we mark the hit with a red dot.
  1121. mark.setLocalTranslation(closest.getContactPoint());
  1122. rootNode.attachChild(mark);
  1123. } else {
  1124. // No hits? Then remove the red mark.
  1125. rootNode.detachChild(mark);
  1126. }
  1127. }
  1128. }
  1129. };
  1130. /** A cube object for target practice */
  1131. private Geometry makeCube(String name, float x, float y, float z) {
  1132. Box box = new Box(1, 1, 1);
  1133. Geometry cube = new Geometry(name, box);
  1134. cube.setLocalTranslation(x, y, z);
  1135. Material mat1 = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md");
  1136. mat1.setColor("Color", ColorRGBA.randomColor());
  1137. cube.setMaterial(mat1);
  1138. return cube;
  1139. }
  1140. /** A floor to show that the "shot" can go through several objects. */
  1141. private Geometry makeFloor() {
  1142. Box box = new Box(15, .2f, 15);
  1143. Geometry floor = new Geometry("the Floor", box);
  1144. floor.setLocalTranslation(0, -4, -5);
  1145. Material mat1 = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md");
  1146. mat1.setColor("Color", ColorRGBA.Gray);
  1147. floor.setMaterial(mat1);
  1148. return floor;
  1149. }
  1150. /** A red ball that marks the last spot that was "hit" by the "shot". */
  1151. private void initMark() {
  1152. Sphere sphere = new Sphere(30, 30, 0.2f);
  1153. mark = new Geometry("BOOM!", sphere);
  1154. Material mark_mat = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md");
  1155. mark_mat.setColor("Color", ColorRGBA.Red);
  1156. mark.setMaterial(mark_mat);
  1157. }
  1158. /** A centred plus sign to help the player aim. */
  1159. private void initCrossHairs() {
  1160. setDisplayStatView(false);
  1161. guiFont = assetManager.loadFont("Interface/Fonts/Default.fnt");
  1162. BitmapText ch = new BitmapText(guiFont);
  1163. ch.setSize(guiFont.getCharSet().getRenderedSize() * 2);
  1164. ch.setText("+"); // crosshairs
  1165. ch.setLocalTranslation( // center
  1166. settings.getWidth() / 2 - ch.getLineWidth()/2, settings.getHeight() / 2 + ch.getLineHeight()/2, 0);
  1167. guiNode.attachChild(ch);
  1168. }
  1169. private Spatial makeCharacter() {
  1170. // load a character from jme3test-test-data
  1171. Spatial golem = assetManager.loadModel("Models/Oto/Oto.mesh.xml");
  1172. golem.scale(0.5f);
  1173. golem.setLocalTranslation(-1.0f, -1.5f, -0.6f);
  1174. // We must add a light to make the model visible
  1175. DirectionalLight sun = new DirectionalLight();
  1176. sun.setDirection(new Vector3f(-0.1f, -0.7f, -1.0f));
  1177. golem.addLight(sun);
  1178. return golem;
  1179. }
  1180. }</code></pre>
  1181. </div>
  1182. </div>
  1183. <div class="paragraph">
  1184. <p>You should see four colored cubes floating over a gray floor, and cross-hairs. Aim the cross-hairs and click, or press the spacebar to shoot. The hit spot is marked with a red dot.</p>
  1185. </div>
  1186. <div class="paragraph">
  1187. <p>Keep an eye on the application&#8217;s output stream, it will give you more details: The name of the mesh that was hit, the coordinates of the hit, and the distance.</p>
  1188. </div>
  1189. </div>
  1190. </div>
  1191. <div class="sect1">
  1192. <h2 id="understanding-the-helper-methods"><a class="anchor" href="#understanding-the-helper-methods"></a>Understanding the Helper Methods</h2>
  1193. <div class="sectionbody">
  1194. <div class="paragraph">
  1195. <p>The methods <code>makeCube()</code>, <code>makeFloor()</code>, <code>initMark()</code>, and <code>initCrossHairs</code>, are custom helper methods. We call them from <code>simpleInitApp()</code> to initialize the scenegraph with sample content.</p>
  1196. </div>
  1197. <div class="olist arabic">
  1198. <ol class="arabic">
  1199. <li>
  1200. <p><code>makeCube()</code> creates simple colored boxes for &#8220;target&#8221; practice.</p>
  1201. </li>
  1202. <li>
  1203. <p><code>makeFloor()</code> creates a gray floor node for &#8220;target&#8221; practice.</p>
  1204. </li>
  1205. <li>
  1206. <p><code>initMark()</code> creates a red sphere (mark). We will use it later to mark the spot that was hit.</p>
  1207. <div class="ulist">
  1208. <ul>
  1209. <li>
  1210. <p>Note that the mark is not attached and therefor not visible at the start!</p>
  1211. </li>
  1212. </ul>
  1213. </div>
  1214. </li>
  1215. <li>
  1216. <p><code>initCrossHairs()</code> creates simple cross-hairs by printing a &#8220;+&#8221; sign in the middle of the screen.</p>
  1217. <div class="ulist">
  1218. <ul>
  1219. <li>
  1220. <p>Note that the cross-hairs are attached to the <code>guiNode</code>, not to the <code>rootNode</code>.</p>
  1221. </li>
  1222. </ul>
  1223. </div>
  1224. </li>
  1225. </ol>
  1226. </div>
  1227. <div class="paragraph">
  1228. <p>In this example, we attached all &#8220;shootable&#8221; objects to one custom node, <code>Shootables</code>. This is an optimization so the engine only has to calculate intersections with objects we are actually interested in. The <code>Shootables</code> node is attached to the <code>rootNode</code> as usual.</p>
  1229. </div>
  1230. </div>
  1231. </div>
  1232. <div class="sect1">
  1233. <h2 id="understanding-ray-casting-for-hit-testing"><a class="anchor" href="#understanding-ray-casting-for-hit-testing"></a>Understanding Ray Casting for Hit Testing</h2>
  1234. <div class="sectionbody">
  1235. <div class="paragraph">
  1236. <p>Our goal is to determine which box the user &#8220;shot&#8221; (picked). In general, we want to determine which mesh the user has selected by aiming the cross-hairs at it. Mathematically, we draw a line from the camera and see whether it intersects with objects in the 3D scene. This line is called a ray.</p>
  1237. </div>
  1238. <div class="paragraph">
  1239. <p>Here is our simple ray casting algorithm for picking objects:</p>
  1240. </div>
  1241. <div class="olist arabic">
  1242. <ol class="arabic">
  1243. <li>
  1244. <p>Reset the results list.</p>
  1245. </li>
  1246. <li>
  1247. <p>Cast a ray from cam location into the cam direction.</p>
  1248. </li>
  1249. <li>
  1250. <p>Collect all intersections between the ray and <code>Shootable</code> nodes in the <code>results</code> list.</p>
  1251. </li>
  1252. <li>
  1253. <p>Use the results list to determine what was hit:</p>
  1254. <div class="olist loweralpha">
  1255. <ol class="loweralpha" type="a">
  1256. <li>
  1257. <p>For each hit, JME reports its distance from the camera, impact point, and the name of the mesh.</p>
  1258. </li>
  1259. <li>
  1260. <p>Sort the results by distance.</p>
  1261. </li>
  1262. <li>
  1263. <p>Take the closest result, it is the mesh that was hit.</p>
  1264. </li>
  1265. </ol>
  1266. </div>
  1267. </li>
  1268. </ol>
  1269. </div>
  1270. </div>
  1271. </div>
  1272. <div class="sect1">
  1273. <h2 id="implementing-hit-testing"><a class="anchor" href="#implementing-hit-testing"></a>Implementing Hit Testing</h2>
  1274. <div class="sectionbody">
  1275. <div class="sect2">
  1276. <h3 id="loading-the-scene"><a class="anchor" href="#loading-the-scene"></a>Loading the scene</h3>
  1277. <div class="paragraph">
  1278. <p>First initialize some shootable nodes and attach them to the scene. You will use the <code>mark</code> object later.</p>
  1279. </div>
  1280. <div class="listingblock">
  1281. <div class="content">
  1282. <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java"> Node shootables;
  1283. Geometry mark;
  1284. @Override
  1285. public void simpleInitApp() {
  1286. initCrossHairs();
  1287. initKeys();
  1288. initMark();
  1289. shootables = new Node("Shootables");
  1290. rootNode.attachChild(shootables);
  1291. shootables.attachChild(makeCube("a Dragon", -2f, 0f, 1f));
  1292. shootables.attachChild(makeCube("a tin can", 1f,-2f, 0f));
  1293. shootables.attachChild(makeCube("the Sheriff", 0f, 1f,-2f));
  1294. shootables.attachChild(makeCube("the Deputy", 1f, 0f, -4));
  1295. shootables.attachChild(makeFloor());
  1296. }</code></pre>
  1297. </div>
  1298. </div>
  1299. </div>
  1300. <div class="sect2">
  1301. <h3 id="setting-up-the-input-listener"><a class="anchor" href="#setting-up-the-input-listener"></a>Setting Up the Input Listener</h3>
  1302. <div class="paragraph">
  1303. <p>Next you declare the shooting action. It can be triggered either by clicking, or by pressing the space bar. The <code>initKeys()</code> method is called from <code>simpleInitApp()</code> to set up these input mappings.</p>
  1304. </div>
  1305. <div class="listingblock">
  1306. <div class="content">
  1307. <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java"> /** Declaring the "Shoot" action and its triggers. */
  1308. private void initKeys() {
  1309. inputManager.addMapping("Shoot", // Declare...
  1310. new KeyTrigger(KeyInput.KEY_SPACE), // trigger 1: spacebar, or
  1311. new MouseButtonTrigger(MouseInput.BUTTON_LEFT)); // trigger 2: left-button click
  1312. inputManager.addListener(actionListener, "Shoot"); // ... and add.
  1313. }</code></pre>
  1314. </div>
  1315. </div>
  1316. </div>
  1317. <div class="sect2">
  1318. <h3 id="picking-action-using-crosshairs"><a class="anchor" href="#picking-action-using-crosshairs"></a>Picking Action Using Crosshairs</h3>
  1319. <div class="paragraph">
  1320. <p>Next we implement the ActionListener that responds to the Shoot trigger with an action. The action follows the ray casting algorithm described above:</p>
  1321. </div>
  1322. <div class="olist arabic">
  1323. <ol class="arabic">
  1324. <li>
  1325. <p>For every click or press of the spacebar, the <code>Shoot</code> action is triggered.</p>
  1326. </li>
  1327. <li>
  1328. <p>The action casts a ray forward and determines intersections with shootable objects (= ray casting).</p>
  1329. </li>
  1330. <li>
  1331. <p>For any target that has been hit, it prints name, distance, and coordinates of the hit.</p>
  1332. </li>
  1333. <li>
  1334. <p>Finally it attaches a red mark to the closest result, to highlight the spot that was actually hit.</p>
  1335. </li>
  1336. <li>
  1337. <p>When nothing was hit, the results list is empty, and the red mark is removed.</p>
  1338. </li>
  1339. </ol>
  1340. </div>
  1341. <div class="paragraph">
  1342. <p>Note how it prints a lot of output to show you which hits were registered.</p>
  1343. </div>
  1344. <div class="listingblock">
  1345. <div class="content">
  1346. <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java"> /** Defining the "Shoot" action: Determine what was hit and how to respond. */
  1347. final private ActionListener actionListener = new ActionListener() {
  1348. @Override
  1349. public void onAction(String name, boolean keyPressed, float tpf) {
  1350. if (name.equals("Shoot") &amp;&amp; !keyPressed) {
  1351. // 1. Reset results list.
  1352. CollisionResults results = new CollisionResults();
  1353. // 2. Aim the ray from cam loc to cam direction.
  1354. Ray ray = new Ray(cam.getLocation(), cam.getDirection());
  1355. // 3. Collect intersections between Ray and Shootables in results list.
  1356. shootables.collideWith(ray, results);
  1357. // 4. Print results.
  1358. System.out.println("----- Collisions? " + results.size() + "-----");
  1359. for (int i = 0; i &lt; results.size(); i++) {
  1360. // For each hit, we know distance, impact point, name of geometry.
  1361. float dist = results.getCollision(i).getDistance();
  1362. Vector3f pt = results.getCollision(i).getContactPoint();
  1363. String hit = results.getCollision(i).getGeometry().getName();
  1364. System.out.println("* Collision #" + i);
  1365. System.out.println(" You shot " + hit + " at " + pt + ", " + dist + " wu away.");
  1366. }
  1367. // 5. Use the results (we mark the hit object)
  1368. if (results.size() &gt; 0){
  1369. // The closest collision point is what was truly hit:
  1370. CollisionResult closest = results.getClosestCollision();
  1371. mark.setLocalTranslation(closest.getContactPoint());
  1372. // Let's interact - we mark the hit with a red dot.
  1373. rootNode.attachChild(mark);
  1374. } else {
  1375. // No hits? Then remove the red mark.
  1376. rootNode.detachChild(mark);
  1377. }
  1378. }
  1379. }
  1380. };</code></pre>
  1381. </div>
  1382. </div>
  1383. <div class="admonitionblock tip">
  1384. <table>
  1385. <tr>
  1386. <td class="icon">
  1387. <i class="fa icon-tip" title="Tip"></i>
  1388. </td>
  1389. <td class="content">
  1390. Notice how you use the provided method <code>results.getClosestCollision().getContactPoint()</code> to determine the <em>closest</em> hit&#8217;s location. If your game includes a &#8220;weapon&#8221; or &#8220;spell&#8221; that can hit multiple targets, you could also loop over the list of results, and interact with each of them.
  1391. </td>
  1392. </tr>
  1393. </table>
  1394. </div>
  1395. </div>
  1396. <div class="sect2">
  1397. <h3 id="picking-action-using-mouse-pointer"><a class="anchor" href="#picking-action-using-mouse-pointer"></a>Picking Action Using Mouse Pointer</h3>
  1398. <div class="paragraph">
  1399. <p>The above example assumes that the player is aiming crosshairs (attached to the center of the screen) at the target. But you can change the picking code to allow you to freely click at objects in the scene with a visible mouse pointer. In order to do this you have to convert the 2d screen coordinates of the click to 3D world coordinates to get the start point of the picking ray.</p>
  1400. </div>
  1401. <div class="olist arabic">
  1402. <ol class="arabic">
  1403. <li>
  1404. <p>Reset result list.</p>
  1405. </li>
  1406. <li>
  1407. <p>Get 2D click coordinates.</p>
  1408. </li>
  1409. <li>
  1410. <p>Convert 2D screen coordinates to their 3D equivalent.</p>
  1411. </li>
  1412. <li>
  1413. <p>Aim the ray from the clicked 3D location forwards into the scene.</p>
  1414. </li>
  1415. <li>
  1416. <p>Collect intersections between ray and all nodes into a results list.</p>
  1417. </li>
  1418. </ol>
  1419. </div>
  1420. <div class="listingblock">
  1421. <div class="content">
  1422. <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">...
  1423. CollisionResults results = new CollisionResults();
  1424. Vector2f click2d = inputManager.getCursorPosition().clone();
  1425. Vector3f click3d = cam.getWorldCoordinates(
  1426. click2d, 0f).clone();
  1427. Vector3f dir = cam.getWorldCoordinates(
  1428. click2d, 1f).subtractLocal(click3d).normalizeLocal();
  1429. Ray ray = new Ray(click3d, dir);
  1430. shootables.collideWith(ray, results);
  1431. ...</code></pre>
  1432. </div>
  1433. </div>
  1434. <div class="paragraph">
  1435. <p>Use this together with <code>inputManager.setCursorVisible(true)</code> to make certain the cursor is visible.</p>
  1436. </div>
  1437. <div class="paragraph">
  1438. <p>Note that since you now use the mouse for picking, you can no longer use it to rotate the camera. If you want to have a visible mouse pointer for picking in your game, you have to redefine the camera rotation mappings.</p>
  1439. </div>
  1440. </div>
  1441. </div>
  1442. </div>
  1443. <div class="sect1">
  1444. <h2 id="exercises"><a class="anchor" href="#exercises"></a>Exercises</h2>
  1445. <div class="sectionbody">
  1446. <div class="paragraph">
  1447. <p>After a hit was registered, the closest object is identified as target, and marked with a red dot.
  1448. Modify the code sample to solve these exercises:</p>
  1449. </div>
  1450. <div class="sect2">
  1451. <h3 id="exercise-1-magic-spell"><a class="anchor" href="#exercise-1-magic-spell"></a>Exercise 1: Magic Spell</h3>
  1452. <div class="paragraph">
  1453. <p>Change the color of the closest clicked target!<br>
  1454. Here are some tips:</p>
  1455. </div>
  1456. <div class="olist arabic">
  1457. <ol class="arabic">
  1458. <li>
  1459. <p>Go to the line where the closest target is identified, and add your changes after that.</p>
  1460. </li>
  1461. <li>
  1462. <p>To change an object&#8217;s color, you must first know its Geometry. Identify the node by identifying the target&#8217;s name.</p>
  1463. <div class="ulist">
  1464. <ul>
  1465. <li>
  1466. <p>Use <code>Geometry g = closest.getGeometry();</code></p>
  1467. </li>
  1468. </ul>
  1469. </div>
  1470. </li>
  1471. <li>
  1472. <p>Create a new color material and set the node&#8217;s Material to this color.</p>
  1473. <div class="ulist">
  1474. <ul>
  1475. <li>
  1476. <p>Look inside the <code>makeCube()</code> method for an example of how to set random colors.</p>
  1477. </li>
  1478. </ul>
  1479. </div>
  1480. </li>
  1481. </ol>
  1482. </div>
  1483. </div>
  1484. <div class="sect2">
  1485. <h3 id="exercise-2-shoot-a-character"><a class="anchor" href="#exercise-2-shoot-a-character"></a>Exercise 2: Shoot a Character</h3>
  1486. <div class="paragraph">
  1487. <p>Shooting boxes isn&#8217;t very exciting – can you add code that loads and positions a model in the scene, and shoot at it?</p>
  1488. </div>
  1489. <div class="ulist">
  1490. <ul>
  1491. <li>
  1492. <p>Tip: You can use <code>Spatial golem = assetManager.loadModel("Models/Oto/Oto.mesh.xml");</code> from the engine&#8217;s jme3-test-data.jar.</p>
  1493. </li>
  1494. <li>
  1495. <p>Tip: Models are shaded! You need some light!</p>
  1496. </li>
  1497. </ul>
  1498. </div>
  1499. </div>
  1500. <div class="sect2">
  1501. <h3 id="exercise-3-pick-up-into-inventory"><a class="anchor" href="#exercise-3-pick-up-into-inventory"></a>Exercise 3: Pick up into Inventory</h3>
  1502. <div class="paragraph">
  1503. <p>Change the code as follows to simulate the player picking up objects into the inventory: When you click once, the closest target is identified and detached from the scene. When you click a second time, the target is reattached at the location that you have clicked. Here are some tips:</p>
  1504. </div>
  1505. <div class="olist arabic">
  1506. <ol class="arabic">
  1507. <li>
  1508. <p>Create an inventory node to store the detached nodes temporarily.</p>
  1509. </li>
  1510. <li>
  1511. <p>The inventory node is not attached to the rootNode.</p>
  1512. </li>
  1513. <li>
  1514. <p>You can make the inventory visible by attaching the inventory node to the guiNode (which attaches it to the HUD). Note the following caveats:</p>
  1515. <div class="ulist">
  1516. <ul>
  1517. <li>
  1518. <p>If your nodes use a lit Material (not &#8220;Unshaded.j3md&#8221;), also add a light to the guiNode.</p>
  1519. </li>
  1520. <li>
  1521. <p>Size units are pixels in the HUD, therefor a 2-wu cube is displayed only 2 pixels wide in the HUD. – Scale it bigger!</p>
  1522. </li>
  1523. <li>
  1524. <p>Position the nodes: The bottom left corner of the HUD is (0f,0f), and the top right corner is at (settings.getWidth(),settings.getHeight()).</p>
  1525. </li>
  1526. </ul>
  1527. </div>
  1528. </li>
  1529. </ol>
  1530. </div>
  1531. <div class="admonitionblock important">
  1532. <table>
  1533. <tr>
  1534. <td class="icon">
  1535. <i class="fa icon-important" title="Important"></i>
  1536. </td>
  1537. <td class="content">
  1538. <div class="paragraph">
  1539. <p><a href="solutions.html#hello-picking" class="xref page">Some proposed solutions</a><br>
  1540. <strong>Be sure to try to solve them for yourself first!</strong></p>
  1541. </div>
  1542. </td>
  1543. </tr>
  1544. </table>
  1545. </div>
  1546. </div>
  1547. </div>
  1548. </div>
  1549. <div class="sect1">
  1550. <h2 id="conclusion"><a class="anchor" href="#conclusion"></a>Conclusion</h2>
  1551. <div class="sectionbody">
  1552. <div class="paragraph">
  1553. <p>You have learned how to use ray casting to solve the task of determining what object a user selected on the screen. You learned that this can be used for a variety of interactions, such as shooting, opening, picking up and dropping items, pressing a button or lever, etc.</p>
  1554. </div>
  1555. <div class="paragraph">
  1556. <p>Use your imagination from here:</p>
  1557. </div>
  1558. <div class="ulist">
  1559. <ul>
  1560. <li>
  1561. <p>In your game, the click can trigger any action on the identified Geometry: Detach it and put it into the inventory, attach something to it, trigger an animation or effect, open a door or crate, – etc.</p>
  1562. </li>
  1563. <li>
  1564. <p>In your game, you could replace the red mark with a particle emitter, add an explosion effect, play a sound, calculate the new score after each hit depending on what was hit – etc.</p>
  1565. </li>
  1566. </ul>
  1567. </div>
  1568. </div>
  1569. </div>
  1570. <nav class="pagination">
  1571. <span class="prev"><a href="hello_animation.html">Hello Animation</a></span>
  1572. <span class="next"><a href="hello_collision.html">Hello Collision</a></span>
  1573. </nav>
  1574. </article>
  1575. <aside class="toc sidebar" data-title="Contents" data-levels="2">
  1576. <div class="toc-menu"></div>
  1577. </aside>
  1578. </div>
  1579. </main>
  1580. </div>
  1581. <footer class="footer">
  1582. <p>Copyright 2020 jMonkeyEngine Wiki Contributors. Licensed BSD-3.</p>
  1583. </footer>
  1584. <script src="../../../../_/js/vendor/docsearch.min.js"></script>
  1585. <!-- fetched from https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js -->
  1586. <script>
  1587. var search = docsearch({
  1588. apiKey: 'a736b6d93de805e26ec2f49b55013fbd',
  1589. indexName: 'jmonkeyengine',
  1590. inputSelector: '#search-input',
  1591. autocompleteOptions: { hint: false, keyboardShortcuts: ['s'] },
  1592. algoliaOptions: { hitsPerPage: 10 }
  1593. }).autocomplete
  1594. search.on('autocomplete:closed', function () { search.autocomplete.setVal() })
  1595. function focusSearchInput () { document.querySelector('#search-input').focus() }
  1596. if (document.querySelector('.home-link.is-current')) window.addEventListener('load', focusSearchInput)
  1597. </script>
  1598. <script src="../../../../_/js/site.js"></script>
  1599. <script async src="../../../../_/js/vendor/highlight.js"></script>
  1600. </body>
  1601. </html>