[{"data":1,"prerenderedAt":1883},["ShallowReactive",2],{"navigation":3,"/getting-started/how-it-works":72,"/getting-started/how-it-works-surround":1878},[4,22],{"title":5,"path":6,"stem":7,"children":8},"Getting Started","/getting-started","1.getting-started/1.index",[9,10,14,18],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation Guide","/getting-started/installation","1.getting-started/2.installation",{"title":15,"path":16,"stem":17},"Usage","/getting-started/usage","1.getting-started/3.usage",{"title":19,"path":20,"stem":21},"How it works","/getting-started/how-it-works","1.getting-started/how-it-works",{"title":23,"path":24,"stem":25,"children":26},"Api","/api","2.api",[27,30,64,68],{"title":28,"path":24,"stem":29},"Physics","2.api/index",{"title":31,"path":32,"stem":33,"children":34},"Rigid body","/api/rigid-body","2.api/1.rigid-body/index",[35,36,40,44,48,52,56,60],{"title":31,"path":32,"stem":33},{"title":37,"path":38,"stem":39},"Automatic colliders","/api/rigid-body/automatic-colliders","2.api/1.rigid-body/1.automatic-colliders",{"title":41,"path":42,"stem":43},"Custom colliders","/api/rigid-body/custom-colliders","2.api/1.rigid-body/2.custom-colliders",{"title":45,"path":46,"stem":47},"Forces","/api/rigid-body/forces","2.api/1.rigid-body/3.forces",{"title":49,"path":50,"stem":51},"Collisions","/api/rigid-body/collisions","2.api/1.rigid-body/4.collisions",{"title":53,"path":54,"stem":55},"Sensor","/api/rigid-body/sensor","2.api/1.rigid-body/5.sensor",{"title":57,"path":58,"stem":59},"Contact force","/api/rigid-body/contact-force","2.api/1.rigid-body/6.contact-force",{"title":61,"path":62,"stem":63},"Instance rigid body","/api/rigid-body/instance-rigid-body","2.api/1.rigid-body/7.instance-rigid-body",{"title":65,"path":66,"stem":67},"Joints","/api/joint","2.api/2.joint",{"title":69,"path":70,"stem":71},"UseRapier","/api/use-rapier","2.api/3.use-rapier",{"id":73,"title":19,"body":74,"description":1872,"extension":1873,"links":1874,"meta":1875,"navigation":200,"path":20,"seo":1876,"stem":21,"__hash__":1877},"docs/1.getting-started/how-it-works.md",{"type":75,"value":76,"toc":1870},"minimark",[77,83,87,97,100,1866],[78,79,80],"scene-wrapper",{},[81,82],"demos-usage",{},[84,85,86],"p",{},"To gain a clearer understanding of the underlying mechanics, it's helpful to think in terms of two distinct domains:",[88,89,90,94],"ul",{},[91,92,93],"li",{},"The TresJS context, which represents our 3D scene.",[91,95,96],{},"The physics layer, powered by Rapier, which governs the physical simulation.",[84,98,99],{},"Let's try to make a simple ball fall.",[101,102,103,108,111,451,455,466,483,821,825,844,855,1196,1203,1337,1340,1346,1705,1708,1719,1726,1733,1739,1748,1848,1851],"steps",{},[104,105,107],"h3",{"id":106},"first-step","First step",[84,109,110],{},"Let's add 2 different meshes to our scene, a sphere representing the ball and a plane representing the floor.",[112,113,118],"pre",{"className":114,"code":115,"language":116,"meta":117,"style":117},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas window-size>\n    \u003CTresPerspectiveCamera :position=\"[15, 15, 15]\" :look-at=\"[0, 0, 0]\" />\n    \u003CTresMesh name=\"ball\" :position=\"[0, 8, 0]\">\n      \u003CTresSphereGeometry :args=\"[1, 16]\" />\n      \u003CTresMeshNormalMaterial />\n    \u003C/TresMesh>\n    \u003CTresMesh name=\"floor\" :position=\"[0, 0, 0]\" :rotate-x=\"-Math.PI / 2\">\n      \u003CTresPlaneGeometry :args=\"[20, 20, 20]\" />\n      \u003CTresMeshBasicMaterial color=\"#f4f4f4\" />\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n","vue","",[119,120,121,156,185,195,202,212,226,262,295,318,328,338,380,401,423,432,442],"code",{"__ignoreMap":117},[122,123,126,130,134,138,141,144,147,151,153],"span",{"class":124,"line":125},"line",1,[122,127,129],{"class":128},"sMK4o","\u003C",[122,131,133],{"class":132},"swJcz","script",[122,135,137],{"class":136},"spNyl"," setup",[122,139,140],{"class":136}," lang",[122,142,143],{"class":128},"=",[122,145,146],{"class":128},"\"",[122,148,150],{"class":149},"sfazB","ts",[122,152,146],{"class":128},[122,154,155],{"class":128},">\n",[122,157,159,163,166,170,173,176,179,182],{"class":124,"line":158},2,[122,160,162],{"class":161},"s7zQu","import",[122,164,165],{"class":128}," {",[122,167,169],{"class":168},"sTEyZ"," TresCanvas",[122,171,172],{"class":128}," }",[122,174,175],{"class":161}," from",[122,177,178],{"class":128}," '",[122,180,181],{"class":149},"@tresjs/core",[122,183,184],{"class":128},"'\n",[122,186,188,191,193],{"class":124,"line":187},3,[122,189,190],{"class":128},"\u003C/",[122,192,133],{"class":132},[122,194,155],{"class":128},[122,196,198],{"class":124,"line":197},4,[122,199,201],{"emptyLinePlaceholder":200},true,"\n",[122,203,205,207,210],{"class":124,"line":204},5,[122,206,129],{"class":128},[122,208,209],{"class":132},"template",[122,211,155],{"class":128},[122,213,215,218,221,224],{"class":124,"line":214},6,[122,216,217],{"class":128},"  \u003C",[122,219,220],{"class":132},"TresCanvas",[122,222,223],{"class":136}," window-size",[122,225,155],{"class":128},[122,227,229,232,235,238,240,242,245,247,250,252,254,257,259],{"class":124,"line":228},7,[122,230,231],{"class":128},"    \u003C",[122,233,234],{"class":132},"TresPerspectiveCamera",[122,236,237],{"class":136}," :position",[122,239,143],{"class":128},[122,241,146],{"class":128},[122,243,244],{"class":149},"[15, 15, 15]",[122,246,146],{"class":128},[122,248,249],{"class":136}," :look-at",[122,251,143],{"class":128},[122,253,146],{"class":128},[122,255,256],{"class":149},"[0, 0, 0]",[122,258,146],{"class":128},[122,260,261],{"class":128}," />\n",[122,263,265,267,270,273,275,277,280,282,284,286,288,291,293],{"class":124,"line":264},8,[122,266,231],{"class":128},[122,268,269],{"class":132},"TresMesh",[122,271,272],{"class":136}," name",[122,274,143],{"class":128},[122,276,146],{"class":128},[122,278,279],{"class":149},"ball",[122,281,146],{"class":128},[122,283,237],{"class":136},[122,285,143],{"class":128},[122,287,146],{"class":128},[122,289,290],{"class":149},"[0, 8, 0]",[122,292,146],{"class":128},[122,294,155],{"class":128},[122,296,298,301,304,307,309,311,314,316],{"class":124,"line":297},9,[122,299,300],{"class":128},"      \u003C",[122,302,303],{"class":132},"TresSphereGeometry",[122,305,306],{"class":136}," :args",[122,308,143],{"class":128},[122,310,146],{"class":128},[122,312,313],{"class":149},"[1, 16]",[122,315,146],{"class":128},[122,317,261],{"class":128},[122,319,321,323,326],{"class":124,"line":320},10,[122,322,300],{"class":128},[122,324,325],{"class":132},"TresMeshNormalMaterial",[122,327,261],{"class":128},[122,329,331,334,336],{"class":124,"line":330},11,[122,332,333],{"class":128},"    \u003C/",[122,335,269],{"class":132},[122,337,155],{"class":128},[122,339,341,343,345,347,349,351,354,356,358,360,362,364,366,369,371,373,376,378],{"class":124,"line":340},12,[122,342,231],{"class":128},[122,344,269],{"class":132},[122,346,272],{"class":136},[122,348,143],{"class":128},[122,350,146],{"class":128},[122,352,353],{"class":149},"floor",[122,355,146],{"class":128},[122,357,237],{"class":136},[122,359,143],{"class":128},[122,361,146],{"class":128},[122,363,256],{"class":149},[122,365,146],{"class":128},[122,367,368],{"class":136}," :rotate-x",[122,370,143],{"class":128},[122,372,146],{"class":128},[122,374,375],{"class":149},"-Math.PI / 2",[122,377,146],{"class":128},[122,379,155],{"class":128},[122,381,383,385,388,390,392,394,397,399],{"class":124,"line":382},13,[122,384,300],{"class":128},[122,386,387],{"class":132},"TresPlaneGeometry",[122,389,306],{"class":136},[122,391,143],{"class":128},[122,393,146],{"class":128},[122,395,396],{"class":149},"[20, 20, 20]",[122,398,146],{"class":128},[122,400,261],{"class":128},[122,402,404,406,409,412,414,416,419,421],{"class":124,"line":403},14,[122,405,300],{"class":128},[122,407,408],{"class":132},"TresMeshBasicMaterial",[122,410,411],{"class":136}," color",[122,413,143],{"class":128},[122,415,146],{"class":128},[122,417,418],{"class":149},"#f4f4f4",[122,420,146],{"class":128},[122,422,261],{"class":128},[122,424,426,428,430],{"class":124,"line":425},15,[122,427,333],{"class":128},[122,429,269],{"class":132},[122,431,155],{"class":128},[122,433,435,438,440],{"class":124,"line":434},16,[122,436,437],{"class":128},"  \u003C/",[122,439,220],{"class":132},[122,441,155],{"class":128},[122,443,445,447,449],{"class":124,"line":444},17,[122,446,190],{"class":128},[122,448,209],{"class":132},[122,450,155],{"class":128},[104,452,454],{"id":453},"second-step","Second step",[84,456,457,458,461,462,465],{},"Then we enable ",[119,459,460],{},"Rapier"," by adding the ",[119,463,464],{},"\u003CPhysics >"," component surrounding all the elements we want to be affected by physics, in this case, the ball and the floor.",[467,468,469],"prose-warning",{},[84,470,471,472,474,475,482],{},"The ",[119,473,28],{}," component needs to be wrapped by a ",[476,477,481],"a",{"href":478,"rel":479},"https://vuejs.org/guide/built-ins/suspense.html#suspense",[480],"nofollow","Suspense"," component",[112,484,490],{"className":114,"code":485,"highlights":486,"language":116,"meta":117,"style":117},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Physics } from '@tresjs/rapier'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas window-size>\n    \u003CTresPerspectiveCamera :position=\"[15, 15, 15]\" :look-at=\"[0, 0, 0]\" />\n    \u003CSuspense>\n      \u003CPhysics>\n        \u003CTresMesh name=\"ball\" :position=\"[0, 8, 0]\">\n          \u003CTresSphereGeometry :args=\"[1,16]\" />\n          \u003CTresMeshNormalMaterial />\n        \u003C/TresMesh>\n        \u003CTresMesh name=\"floor\" :position=\"[0, 0, 0]\" :rotate-x=\"-Math.PI / 2\">\n          \u003CTresPlaneGeometry :args=\"[20, 20, 20]\" />\n          \u003CTresMeshBasicMaterial color=\"#f4f4f4\" />\n        \u003C/TresMesh>\n      \u003C/Physics>\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[187,297,320,330,340,382,403,425,434,444,487,488,489],18,19,20,[119,491,492,512,530,552,560,564,572,582,610,619,628,658,679,688,698,737,756,775,784,794,803,812],{"__ignoreMap":117},[122,493,494,496,498,500,502,504,506,508,510],{"class":124,"line":125},[122,495,129],{"class":128},[122,497,133],{"class":132},[122,499,137],{"class":136},[122,501,140],{"class":136},[122,503,143],{"class":128},[122,505,146],{"class":128},[122,507,150],{"class":149},[122,509,146],{"class":128},[122,511,155],{"class":128},[122,513,514,516,518,520,522,524,526,528],{"class":124,"line":158},[122,515,162],{"class":161},[122,517,165],{"class":128},[122,519,169],{"class":168},[122,521,172],{"class":128},[122,523,175],{"class":161},[122,525,178],{"class":128},[122,527,181],{"class":149},[122,529,184],{"class":128},[122,531,534,536,538,541,543,545,547,550],{"class":532,"line":187},[124,533],"highlight",[122,535,162],{"class":161},[122,537,165],{"class":128},[122,539,540],{"class":168}," Physics",[122,542,172],{"class":128},[122,544,175],{"class":161},[122,546,178],{"class":128},[122,548,549],{"class":149},"@tresjs/rapier",[122,551,184],{"class":128},[122,553,554,556,558],{"class":124,"line":197},[122,555,190],{"class":128},[122,557,133],{"class":132},[122,559,155],{"class":128},[122,561,562],{"class":124,"line":204},[122,563,201],{"emptyLinePlaceholder":200},[122,565,566,568,570],{"class":124,"line":214},[122,567,129],{"class":128},[122,569,209],{"class":132},[122,571,155],{"class":128},[122,573,574,576,578,580],{"class":124,"line":228},[122,575,217],{"class":128},[122,577,220],{"class":132},[122,579,223],{"class":136},[122,581,155],{"class":128},[122,583,584,586,588,590,592,594,596,598,600,602,604,606,608],{"class":124,"line":264},[122,585,231],{"class":128},[122,587,234],{"class":132},[122,589,237],{"class":136},[122,591,143],{"class":128},[122,593,146],{"class":128},[122,595,244],{"class":149},[122,597,146],{"class":128},[122,599,249],{"class":136},[122,601,143],{"class":128},[122,603,146],{"class":128},[122,605,256],{"class":149},[122,607,146],{"class":128},[122,609,261],{"class":128},[122,611,613,615,617],{"class":612,"line":297},[124,533],[122,614,231],{"class":128},[122,616,481],{"class":132},[122,618,155],{"class":128},[122,620,622,624,626],{"class":621,"line":320},[124,533],[122,623,300],{"class":128},[122,625,28],{"class":132},[122,627,155],{"class":128},[122,629,631,634,636,638,640,642,644,646,648,650,652,654,656],{"class":630,"line":330},[124,533],[122,632,633],{"class":128},"        \u003C",[122,635,269],{"class":132},[122,637,272],{"class":136},[122,639,143],{"class":128},[122,641,146],{"class":128},[122,643,279],{"class":149},[122,645,146],{"class":128},[122,647,237],{"class":136},[122,649,143],{"class":128},[122,651,146],{"class":128},[122,653,290],{"class":149},[122,655,146],{"class":128},[122,657,155],{"class":128},[122,659,661,664,666,668,670,672,675,677],{"class":660,"line":340},[124,533],[122,662,663],{"class":128},"          \u003C",[122,665,303],{"class":132},[122,667,306],{"class":136},[122,669,143],{"class":128},[122,671,146],{"class":128},[122,673,674],{"class":149},"[1,16]",[122,676,146],{"class":128},[122,678,261],{"class":128},[122,680,682,684,686],{"class":681,"line":382},[124,533],[122,683,663],{"class":128},[122,685,325],{"class":132},[122,687,261],{"class":128},[122,689,691,694,696],{"class":690,"line":403},[124,533],[122,692,693],{"class":128},"        \u003C/",[122,695,269],{"class":132},[122,697,155],{"class":128},[122,699,701,703,705,707,709,711,713,715,717,719,721,723,725,727,729,731,733,735],{"class":700,"line":425},[124,533],[122,702,633],{"class":128},[122,704,269],{"class":132},[122,706,272],{"class":136},[122,708,143],{"class":128},[122,710,146],{"class":128},[122,712,353],{"class":149},[122,714,146],{"class":128},[122,716,237],{"class":136},[122,718,143],{"class":128},[122,720,146],{"class":128},[122,722,256],{"class":149},[122,724,146],{"class":128},[122,726,368],{"class":136},[122,728,143],{"class":128},[122,730,146],{"class":128},[122,732,375],{"class":149},[122,734,146],{"class":128},[122,736,155],{"class":128},[122,738,740,742,744,746,748,750,752,754],{"class":739,"line":434},[124,533],[122,741,663],{"class":128},[122,743,387],{"class":132},[122,745,306],{"class":136},[122,747,143],{"class":128},[122,749,146],{"class":128},[122,751,396],{"class":149},[122,753,146],{"class":128},[122,755,261],{"class":128},[122,757,759,761,763,765,767,769,771,773],{"class":758,"line":444},[124,533],[122,760,663],{"class":128},[122,762,408],{"class":132},[122,764,411],{"class":136},[122,766,143],{"class":128},[122,768,146],{"class":128},[122,770,418],{"class":149},[122,772,146],{"class":128},[122,774,261],{"class":128},[122,776,778,780,782],{"class":777,"line":487},[124,533],[122,779,693],{"class":128},[122,781,269],{"class":132},[122,783,155],{"class":128},[122,785,787,790,792],{"class":786,"line":488},[124,533],[122,788,789],{"class":128},"      \u003C/",[122,791,28],{"class":132},[122,793,155],{"class":128},[122,795,797,799,801],{"class":796,"line":489},[124,533],[122,798,333],{"class":128},[122,800,481],{"class":132},[122,802,155],{"class":128},[122,804,806,808,810],{"class":124,"line":805},21,[122,807,437],{"class":128},[122,809,220],{"class":132},[122,811,155],{"class":128},[122,813,815,817,819],{"class":124,"line":814},22,[122,816,190],{"class":128},[122,818,209],{"class":132},[122,820,155],{"class":128},[104,822,824],{"id":823},"third-step","Third step",[84,826,827,828,831,832,837,838,843],{},"To add forces (such as gravity) to our sphere, we need to wrap it with a ",[119,829,830],{},"\u003CRigidBody />"," component , which will generate a ",[476,833,836],{"href":834,"rel":835},"https://rapier.rs/docs/user_guides/javascript/rigid_bodies#creation-and-insertion",[480],"RigidBody"," instance containing one or many ",[476,839,842],{"href":840,"rel":841},"https://rapier.rs/docs/user_guides/javascript/colliders",[480],"Colliders",". These are responsible for all the physical calculations.",[84,845,846,847,850,851],{},"By default, the RigidBody type is ",[119,848,849],{},"Dynamic",", which fits perfectly what we need for our ball. See all available types ",[476,852,854],{"href":853},"/components/rigid-body.html#types","here",[112,856,859],{"className":114,"code":857,"highlights":858,"language":116,"meta":117,"style":117},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Physics, RigidBody } from '@tresjs/rapier'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas window-size>\n    \u003CTresPerspectiveCamera :position=\"[15, 15, 15]\" :look-at=\"[0, 0, 0]\" />\n    \u003CSuspense>\n      \u003CPhysics>\n        \u003CRigidBody>\n          \u003CTresMesh name=\"ball\" :position=\"[0, 8, 0]\">\n            \u003CTresSphereGeometry :args=\"[1, 16]\" />\n            \u003CTresMeshNormalMaterial />\n          \u003C/TresMesh>\n        \u003C/RigidBody>\n        \u003CTresMesh name=\"floor\" :position=\"[0, 0, 0]\" :rotate-x=\"-Math.PI / 2\">\n          \u003CTresPlaneGeometry :args=\"[20, 20, 20]\" />\n          \u003CTresMeshBasicMaterial color=\"#f4f4f4\" />\n        \u003C/TresMesh>\n      \u003C/Physics>\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[187,330,434],[119,860,861,881,899,924,932,936,944,954,982,990,998,1007,1035,1054,1062,1071,1080,1118,1136,1154,1162,1170,1178,1187],{"__ignoreMap":117},[122,862,863,865,867,869,871,873,875,877,879],{"class":124,"line":125},[122,864,129],{"class":128},[122,866,133],{"class":132},[122,868,137],{"class":136},[122,870,140],{"class":136},[122,872,143],{"class":128},[122,874,146],{"class":128},[122,876,150],{"class":149},[122,878,146],{"class":128},[122,880,155],{"class":128},[122,882,883,885,887,889,891,893,895,897],{"class":124,"line":158},[122,884,162],{"class":161},[122,886,165],{"class":128},[122,888,169],{"class":168},[122,890,172],{"class":128},[122,892,175],{"class":161},[122,894,178],{"class":128},[122,896,181],{"class":149},[122,898,184],{"class":128},[122,900,902,904,906,908,911,914,916,918,920,922],{"class":901,"line":187},[124,533],[122,903,162],{"class":161},[122,905,165],{"class":128},[122,907,540],{"class":168},[122,909,910],{"class":128},",",[122,912,913],{"class":168}," RigidBody",[122,915,172],{"class":128},[122,917,175],{"class":161},[122,919,178],{"class":128},[122,921,549],{"class":149},[122,923,184],{"class":128},[122,925,926,928,930],{"class":124,"line":197},[122,927,190],{"class":128},[122,929,133],{"class":132},[122,931,155],{"class":128},[122,933,934],{"class":124,"line":204},[122,935,201],{"emptyLinePlaceholder":200},[122,937,938,940,942],{"class":124,"line":214},[122,939,129],{"class":128},[122,941,209],{"class":132},[122,943,155],{"class":128},[122,945,946,948,950,952],{"class":124,"line":228},[122,947,217],{"class":128},[122,949,220],{"class":132},[122,951,223],{"class":136},[122,953,155],{"class":128},[122,955,956,958,960,962,964,966,968,970,972,974,976,978,980],{"class":124,"line":264},[122,957,231],{"class":128},[122,959,234],{"class":132},[122,961,237],{"class":136},[122,963,143],{"class":128},[122,965,146],{"class":128},[122,967,244],{"class":149},[122,969,146],{"class":128},[122,971,249],{"class":136},[122,973,143],{"class":128},[122,975,146],{"class":128},[122,977,256],{"class":149},[122,979,146],{"class":128},[122,981,261],{"class":128},[122,983,984,986,988],{"class":124,"line":297},[122,985,231],{"class":128},[122,987,481],{"class":132},[122,989,155],{"class":128},[122,991,992,994,996],{"class":124,"line":320},[122,993,300],{"class":128},[122,995,28],{"class":132},[122,997,155],{"class":128},[122,999,1001,1003,1005],{"class":1000,"line":330},[124,533],[122,1002,633],{"class":128},[122,1004,836],{"class":132},[122,1006,155],{"class":128},[122,1008,1009,1011,1013,1015,1017,1019,1021,1023,1025,1027,1029,1031,1033],{"class":124,"line":340},[122,1010,663],{"class":128},[122,1012,269],{"class":132},[122,1014,272],{"class":136},[122,1016,143],{"class":128},[122,1018,146],{"class":128},[122,1020,279],{"class":149},[122,1022,146],{"class":128},[122,1024,237],{"class":136},[122,1026,143],{"class":128},[122,1028,146],{"class":128},[122,1030,290],{"class":149},[122,1032,146],{"class":128},[122,1034,155],{"class":128},[122,1036,1037,1040,1042,1044,1046,1048,1050,1052],{"class":124,"line":382},[122,1038,1039],{"class":128},"            \u003C",[122,1041,303],{"class":132},[122,1043,306],{"class":136},[122,1045,143],{"class":128},[122,1047,146],{"class":128},[122,1049,313],{"class":149},[122,1051,146],{"class":128},[122,1053,261],{"class":128},[122,1055,1056,1058,1060],{"class":124,"line":403},[122,1057,1039],{"class":128},[122,1059,325],{"class":132},[122,1061,261],{"class":128},[122,1063,1064,1067,1069],{"class":124,"line":425},[122,1065,1066],{"class":128},"          \u003C/",[122,1068,269],{"class":132},[122,1070,155],{"class":128},[122,1072,1074,1076,1078],{"class":1073,"line":434},[124,533],[122,1075,693],{"class":128},[122,1077,836],{"class":132},[122,1079,155],{"class":128},[122,1081,1082,1084,1086,1088,1090,1092,1094,1096,1098,1100,1102,1104,1106,1108,1110,1112,1114,1116],{"class":124,"line":444},[122,1083,633],{"class":128},[122,1085,269],{"class":132},[122,1087,272],{"class":136},[122,1089,143],{"class":128},[122,1091,146],{"class":128},[122,1093,353],{"class":149},[122,1095,146],{"class":128},[122,1097,237],{"class":136},[122,1099,143],{"class":128},[122,1101,146],{"class":128},[122,1103,256],{"class":149},[122,1105,146],{"class":128},[122,1107,368],{"class":136},[122,1109,143],{"class":128},[122,1111,146],{"class":128},[122,1113,375],{"class":149},[122,1115,146],{"class":128},[122,1117,155],{"class":128},[122,1119,1120,1122,1124,1126,1128,1130,1132,1134],{"class":124,"line":487},[122,1121,663],{"class":128},[122,1123,387],{"class":132},[122,1125,306],{"class":136},[122,1127,143],{"class":128},[122,1129,146],{"class":128},[122,1131,396],{"class":149},[122,1133,146],{"class":128},[122,1135,261],{"class":128},[122,1137,1138,1140,1142,1144,1146,1148,1150,1152],{"class":124,"line":488},[122,1139,663],{"class":128},[122,1141,408],{"class":132},[122,1143,411],{"class":136},[122,1145,143],{"class":128},[122,1147,146],{"class":128},[122,1149,418],{"class":149},[122,1151,146],{"class":128},[122,1153,261],{"class":128},[122,1155,1156,1158,1160],{"class":124,"line":489},[122,1157,693],{"class":128},[122,1159,269],{"class":132},[122,1161,155],{"class":128},[122,1163,1164,1166,1168],{"class":124,"line":805},[122,1165,789],{"class":128},[122,1167,28],{"class":132},[122,1169,155],{"class":128},[122,1171,1172,1174,1176],{"class":124,"line":814},[122,1173,333],{"class":128},[122,1175,481],{"class":132},[122,1177,155],{"class":128},[122,1179,1181,1183,1185],{"class":124,"line":1180},23,[122,1182,437],{"class":128},[122,1184,220],{"class":132},[122,1186,155],{"class":128},[122,1188,1190,1192,1194],{"class":124,"line":1189},24,[122,1191,190],{"class":128},[122,1193,209],{"class":132},[122,1195,155],{"class":128},[84,1197,1198,1199,1202],{},"Let's repeat the same process with the floor, the process is the same except that now we use the type ",[119,1200,1201],{},"Fixed"," instead indicating the body cannot move.",[112,1204,1207],{"className":114,"code":1205,"highlights":1206,"language":116,"meta":117,"style":117},"\u003Ctemplate>\n  \u003CRigidBody type=\"fixed\">\n    \u003CTresMesh name=\"ball\" :position=\"[0, 0, 0]\" :rotate-x=\"-Math.PI / 2\">\n      \u003CTresPlaneGeometry :args=\"[20, 20, 20]\" />\n      \u003CTresMeshBasicMaterial color=\"#f4f4f4\" />\n    \u003C/TresMesh>\n  \u003C/RigidBody>\n\u003C/template>\n",[158,228],[119,1208,1209,1217,1238,1276,1294,1312,1320,1329],{"__ignoreMap":117},[122,1210,1211,1213,1215],{"class":124,"line":125},[122,1212,129],{"class":128},[122,1214,209],{"class":132},[122,1216,155],{"class":128},[122,1218,1220,1222,1224,1227,1229,1231,1234,1236],{"class":1219,"line":158},[124,533],[122,1221,217],{"class":128},[122,1223,836],{"class":132},[122,1225,1226],{"class":136}," type",[122,1228,143],{"class":128},[122,1230,146],{"class":128},[122,1232,1233],{"class":149},"fixed",[122,1235,146],{"class":128},[122,1237,155],{"class":128},[122,1239,1240,1242,1244,1246,1248,1250,1252,1254,1256,1258,1260,1262,1264,1266,1268,1270,1272,1274],{"class":124,"line":187},[122,1241,231],{"class":128},[122,1243,269],{"class":132},[122,1245,272],{"class":136},[122,1247,143],{"class":128},[122,1249,146],{"class":128},[122,1251,279],{"class":149},[122,1253,146],{"class":128},[122,1255,237],{"class":136},[122,1257,143],{"class":128},[122,1259,146],{"class":128},[122,1261,256],{"class":149},[122,1263,146],{"class":128},[122,1265,368],{"class":136},[122,1267,143],{"class":128},[122,1269,146],{"class":128},[122,1271,375],{"class":149},[122,1273,146],{"class":128},[122,1275,155],{"class":128},[122,1277,1278,1280,1282,1284,1286,1288,1290,1292],{"class":124,"line":197},[122,1279,300],{"class":128},[122,1281,387],{"class":132},[122,1283,306],{"class":136},[122,1285,143],{"class":128},[122,1287,146],{"class":128},[122,1289,396],{"class":149},[122,1291,146],{"class":128},[122,1293,261],{"class":128},[122,1295,1296,1298,1300,1302,1304,1306,1308,1310],{"class":124,"line":204},[122,1297,300],{"class":128},[122,1299,408],{"class":132},[122,1301,411],{"class":136},[122,1303,143],{"class":128},[122,1305,146],{"class":128},[122,1307,418],{"class":149},[122,1309,146],{"class":128},[122,1311,261],{"class":128},[122,1313,1314,1316,1318],{"class":124,"line":214},[122,1315,333],{"class":128},[122,1317,269],{"class":132},[122,1319,155],{"class":128},[122,1321,1323,1325,1327],{"class":1322,"line":228},[124,533],[122,1324,437],{"class":128},[122,1326,836],{"class":132},[122,1328,155],{"class":128},[122,1330,1331,1333,1335],{"class":124,"line":264},[122,1332,190],{"class":128},[122,1334,209],{"class":132},[122,1336,155],{"class":128},[84,1338,1339],{},"Now we need to make the bridge between the two worlds so that when our RigidBody instance gets updated, our sphere mesh will follow along.",[84,1341,1342,1343,1345],{},"Fortunately ",[119,1344,549],{}," abstracts most of the logic for you with a nice syntax, so you don't have to worry about making bounds or difficult configurations, even the colliders are set up for you automatically.",[112,1347,1349],{"className":114,"code":1348,"language":116,"meta":117,"style":117},"\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport { Physics, RigidBody } from '@tresjs/rapier'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas window-size>\n    \u003CTresPerspectiveCamera :position=\"[15, 15, 15]\" :look-at=\"[0, 0, 0]\" />\n    \u003CSuspense>\n      \u003CPhysics>\n        \u003CRigidBody>\n          \u003CTresMesh name=\"ball\" :position=\"[0, 8, 0]\">\n            \u003CTresSphereGeometry :args=\"[1, 16]\" />\n            \u003CTresMeshNormalMaterial />\n          \u003C/TresMesh>\n        \u003C/RigidBody>\n        \u003CRigidBody type=\"fixed\">\n          \u003CTresMesh name=\"floor\" :position=\"[0, 0, 0]\" :rotate-x=\"-Math.PI / 2\">\n            \u003CTresPlaneGeometry :args=\"[20, 20, 20]\" />\n            \u003CTresMeshBasicMaterial color=\"#f4f4f4\" />\n          \u003C/TresMesh>\n        \u003C/RigidBody>\n      \u003C/Physics>\n    \u003C/Suspense>\n  \u003C/TresCanvas>\n\u003C/template>\n",[119,1350,1351,1371,1389,1411,1419,1423,1431,1441,1469,1477,1485,1493,1521,1539,1547,1555,1563,1581,1619,1637,1655,1663,1671,1679,1687,1696],{"__ignoreMap":117},[122,1352,1353,1355,1357,1359,1361,1363,1365,1367,1369],{"class":124,"line":125},[122,1354,129],{"class":128},[122,1356,133],{"class":132},[122,1358,137],{"class":136},[122,1360,140],{"class":136},[122,1362,143],{"class":128},[122,1364,146],{"class":128},[122,1366,150],{"class":149},[122,1368,146],{"class":128},[122,1370,155],{"class":128},[122,1372,1373,1375,1377,1379,1381,1383,1385,1387],{"class":124,"line":158},[122,1374,162],{"class":161},[122,1376,165],{"class":128},[122,1378,169],{"class":168},[122,1380,172],{"class":128},[122,1382,175],{"class":161},[122,1384,178],{"class":128},[122,1386,181],{"class":149},[122,1388,184],{"class":128},[122,1390,1391,1393,1395,1397,1399,1401,1403,1405,1407,1409],{"class":124,"line":187},[122,1392,162],{"class":161},[122,1394,165],{"class":128},[122,1396,540],{"class":168},[122,1398,910],{"class":128},[122,1400,913],{"class":168},[122,1402,172],{"class":128},[122,1404,175],{"class":161},[122,1406,178],{"class":128},[122,1408,549],{"class":149},[122,1410,184],{"class":128},[122,1412,1413,1415,1417],{"class":124,"line":197},[122,1414,190],{"class":128},[122,1416,133],{"class":132},[122,1418,155],{"class":128},[122,1420,1421],{"class":124,"line":204},[122,1422,201],{"emptyLinePlaceholder":200},[122,1424,1425,1427,1429],{"class":124,"line":214},[122,1426,129],{"class":128},[122,1428,209],{"class":132},[122,1430,155],{"class":128},[122,1432,1433,1435,1437,1439],{"class":124,"line":228},[122,1434,217],{"class":128},[122,1436,220],{"class":132},[122,1438,223],{"class":136},[122,1440,155],{"class":128},[122,1442,1443,1445,1447,1449,1451,1453,1455,1457,1459,1461,1463,1465,1467],{"class":124,"line":264},[122,1444,231],{"class":128},[122,1446,234],{"class":132},[122,1448,237],{"class":136},[122,1450,143],{"class":128},[122,1452,146],{"class":128},[122,1454,244],{"class":149},[122,1456,146],{"class":128},[122,1458,249],{"class":136},[122,1460,143],{"class":128},[122,1462,146],{"class":128},[122,1464,256],{"class":149},[122,1466,146],{"class":128},[122,1468,261],{"class":128},[122,1470,1471,1473,1475],{"class":124,"line":297},[122,1472,231],{"class":128},[122,1474,481],{"class":132},[122,1476,155],{"class":128},[122,1478,1479,1481,1483],{"class":124,"line":320},[122,1480,300],{"class":128},[122,1482,28],{"class":132},[122,1484,155],{"class":128},[122,1486,1487,1489,1491],{"class":124,"line":330},[122,1488,633],{"class":128},[122,1490,836],{"class":132},[122,1492,155],{"class":128},[122,1494,1495,1497,1499,1501,1503,1505,1507,1509,1511,1513,1515,1517,1519],{"class":124,"line":340},[122,1496,663],{"class":128},[122,1498,269],{"class":132},[122,1500,272],{"class":136},[122,1502,143],{"class":128},[122,1504,146],{"class":128},[122,1506,279],{"class":149},[122,1508,146],{"class":128},[122,1510,237],{"class":136},[122,1512,143],{"class":128},[122,1514,146],{"class":128},[122,1516,290],{"class":149},[122,1518,146],{"class":128},[122,1520,155],{"class":128},[122,1522,1523,1525,1527,1529,1531,1533,1535,1537],{"class":124,"line":382},[122,1524,1039],{"class":128},[122,1526,303],{"class":132},[122,1528,306],{"class":136},[122,1530,143],{"class":128},[122,1532,146],{"class":128},[122,1534,313],{"class":149},[122,1536,146],{"class":128},[122,1538,261],{"class":128},[122,1540,1541,1543,1545],{"class":124,"line":403},[122,1542,1039],{"class":128},[122,1544,325],{"class":132},[122,1546,261],{"class":128},[122,1548,1549,1551,1553],{"class":124,"line":425},[122,1550,1066],{"class":128},[122,1552,269],{"class":132},[122,1554,155],{"class":128},[122,1556,1557,1559,1561],{"class":124,"line":434},[122,1558,693],{"class":128},[122,1560,836],{"class":132},[122,1562,155],{"class":128},[122,1564,1565,1567,1569,1571,1573,1575,1577,1579],{"class":124,"line":444},[122,1566,633],{"class":128},[122,1568,836],{"class":132},[122,1570,1226],{"class":136},[122,1572,143],{"class":128},[122,1574,146],{"class":128},[122,1576,1233],{"class":149},[122,1578,146],{"class":128},[122,1580,155],{"class":128},[122,1582,1583,1585,1587,1589,1591,1593,1595,1597,1599,1601,1603,1605,1607,1609,1611,1613,1615,1617],{"class":124,"line":487},[122,1584,663],{"class":128},[122,1586,269],{"class":132},[122,1588,272],{"class":136},[122,1590,143],{"class":128},[122,1592,146],{"class":128},[122,1594,353],{"class":149},[122,1596,146],{"class":128},[122,1598,237],{"class":136},[122,1600,143],{"class":128},[122,1602,146],{"class":128},[122,1604,256],{"class":149},[122,1606,146],{"class":128},[122,1608,368],{"class":136},[122,1610,143],{"class":128},[122,1612,146],{"class":128},[122,1614,375],{"class":149},[122,1616,146],{"class":128},[122,1618,155],{"class":128},[122,1620,1621,1623,1625,1627,1629,1631,1633,1635],{"class":124,"line":488},[122,1622,1039],{"class":128},[122,1624,387],{"class":132},[122,1626,306],{"class":136},[122,1628,143],{"class":128},[122,1630,146],{"class":128},[122,1632,396],{"class":149},[122,1634,146],{"class":128},[122,1636,261],{"class":128},[122,1638,1639,1641,1643,1645,1647,1649,1651,1653],{"class":124,"line":489},[122,1640,1039],{"class":128},[122,1642,408],{"class":132},[122,1644,411],{"class":136},[122,1646,143],{"class":128},[122,1648,146],{"class":128},[122,1650,418],{"class":149},[122,1652,146],{"class":128},[122,1654,261],{"class":128},[122,1656,1657,1659,1661],{"class":124,"line":805},[122,1658,1066],{"class":128},[122,1660,269],{"class":132},[122,1662,155],{"class":128},[122,1664,1665,1667,1669],{"class":124,"line":814},[122,1666,693],{"class":128},[122,1668,836],{"class":132},[122,1670,155],{"class":128},[122,1672,1673,1675,1677],{"class":124,"line":1180},[122,1674,789],{"class":128},[122,1676,28],{"class":132},[122,1678,155],{"class":128},[122,1680,1681,1683,1685],{"class":124,"line":1189},[122,1682,333],{"class":128},[122,1684,481],{"class":132},[122,1686,155],{"class":128},[122,1688,1690,1692,1694],{"class":124,"line":1689},25,[122,1691,437],{"class":128},[122,1693,220],{"class":132},[122,1695,155],{"class":128},[122,1697,1699,1701,1703],{"class":124,"line":1698},26,[122,1700,190],{"class":128},[122,1702,209],{"class":132},[122,1704,155],{"class":128},[84,1706,1707],{},"These physics are working, but the sphere is not behaving like a ball, it's not rolling through the floor, why is that?",[84,1709,1710,1711,1714,1715,1718],{},"You can inspect your physic scene using the ",[119,1712,1713],{},"debug"," prop in the ",[119,1716,1717],{},"\u003CPhysics>"," component you should see something like this:",[84,1720,1721],{},[1722,1723],"img",{"alt":1724,"src":1725},"Debug view showing the ball wrapped by a default cuboid collider","/cuboid.png",[84,1727,1728,1729],{},"You'll quickly realize that our ball is wrapped by a cube, not a sphere, so let's introduce the ",[476,1730,1731],{"href":38},[119,1732,842],{},[84,1734,1735,1738],{},[476,1736,842],{"href":1737},"/api/rigid-body/automatic-colliders#available-automatic-colliders"," are physical objects with shape, properties, and methods, they are a child of the RigidBody component and a RigidBody can have one or many colliders. But we haven't created any, why did that collider appear there?",[84,1740,1741,1742,1744,1745,1747],{},"Well ",[119,1743,549],{}," will create an automatic collider for you, for each Mesh that you add! This normally is enough, but in cases like this, we need to tell our collider to have a sphere or ",[119,1746,279],{}," shape.",[112,1749,1751],{"className":114,"code":1750,"language":116,"meta":117,"style":117},"\u003Ctemplate>\n  \u003CRigidBody collider=\"ball\">\n    \u003CTresMesh :position=\"[0, 8, 0]\">\n      \u003CTresSphereGeometry :args=\"[1, 16]\" />\n      \u003CTresMeshNormalMaterial />\n    \u003C/TresMesh>\n  \u003C/RigidBody>\n\u003C/template>\n",[119,1752,1753,1761,1780,1798,1816,1824,1832,1840],{"__ignoreMap":117},[122,1754,1755,1757,1759],{"class":124,"line":125},[122,1756,129],{"class":128},[122,1758,209],{"class":132},[122,1760,155],{"class":128},[122,1762,1763,1765,1767,1770,1772,1774,1776,1778],{"class":124,"line":158},[122,1764,217],{"class":128},[122,1766,836],{"class":132},[122,1768,1769],{"class":136}," collider",[122,1771,143],{"class":128},[122,1773,146],{"class":128},[122,1775,279],{"class":149},[122,1777,146],{"class":128},[122,1779,155],{"class":128},[122,1781,1782,1784,1786,1788,1790,1792,1794,1796],{"class":124,"line":187},[122,1783,231],{"class":128},[122,1785,269],{"class":132},[122,1787,237],{"class":136},[122,1789,143],{"class":128},[122,1791,146],{"class":128},[122,1793,290],{"class":149},[122,1795,146],{"class":128},[122,1797,155],{"class":128},[122,1799,1800,1802,1804,1806,1808,1810,1812,1814],{"class":124,"line":197},[122,1801,300],{"class":128},[122,1803,303],{"class":132},[122,1805,306],{"class":136},[122,1807,143],{"class":128},[122,1809,146],{"class":128},[122,1811,313],{"class":149},[122,1813,146],{"class":128},[122,1815,261],{"class":128},[122,1817,1818,1820,1822],{"class":124,"line":204},[122,1819,300],{"class":128},[122,1821,325],{"class":132},[122,1823,261],{"class":128},[122,1825,1826,1828,1830],{"class":124,"line":214},[122,1827,333],{"class":128},[122,1829,269],{"class":132},[122,1831,155],{"class":128},[122,1833,1834,1836,1838],{"class":124,"line":228},[122,1835,437],{"class":128},[122,1837,836],{"class":132},[122,1839,155],{"class":128},[122,1841,1842,1844,1846],{"class":124,"line":264},[122,1843,190],{"class":128},[122,1845,209],{"class":132},[122,1847,155],{"class":128},[84,1849,1850],{},"Now our sphere finally acts like one 🏀!",[84,1852,1853,1854,1857,1858,1865],{},"Bonus: we can add a little of ",[119,1855,1856],{},"0.5"," will be fine ",[476,1859,1862],{"href":1860,"rel":1861},"https://rapier.rs/docs/user_guides/javascript/colliders#restitution",[480],[119,1863,1864],{},"restitution"," (which will make the rigidBody bounce)",[1867,1868,1869],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":117,"searchDepth":125,"depth":158,"links":1871},[],"Explanation of how the physic and 3D world merge.","md",null,{},{"title":19,"description":1872},"EQBTkQMMKpN2ARwQjdN2nfhuQedoJFmST3q40-i8fO0",[1879,1881],{"title":15,"path":16,"stem":17,"description":1880,"children":-1},"Learn how to enable Physics in your TresJS scenes.",{"title":28,"path":24,"stem":29,"description":1882,"children":-1},"The main component for render.",1789116600793]