[{"data":1,"prerenderedAt":2324},["ShallowReactive",2],{"navigation":3,"/getting-started/how-it-works":72,"/getting-started/how-it-works-surround":2319},[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":2313,"extension":2314,"links":2315,"meta":2316,"navigation":200,"path":20,"seo":2317,"stem":21,"__hash__":2318},"docs/1.getting-started/how-it-works.md",{"type":75,"value":76,"toc":2311},"minimark",[77,83,87,97,100,2307],[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,554,558,569,586,1016,1020,1039,1050,1482,1489,1663,1666,1672,2123,2126,2137,2143,2150,2156,2165,2289,2292],"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,295,342,376,386,396,469,504,526,535,545],"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,241,243,245,248,252,255,257,259,261,264,266,268,271,273,275,277,280,282,284,286,288,290,292],{"class":124,"line":228},7,[122,230,231],{"class":128},"    \u003C",[122,233,234],{"class":132},"TresPerspectiveCamera",[122,236,237],{"class":128}," :",[122,239,240],{"class":136},"position",[122,242,143],{"class":128},[122,244,146],{"class":128},[122,246,247],{"class":128},"[",[122,249,251],{"class":250},"sbssI","15",[122,253,254],{"class":128},", ",[122,256,251],{"class":250},[122,258,254],{"class":128},[122,260,251],{"class":250},[122,262,263],{"class":128},"]",[122,265,146],{"class":128},[122,267,237],{"class":128},[122,269,270],{"class":136},"look-at",[122,272,143],{"class":128},[122,274,146],{"class":128},[122,276,247],{"class":128},[122,278,279],{"class":250},"0",[122,281,254],{"class":128},[122,283,279],{"class":250},[122,285,254],{"class":128},[122,287,279],{"class":250},[122,289,263],{"class":128},[122,291,146],{"class":128},[122,293,294],{"class":128}," />\n",[122,296,298,300,303,306,308,310,313,315,317,319,321,323,325,327,329,332,334,336,338,340],{"class":124,"line":297},8,[122,299,231],{"class":128},[122,301,302],{"class":132},"TresMesh",[122,304,305],{"class":136}," name",[122,307,143],{"class":128},[122,309,146],{"class":128},[122,311,312],{"class":149},"ball",[122,314,146],{"class":128},[122,316,237],{"class":128},[122,318,240],{"class":136},[122,320,143],{"class":128},[122,322,146],{"class":128},[122,324,247],{"class":128},[122,326,279],{"class":250},[122,328,254],{"class":128},[122,330,331],{"class":250},"8",[122,333,254],{"class":128},[122,335,279],{"class":250},[122,337,263],{"class":128},[122,339,146],{"class":128},[122,341,155],{"class":128},[122,343,345,348,351,353,356,358,360,362,365,367,370,372,374],{"class":124,"line":344},9,[122,346,347],{"class":128},"      \u003C",[122,349,350],{"class":132},"TresSphereGeometry",[122,352,237],{"class":128},[122,354,355],{"class":136},"args",[122,357,143],{"class":128},[122,359,146],{"class":128},[122,361,247],{"class":128},[122,363,364],{"class":250},"1",[122,366,254],{"class":128},[122,368,369],{"class":250},"16",[122,371,263],{"class":128},[122,373,146],{"class":128},[122,375,294],{"class":128},[122,377,379,381,384],{"class":124,"line":378},10,[122,380,347],{"class":128},[122,382,383],{"class":132},"TresMeshNormalMaterial",[122,385,294],{"class":128},[122,387,389,392,394],{"class":124,"line":388},11,[122,390,391],{"class":128},"    \u003C/",[122,393,302],{"class":132},[122,395,155],{"class":128},[122,397,399,401,403,405,407,409,412,414,416,418,420,422,424,426,428,430,432,434,436,438,440,443,445,447,450,453,456,459,462,465,467],{"class":124,"line":398},12,[122,400,231],{"class":128},[122,402,302],{"class":132},[122,404,305],{"class":136},[122,406,143],{"class":128},[122,408,146],{"class":128},[122,410,411],{"class":149},"floor",[122,413,146],{"class":128},[122,415,237],{"class":128},[122,417,240],{"class":136},[122,419,143],{"class":128},[122,421,146],{"class":128},[122,423,247],{"class":128},[122,425,279],{"class":250},[122,427,254],{"class":128},[122,429,279],{"class":250},[122,431,254],{"class":128},[122,433,279],{"class":250},[122,435,263],{"class":128},[122,437,146],{"class":128},[122,439,237],{"class":128},[122,441,442],{"class":136},"rotate-x",[122,444,143],{"class":128},[122,446,146],{"class":128},[122,448,449],{"class":128},"-",[122,451,452],{"class":168},"Math",[122,454,455],{"class":128},".",[122,457,458],{"class":168},"PI",[122,460,461],{"class":128}," / ",[122,463,464],{"class":250},"2",[122,466,146],{"class":128},[122,468,155],{"class":128},[122,470,472,474,477,479,481,483,485,487,490,492,494,496,498,500,502],{"class":124,"line":471},13,[122,473,347],{"class":128},[122,475,476],{"class":132},"TresPlaneGeometry",[122,478,237],{"class":128},[122,480,355],{"class":136},[122,482,143],{"class":128},[122,484,146],{"class":128},[122,486,247],{"class":128},[122,488,489],{"class":250},"20",[122,491,254],{"class":128},[122,493,489],{"class":250},[122,495,254],{"class":128},[122,497,489],{"class":250},[122,499,263],{"class":128},[122,501,146],{"class":128},[122,503,294],{"class":128},[122,505,507,509,512,515,517,519,522,524],{"class":124,"line":506},14,[122,508,347],{"class":128},[122,510,511],{"class":132},"TresMeshBasicMaterial",[122,513,514],{"class":136}," color",[122,516,143],{"class":128},[122,518,146],{"class":128},[122,520,521],{"class":149},"#f4f4f4",[122,523,146],{"class":128},[122,525,294],{"class":128},[122,527,529,531,533],{"class":124,"line":528},15,[122,530,391],{"class":128},[122,532,302],{"class":132},[122,534,155],{"class":128},[122,536,538,541,543],{"class":124,"line":537},16,[122,539,540],{"class":128},"  \u003C/",[122,542,220],{"class":132},[122,544,155],{"class":128},[122,546,548,550,552],{"class":124,"line":547},17,[122,549,190],{"class":128},[122,551,209],{"class":132},[122,553,155],{"class":128},[104,555,557],{"id":556},"second-step","Second step",[84,559,560,561,564,565,568],{},"Then we enable ",[119,562,563],{},"Rapier"," by adding the ",[119,566,567],{},"\u003CPhysics >"," component surrounding all the elements we want to be affected by physics, in this case, the ball and the floor.",[570,571,572],"prose-warning",{},[84,573,574,575,577,578,585],{},"The ",[119,576,28],{}," component needs to be wrapped by a ",[579,580,584],"a",{"href":581,"rel":582},"https://vuejs.org/guide/built-ins/suspense.html#suspense",[583],"nofollow","Suspense"," component",[112,587,593],{"className":114,"code":588,"highlights":589,"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,344,378,388,398,471,506,528,537,547,590,591,592],18,19,20,[119,594,595,615,633,655,663,667,675,685,741,750,759,803,834,843,853,918,951,970,979,989,998,1007],{"__ignoreMap":117},[122,596,597,599,601,603,605,607,609,611,613],{"class":124,"line":125},[122,598,129],{"class":128},[122,600,133],{"class":132},[122,602,137],{"class":136},[122,604,140],{"class":136},[122,606,143],{"class":128},[122,608,146],{"class":128},[122,610,150],{"class":149},[122,612,146],{"class":128},[122,614,155],{"class":128},[122,616,617,619,621,623,625,627,629,631],{"class":124,"line":158},[122,618,162],{"class":161},[122,620,165],{"class":128},[122,622,169],{"class":168},[122,624,172],{"class":128},[122,626,175],{"class":161},[122,628,178],{"class":128},[122,630,181],{"class":149},[122,632,184],{"class":128},[122,634,637,639,641,644,646,648,650,653],{"class":635,"line":187},[124,636],"highlight",[122,638,162],{"class":161},[122,640,165],{"class":128},[122,642,643],{"class":168}," Physics",[122,645,172],{"class":128},[122,647,175],{"class":161},[122,649,178],{"class":128},[122,651,652],{"class":149},"@tresjs/rapier",[122,654,184],{"class":128},[122,656,657,659,661],{"class":124,"line":197},[122,658,190],{"class":128},[122,660,133],{"class":132},[122,662,155],{"class":128},[122,664,665],{"class":124,"line":204},[122,666,201],{"emptyLinePlaceholder":200},[122,668,669,671,673],{"class":124,"line":214},[122,670,129],{"class":128},[122,672,209],{"class":132},[122,674,155],{"class":128},[122,676,677,679,681,683],{"class":124,"line":228},[122,678,217],{"class":128},[122,680,220],{"class":132},[122,682,223],{"class":136},[122,684,155],{"class":128},[122,686,687,689,691,693,695,697,699,701,703,705,707,709,711,713,715,717,719,721,723,725,727,729,731,733,735,737,739],{"class":124,"line":297},[122,688,231],{"class":128},[122,690,234],{"class":132},[122,692,237],{"class":128},[122,694,240],{"class":136},[122,696,143],{"class":128},[122,698,146],{"class":128},[122,700,247],{"class":128},[122,702,251],{"class":250},[122,704,254],{"class":128},[122,706,251],{"class":250},[122,708,254],{"class":128},[122,710,251],{"class":250},[122,712,263],{"class":128},[122,714,146],{"class":128},[122,716,237],{"class":128},[122,718,270],{"class":136},[122,720,143],{"class":128},[122,722,146],{"class":128},[122,724,247],{"class":128},[122,726,279],{"class":250},[122,728,254],{"class":128},[122,730,279],{"class":250},[122,732,254],{"class":128},[122,734,279],{"class":250},[122,736,263],{"class":128},[122,738,146],{"class":128},[122,740,294],{"class":128},[122,742,744,746,748],{"class":743,"line":344},[124,636],[122,745,231],{"class":128},[122,747,584],{"class":132},[122,749,155],{"class":128},[122,751,753,755,757],{"class":752,"line":378},[124,636],[122,754,347],{"class":128},[122,756,28],{"class":132},[122,758,155],{"class":128},[122,760,762,765,767,769,771,773,775,777,779,781,783,785,787,789,791,793,795,797,799,801],{"class":761,"line":388},[124,636],[122,763,764],{"class":128},"        \u003C",[122,766,302],{"class":132},[122,768,305],{"class":136},[122,770,143],{"class":128},[122,772,146],{"class":128},[122,774,312],{"class":149},[122,776,146],{"class":128},[122,778,237],{"class":128},[122,780,240],{"class":136},[122,782,143],{"class":128},[122,784,146],{"class":128},[122,786,247],{"class":128},[122,788,279],{"class":250},[122,790,254],{"class":128},[122,792,331],{"class":250},[122,794,254],{"class":128},[122,796,279],{"class":250},[122,798,263],{"class":128},[122,800,146],{"class":128},[122,802,155],{"class":128},[122,804,806,809,811,813,815,817,819,821,823,826,828,830,832],{"class":805,"line":398},[124,636],[122,807,808],{"class":128},"          \u003C",[122,810,350],{"class":132},[122,812,237],{"class":128},[122,814,355],{"class":136},[122,816,143],{"class":128},[122,818,146],{"class":128},[122,820,247],{"class":128},[122,822,364],{"class":250},[122,824,825],{"class":128},",",[122,827,369],{"class":250},[122,829,263],{"class":128},[122,831,146],{"class":128},[122,833,294],{"class":128},[122,835,837,839,841],{"class":836,"line":471},[124,636],[122,838,808],{"class":128},[122,840,383],{"class":132},[122,842,294],{"class":128},[122,844,846,849,851],{"class":845,"line":506},[124,636],[122,847,848],{"class":128},"        \u003C/",[122,850,302],{"class":132},[122,852,155],{"class":128},[122,854,856,858,860,862,864,866,868,870,872,874,876,878,880,882,884,886,888,890,892,894,896,898,900,902,904,906,908,910,912,914,916],{"class":855,"line":528},[124,636],[122,857,764],{"class":128},[122,859,302],{"class":132},[122,861,305],{"class":136},[122,863,143],{"class":128},[122,865,146],{"class":128},[122,867,411],{"class":149},[122,869,146],{"class":128},[122,871,237],{"class":128},[122,873,240],{"class":136},[122,875,143],{"class":128},[122,877,146],{"class":128},[122,879,247],{"class":128},[122,881,279],{"class":250},[122,883,254],{"class":128},[122,885,279],{"class":250},[122,887,254],{"class":128},[122,889,279],{"class":250},[122,891,263],{"class":128},[122,893,146],{"class":128},[122,895,237],{"class":128},[122,897,442],{"class":136},[122,899,143],{"class":128},[122,901,146],{"class":128},[122,903,449],{"class":128},[122,905,452],{"class":168},[122,907,455],{"class":128},[122,909,458],{"class":168},[122,911,461],{"class":128},[122,913,464],{"class":250},[122,915,146],{"class":128},[122,917,155],{"class":128},[122,919,921,923,925,927,929,931,933,935,937,939,941,943,945,947,949],{"class":920,"line":537},[124,636],[122,922,808],{"class":128},[122,924,476],{"class":132},[122,926,237],{"class":128},[122,928,355],{"class":136},[122,930,143],{"class":128},[122,932,146],{"class":128},[122,934,247],{"class":128},[122,936,489],{"class":250},[122,938,254],{"class":128},[122,940,489],{"class":250},[122,942,254],{"class":128},[122,944,489],{"class":250},[122,946,263],{"class":128},[122,948,146],{"class":128},[122,950,294],{"class":128},[122,952,954,956,958,960,962,964,966,968],{"class":953,"line":547},[124,636],[122,955,808],{"class":128},[122,957,511],{"class":132},[122,959,514],{"class":136},[122,961,143],{"class":128},[122,963,146],{"class":128},[122,965,521],{"class":149},[122,967,146],{"class":128},[122,969,294],{"class":128},[122,971,973,975,977],{"class":972,"line":590},[124,636],[122,974,848],{"class":128},[122,976,302],{"class":132},[122,978,155],{"class":128},[122,980,982,985,987],{"class":981,"line":591},[124,636],[122,983,984],{"class":128},"      \u003C/",[122,986,28],{"class":132},[122,988,155],{"class":128},[122,990,992,994,996],{"class":991,"line":592},[124,636],[122,993,391],{"class":128},[122,995,584],{"class":132},[122,997,155],{"class":128},[122,999,1001,1003,1005],{"class":124,"line":1000},21,[122,1002,540],{"class":128},[122,1004,220],{"class":132},[122,1006,155],{"class":128},[122,1008,1010,1012,1014],{"class":124,"line":1009},22,[122,1011,190],{"class":128},[122,1013,209],{"class":132},[122,1015,155],{"class":128},[104,1017,1019],{"id":1018},"third-step","Third step",[84,1021,1022,1023,1026,1027,1032,1033,1038],{},"To add forces (such as gravity) to our sphere, we need to wrap it with a ",[119,1024,1025],{},"\u003CRigidBody />"," component , which will generate a ",[579,1028,1031],{"href":1029,"rel":1030},"https://rapier.rs/docs/user_guides/javascript/rigid_bodies#creation-and-insertion",[583],"RigidBody"," instance containing one or many ",[579,1034,1037],{"href":1035,"rel":1036},"https://rapier.rs/docs/user_guides/javascript/colliders",[583],"Colliders",". These are responsible for all the physical calculations.",[84,1040,1041,1042,1045,1046],{},"By default, the RigidBody type is ",[119,1043,1044],{},"Dynamic",", which fits perfectly what we need for our ball. See all available types ",[579,1047,1049],{"href":1048},"/components/rigid-body.html#types","here",[112,1051,1054],{"className":114,"code":1052,"highlights":1053,"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,388,537],[119,1055,1056,1076,1094,1118,1126,1130,1138,1148,1204,1212,1220,1229,1271,1300,1308,1317,1326,1390,1422,1440,1448,1456,1464,1473],{"__ignoreMap":117},[122,1057,1058,1060,1062,1064,1066,1068,1070,1072,1074],{"class":124,"line":125},[122,1059,129],{"class":128},[122,1061,133],{"class":132},[122,1063,137],{"class":136},[122,1065,140],{"class":136},[122,1067,143],{"class":128},[122,1069,146],{"class":128},[122,1071,150],{"class":149},[122,1073,146],{"class":128},[122,1075,155],{"class":128},[122,1077,1078,1080,1082,1084,1086,1088,1090,1092],{"class":124,"line":158},[122,1079,162],{"class":161},[122,1081,165],{"class":128},[122,1083,169],{"class":168},[122,1085,172],{"class":128},[122,1087,175],{"class":161},[122,1089,178],{"class":128},[122,1091,181],{"class":149},[122,1093,184],{"class":128},[122,1095,1097,1099,1101,1103,1105,1108,1110,1112,1114,1116],{"class":1096,"line":187},[124,636],[122,1098,162],{"class":161},[122,1100,165],{"class":128},[122,1102,643],{"class":168},[122,1104,825],{"class":128},[122,1106,1107],{"class":168}," RigidBody",[122,1109,172],{"class":128},[122,1111,175],{"class":161},[122,1113,178],{"class":128},[122,1115,652],{"class":149},[122,1117,184],{"class":128},[122,1119,1120,1122,1124],{"class":124,"line":197},[122,1121,190],{"class":128},[122,1123,133],{"class":132},[122,1125,155],{"class":128},[122,1127,1128],{"class":124,"line":204},[122,1129,201],{"emptyLinePlaceholder":200},[122,1131,1132,1134,1136],{"class":124,"line":214},[122,1133,129],{"class":128},[122,1135,209],{"class":132},[122,1137,155],{"class":128},[122,1139,1140,1142,1144,1146],{"class":124,"line":228},[122,1141,217],{"class":128},[122,1143,220],{"class":132},[122,1145,223],{"class":136},[122,1147,155],{"class":128},[122,1149,1150,1152,1154,1156,1158,1160,1162,1164,1166,1168,1170,1172,1174,1176,1178,1180,1182,1184,1186,1188,1190,1192,1194,1196,1198,1200,1202],{"class":124,"line":297},[122,1151,231],{"class":128},[122,1153,234],{"class":132},[122,1155,237],{"class":128},[122,1157,240],{"class":136},[122,1159,143],{"class":128},[122,1161,146],{"class":128},[122,1163,247],{"class":128},[122,1165,251],{"class":250},[122,1167,254],{"class":128},[122,1169,251],{"class":250},[122,1171,254],{"class":128},[122,1173,251],{"class":250},[122,1175,263],{"class":128},[122,1177,146],{"class":128},[122,1179,237],{"class":128},[122,1181,270],{"class":136},[122,1183,143],{"class":128},[122,1185,146],{"class":128},[122,1187,247],{"class":128},[122,1189,279],{"class":250},[122,1191,254],{"class":128},[122,1193,279],{"class":250},[122,1195,254],{"class":128},[122,1197,279],{"class":250},[122,1199,263],{"class":128},[122,1201,146],{"class":128},[122,1203,294],{"class":128},[122,1205,1206,1208,1210],{"class":124,"line":344},[122,1207,231],{"class":128},[122,1209,584],{"class":132},[122,1211,155],{"class":128},[122,1213,1214,1216,1218],{"class":124,"line":378},[122,1215,347],{"class":128},[122,1217,28],{"class":132},[122,1219,155],{"class":128},[122,1221,1223,1225,1227],{"class":1222,"line":388},[124,636],[122,1224,764],{"class":128},[122,1226,1031],{"class":132},[122,1228,155],{"class":128},[122,1230,1231,1233,1235,1237,1239,1241,1243,1245,1247,1249,1251,1253,1255,1257,1259,1261,1263,1265,1267,1269],{"class":124,"line":398},[122,1232,808],{"class":128},[122,1234,302],{"class":132},[122,1236,305],{"class":136},[122,1238,143],{"class":128},[122,1240,146],{"class":128},[122,1242,312],{"class":149},[122,1244,146],{"class":128},[122,1246,237],{"class":128},[122,1248,240],{"class":136},[122,1250,143],{"class":128},[122,1252,146],{"class":128},[122,1254,247],{"class":128},[122,1256,279],{"class":250},[122,1258,254],{"class":128},[122,1260,331],{"class":250},[122,1262,254],{"class":128},[122,1264,279],{"class":250},[122,1266,263],{"class":128},[122,1268,146],{"class":128},[122,1270,155],{"class":128},[122,1272,1273,1276,1278,1280,1282,1284,1286,1288,1290,1292,1294,1296,1298],{"class":124,"line":471},[122,1274,1275],{"class":128},"            \u003C",[122,1277,350],{"class":132},[122,1279,237],{"class":128},[122,1281,355],{"class":136},[122,1283,143],{"class":128},[122,1285,146],{"class":128},[122,1287,247],{"class":128},[122,1289,364],{"class":250},[122,1291,254],{"class":128},[122,1293,369],{"class":250},[122,1295,263],{"class":128},[122,1297,146],{"class":128},[122,1299,294],{"class":128},[122,1301,1302,1304,1306],{"class":124,"line":506},[122,1303,1275],{"class":128},[122,1305,383],{"class":132},[122,1307,294],{"class":128},[122,1309,1310,1313,1315],{"class":124,"line":528},[122,1311,1312],{"class":128},"          \u003C/",[122,1314,302],{"class":132},[122,1316,155],{"class":128},[122,1318,1320,1322,1324],{"class":1319,"line":537},[124,636],[122,1321,848],{"class":128},[122,1323,1031],{"class":132},[122,1325,155],{"class":128},[122,1327,1328,1330,1332,1334,1336,1338,1340,1342,1344,1346,1348,1350,1352,1354,1356,1358,1360,1362,1364,1366,1368,1370,1372,1374,1376,1378,1380,1382,1384,1386,1388],{"class":124,"line":547},[122,1329,764],{"class":128},[122,1331,302],{"class":132},[122,1333,305],{"class":136},[122,1335,143],{"class":128},[122,1337,146],{"class":128},[122,1339,411],{"class":149},[122,1341,146],{"class":128},[122,1343,237],{"class":128},[122,1345,240],{"class":136},[122,1347,143],{"class":128},[122,1349,146],{"class":128},[122,1351,247],{"class":128},[122,1353,279],{"class":250},[122,1355,254],{"class":128},[122,1357,279],{"class":250},[122,1359,254],{"class":128},[122,1361,279],{"class":250},[122,1363,263],{"class":128},[122,1365,146],{"class":128},[122,1367,237],{"class":128},[122,1369,442],{"class":136},[122,1371,143],{"class":128},[122,1373,146],{"class":128},[122,1375,449],{"class":128},[122,1377,452],{"class":168},[122,1379,455],{"class":128},[122,1381,458],{"class":168},[122,1383,461],{"class":128},[122,1385,464],{"class":250},[122,1387,146],{"class":128},[122,1389,155],{"class":128},[122,1391,1392,1394,1396,1398,1400,1402,1404,1406,1408,1410,1412,1414,1416,1418,1420],{"class":124,"line":590},[122,1393,808],{"class":128},[122,1395,476],{"class":132},[122,1397,237],{"class":128},[122,1399,355],{"class":136},[122,1401,143],{"class":128},[122,1403,146],{"class":128},[122,1405,247],{"class":128},[122,1407,489],{"class":250},[122,1409,254],{"class":128},[122,1411,489],{"class":250},[122,1413,254],{"class":128},[122,1415,489],{"class":250},[122,1417,263],{"class":128},[122,1419,146],{"class":128},[122,1421,294],{"class":128},[122,1423,1424,1426,1428,1430,1432,1434,1436,1438],{"class":124,"line":591},[122,1425,808],{"class":128},[122,1427,511],{"class":132},[122,1429,514],{"class":136},[122,1431,143],{"class":128},[122,1433,146],{"class":128},[122,1435,521],{"class":149},[122,1437,146],{"class":128},[122,1439,294],{"class":128},[122,1441,1442,1444,1446],{"class":124,"line":592},[122,1443,848],{"class":128},[122,1445,302],{"class":132},[122,1447,155],{"class":128},[122,1449,1450,1452,1454],{"class":124,"line":1000},[122,1451,984],{"class":128},[122,1453,28],{"class":132},[122,1455,155],{"class":128},[122,1457,1458,1460,1462],{"class":124,"line":1009},[122,1459,391],{"class":128},[122,1461,584],{"class":132},[122,1463,155],{"class":128},[122,1465,1467,1469,1471],{"class":124,"line":1466},23,[122,1468,540],{"class":128},[122,1470,220],{"class":132},[122,1472,155],{"class":128},[122,1474,1476,1478,1480],{"class":124,"line":1475},24,[122,1477,190],{"class":128},[122,1479,209],{"class":132},[122,1481,155],{"class":128},[84,1483,1484,1485,1488],{},"Let's repeat the same process with the floor, the process is the same except that now we use the type ",[119,1486,1487],{},"Fixed"," instead indicating the body cannot move.",[112,1490,1493],{"className":114,"code":1491,"highlights":1492,"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,1494,1495,1503,1524,1588,1620,1638,1646,1655],{"__ignoreMap":117},[122,1496,1497,1499,1501],{"class":124,"line":125},[122,1498,129],{"class":128},[122,1500,209],{"class":132},[122,1502,155],{"class":128},[122,1504,1506,1508,1510,1513,1515,1517,1520,1522],{"class":1505,"line":158},[124,636],[122,1507,217],{"class":128},[122,1509,1031],{"class":132},[122,1511,1512],{"class":136}," type",[122,1514,143],{"class":128},[122,1516,146],{"class":128},[122,1518,1519],{"class":149},"fixed",[122,1521,146],{"class":128},[122,1523,155],{"class":128},[122,1525,1526,1528,1530,1532,1534,1536,1538,1540,1542,1544,1546,1548,1550,1552,1554,1556,1558,1560,1562,1564,1566,1568,1570,1572,1574,1576,1578,1580,1582,1584,1586],{"class":124,"line":187},[122,1527,231],{"class":128},[122,1529,302],{"class":132},[122,1531,305],{"class":136},[122,1533,143],{"class":128},[122,1535,146],{"class":128},[122,1537,312],{"class":149},[122,1539,146],{"class":128},[122,1541,237],{"class":128},[122,1543,240],{"class":136},[122,1545,143],{"class":128},[122,1547,146],{"class":128},[122,1549,247],{"class":128},[122,1551,279],{"class":250},[122,1553,254],{"class":128},[122,1555,279],{"class":250},[122,1557,254],{"class":128},[122,1559,279],{"class":250},[122,1561,263],{"class":128},[122,1563,146],{"class":128},[122,1565,237],{"class":128},[122,1567,442],{"class":136},[122,1569,143],{"class":128},[122,1571,146],{"class":128},[122,1573,449],{"class":128},[122,1575,452],{"class":168},[122,1577,455],{"class":128},[122,1579,458],{"class":168},[122,1581,461],{"class":128},[122,1583,464],{"class":250},[122,1585,146],{"class":128},[122,1587,155],{"class":128},[122,1589,1590,1592,1594,1596,1598,1600,1602,1604,1606,1608,1610,1612,1614,1616,1618],{"class":124,"line":197},[122,1591,347],{"class":128},[122,1593,476],{"class":132},[122,1595,237],{"class":128},[122,1597,355],{"class":136},[122,1599,143],{"class":128},[122,1601,146],{"class":128},[122,1603,247],{"class":128},[122,1605,489],{"class":250},[122,1607,254],{"class":128},[122,1609,489],{"class":250},[122,1611,254],{"class":128},[122,1613,489],{"class":250},[122,1615,263],{"class":128},[122,1617,146],{"class":128},[122,1619,294],{"class":128},[122,1621,1622,1624,1626,1628,1630,1632,1634,1636],{"class":124,"line":204},[122,1623,347],{"class":128},[122,1625,511],{"class":132},[122,1627,514],{"class":136},[122,1629,143],{"class":128},[122,1631,146],{"class":128},[122,1633,521],{"class":149},[122,1635,146],{"class":128},[122,1637,294],{"class":128},[122,1639,1640,1642,1644],{"class":124,"line":214},[122,1641,391],{"class":128},[122,1643,302],{"class":132},[122,1645,155],{"class":128},[122,1647,1649,1651,1653],{"class":1648,"line":228},[124,636],[122,1650,540],{"class":128},[122,1652,1031],{"class":132},[122,1654,155],{"class":128},[122,1656,1657,1659,1661],{"class":124,"line":297},[122,1658,190],{"class":128},[122,1660,209],{"class":132},[122,1662,155],{"class":128},[84,1664,1665],{},"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,1667,1668,1669,1671],{},"Fortunately ",[119,1670,652],{}," 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,1673,1675],{"className":114,"code":1674,"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,1676,1677,1697,1715,1737,1745,1749,1757,1767,1823,1831,1839,1847,1889,1917,1925,1933,1941,1959,2023,2055,2073,2081,2089,2097,2105,2114],{"__ignoreMap":117},[122,1678,1679,1681,1683,1685,1687,1689,1691,1693,1695],{"class":124,"line":125},[122,1680,129],{"class":128},[122,1682,133],{"class":132},[122,1684,137],{"class":136},[122,1686,140],{"class":136},[122,1688,143],{"class":128},[122,1690,146],{"class":128},[122,1692,150],{"class":149},[122,1694,146],{"class":128},[122,1696,155],{"class":128},[122,1698,1699,1701,1703,1705,1707,1709,1711,1713],{"class":124,"line":158},[122,1700,162],{"class":161},[122,1702,165],{"class":128},[122,1704,169],{"class":168},[122,1706,172],{"class":128},[122,1708,175],{"class":161},[122,1710,178],{"class":128},[122,1712,181],{"class":149},[122,1714,184],{"class":128},[122,1716,1717,1719,1721,1723,1725,1727,1729,1731,1733,1735],{"class":124,"line":187},[122,1718,162],{"class":161},[122,1720,165],{"class":128},[122,1722,643],{"class":168},[122,1724,825],{"class":128},[122,1726,1107],{"class":168},[122,1728,172],{"class":128},[122,1730,175],{"class":161},[122,1732,178],{"class":128},[122,1734,652],{"class":149},[122,1736,184],{"class":128},[122,1738,1739,1741,1743],{"class":124,"line":197},[122,1740,190],{"class":128},[122,1742,133],{"class":132},[122,1744,155],{"class":128},[122,1746,1747],{"class":124,"line":204},[122,1748,201],{"emptyLinePlaceholder":200},[122,1750,1751,1753,1755],{"class":124,"line":214},[122,1752,129],{"class":128},[122,1754,209],{"class":132},[122,1756,155],{"class":128},[122,1758,1759,1761,1763,1765],{"class":124,"line":228},[122,1760,217],{"class":128},[122,1762,220],{"class":132},[122,1764,223],{"class":136},[122,1766,155],{"class":128},[122,1768,1769,1771,1773,1775,1777,1779,1781,1783,1785,1787,1789,1791,1793,1795,1797,1799,1801,1803,1805,1807,1809,1811,1813,1815,1817,1819,1821],{"class":124,"line":297},[122,1770,231],{"class":128},[122,1772,234],{"class":132},[122,1774,237],{"class":128},[122,1776,240],{"class":136},[122,1778,143],{"class":128},[122,1780,146],{"class":128},[122,1782,247],{"class":128},[122,1784,251],{"class":250},[122,1786,254],{"class":128},[122,1788,251],{"class":250},[122,1790,254],{"class":128},[122,1792,251],{"class":250},[122,1794,263],{"class":128},[122,1796,146],{"class":128},[122,1798,237],{"class":128},[122,1800,270],{"class":136},[122,1802,143],{"class":128},[122,1804,146],{"class":128},[122,1806,247],{"class":128},[122,1808,279],{"class":250},[122,1810,254],{"class":128},[122,1812,279],{"class":250},[122,1814,254],{"class":128},[122,1816,279],{"class":250},[122,1818,263],{"class":128},[122,1820,146],{"class":128},[122,1822,294],{"class":128},[122,1824,1825,1827,1829],{"class":124,"line":344},[122,1826,231],{"class":128},[122,1828,584],{"class":132},[122,1830,155],{"class":128},[122,1832,1833,1835,1837],{"class":124,"line":378},[122,1834,347],{"class":128},[122,1836,28],{"class":132},[122,1838,155],{"class":128},[122,1840,1841,1843,1845],{"class":124,"line":388},[122,1842,764],{"class":128},[122,1844,1031],{"class":132},[122,1846,155],{"class":128},[122,1848,1849,1851,1853,1855,1857,1859,1861,1863,1865,1867,1869,1871,1873,1875,1877,1879,1881,1883,1885,1887],{"class":124,"line":398},[122,1850,808],{"class":128},[122,1852,302],{"class":132},[122,1854,305],{"class":136},[122,1856,143],{"class":128},[122,1858,146],{"class":128},[122,1860,312],{"class":149},[122,1862,146],{"class":128},[122,1864,237],{"class":128},[122,1866,240],{"class":136},[122,1868,143],{"class":128},[122,1870,146],{"class":128},[122,1872,247],{"class":128},[122,1874,279],{"class":250},[122,1876,254],{"class":128},[122,1878,331],{"class":250},[122,1880,254],{"class":128},[122,1882,279],{"class":250},[122,1884,263],{"class":128},[122,1886,146],{"class":128},[122,1888,155],{"class":128},[122,1890,1891,1893,1895,1897,1899,1901,1903,1905,1907,1909,1911,1913,1915],{"class":124,"line":471},[122,1892,1275],{"class":128},[122,1894,350],{"class":132},[122,1896,237],{"class":128},[122,1898,355],{"class":136},[122,1900,143],{"class":128},[122,1902,146],{"class":128},[122,1904,247],{"class":128},[122,1906,364],{"class":250},[122,1908,254],{"class":128},[122,1910,369],{"class":250},[122,1912,263],{"class":128},[122,1914,146],{"class":128},[122,1916,294],{"class":128},[122,1918,1919,1921,1923],{"class":124,"line":506},[122,1920,1275],{"class":128},[122,1922,383],{"class":132},[122,1924,294],{"class":128},[122,1926,1927,1929,1931],{"class":124,"line":528},[122,1928,1312],{"class":128},[122,1930,302],{"class":132},[122,1932,155],{"class":128},[122,1934,1935,1937,1939],{"class":124,"line":537},[122,1936,848],{"class":128},[122,1938,1031],{"class":132},[122,1940,155],{"class":128},[122,1942,1943,1945,1947,1949,1951,1953,1955,1957],{"class":124,"line":547},[122,1944,764],{"class":128},[122,1946,1031],{"class":132},[122,1948,1512],{"class":136},[122,1950,143],{"class":128},[122,1952,146],{"class":128},[122,1954,1519],{"class":149},[122,1956,146],{"class":128},[122,1958,155],{"class":128},[122,1960,1961,1963,1965,1967,1969,1971,1973,1975,1977,1979,1981,1983,1985,1987,1989,1991,1993,1995,1997,1999,2001,2003,2005,2007,2009,2011,2013,2015,2017,2019,2021],{"class":124,"line":590},[122,1962,808],{"class":128},[122,1964,302],{"class":132},[122,1966,305],{"class":136},[122,1968,143],{"class":128},[122,1970,146],{"class":128},[122,1972,411],{"class":149},[122,1974,146],{"class":128},[122,1976,237],{"class":128},[122,1978,240],{"class":136},[122,1980,143],{"class":128},[122,1982,146],{"class":128},[122,1984,247],{"class":128},[122,1986,279],{"class":250},[122,1988,254],{"class":128},[122,1990,279],{"class":250},[122,1992,254],{"class":128},[122,1994,279],{"class":250},[122,1996,263],{"class":128},[122,1998,146],{"class":128},[122,2000,237],{"class":128},[122,2002,442],{"class":136},[122,2004,143],{"class":128},[122,2006,146],{"class":128},[122,2008,449],{"class":128},[122,2010,452],{"class":168},[122,2012,455],{"class":128},[122,2014,458],{"class":168},[122,2016,461],{"class":128},[122,2018,464],{"class":250},[122,2020,146],{"class":128},[122,2022,155],{"class":128},[122,2024,2025,2027,2029,2031,2033,2035,2037,2039,2041,2043,2045,2047,2049,2051,2053],{"class":124,"line":591},[122,2026,1275],{"class":128},[122,2028,476],{"class":132},[122,2030,237],{"class":128},[122,2032,355],{"class":136},[122,2034,143],{"class":128},[122,2036,146],{"class":128},[122,2038,247],{"class":128},[122,2040,489],{"class":250},[122,2042,254],{"class":128},[122,2044,489],{"class":250},[122,2046,254],{"class":128},[122,2048,489],{"class":250},[122,2050,263],{"class":128},[122,2052,146],{"class":128},[122,2054,294],{"class":128},[122,2056,2057,2059,2061,2063,2065,2067,2069,2071],{"class":124,"line":592},[122,2058,1275],{"class":128},[122,2060,511],{"class":132},[122,2062,514],{"class":136},[122,2064,143],{"class":128},[122,2066,146],{"class":128},[122,2068,521],{"class":149},[122,2070,146],{"class":128},[122,2072,294],{"class":128},[122,2074,2075,2077,2079],{"class":124,"line":1000},[122,2076,1312],{"class":128},[122,2078,302],{"class":132},[122,2080,155],{"class":128},[122,2082,2083,2085,2087],{"class":124,"line":1009},[122,2084,848],{"class":128},[122,2086,1031],{"class":132},[122,2088,155],{"class":128},[122,2090,2091,2093,2095],{"class":124,"line":1466},[122,2092,984],{"class":128},[122,2094,28],{"class":132},[122,2096,155],{"class":128},[122,2098,2099,2101,2103],{"class":124,"line":1475},[122,2100,391],{"class":128},[122,2102,584],{"class":132},[122,2104,155],{"class":128},[122,2106,2108,2110,2112],{"class":124,"line":2107},25,[122,2109,540],{"class":128},[122,2111,220],{"class":132},[122,2113,155],{"class":128},[122,2115,2117,2119,2121],{"class":124,"line":2116},26,[122,2118,190],{"class":128},[122,2120,209],{"class":132},[122,2122,155],{"class":128},[84,2124,2125],{},"These physics are working, but the sphere is not behaving like a ball, it's not rolling through the floor, why is that?",[84,2127,2128,2129,2132,2133,2136],{},"You can inspect your physic scene using the ",[119,2130,2131],{},"debug"," prop in the ",[119,2134,2135],{},"\u003CPhysics>"," component you should see something like this:",[84,2138,2139],{},[2140,2141],"img",{"alt":117,"src":2142},"/cuboid.png",[84,2144,2145,2146],{},"You'll quickly realize that our ball is wrapped by a cube, not a sphere, so let's introduce the ",[579,2147,2148],{"href":38},[119,2149,1037],{},[84,2151,2152,2155],{},[579,2153,1037],{"href":2154},"/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,2157,2158,2159,2161,2162,2164],{},"Well ",[119,2160,652],{}," 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,2163,312],{}," shape.",[112,2166,2168],{"className":114,"code":2167,"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,2169,2170,2178,2197,2229,2257,2265,2273,2281],{"__ignoreMap":117},[122,2171,2172,2174,2176],{"class":124,"line":125},[122,2173,129],{"class":128},[122,2175,209],{"class":132},[122,2177,155],{"class":128},[122,2179,2180,2182,2184,2187,2189,2191,2193,2195],{"class":124,"line":158},[122,2181,217],{"class":128},[122,2183,1031],{"class":132},[122,2185,2186],{"class":136}," collider",[122,2188,143],{"class":128},[122,2190,146],{"class":128},[122,2192,312],{"class":149},[122,2194,146],{"class":128},[122,2196,155],{"class":128},[122,2198,2199,2201,2203,2205,2207,2209,2211,2213,2215,2217,2219,2221,2223,2225,2227],{"class":124,"line":187},[122,2200,231],{"class":128},[122,2202,302],{"class":132},[122,2204,237],{"class":128},[122,2206,240],{"class":136},[122,2208,143],{"class":128},[122,2210,146],{"class":128},[122,2212,247],{"class":128},[122,2214,279],{"class":250},[122,2216,254],{"class":128},[122,2218,331],{"class":250},[122,2220,254],{"class":128},[122,2222,279],{"class":250},[122,2224,263],{"class":128},[122,2226,146],{"class":128},[122,2228,155],{"class":128},[122,2230,2231,2233,2235,2237,2239,2241,2243,2245,2247,2249,2251,2253,2255],{"class":124,"line":197},[122,2232,347],{"class":128},[122,2234,350],{"class":132},[122,2236,237],{"class":128},[122,2238,355],{"class":136},[122,2240,143],{"class":128},[122,2242,146],{"class":128},[122,2244,247],{"class":128},[122,2246,364],{"class":250},[122,2248,254],{"class":128},[122,2250,369],{"class":250},[122,2252,263],{"class":128},[122,2254,146],{"class":128},[122,2256,294],{"class":128},[122,2258,2259,2261,2263],{"class":124,"line":204},[122,2260,347],{"class":128},[122,2262,383],{"class":132},[122,2264,294],{"class":128},[122,2266,2267,2269,2271],{"class":124,"line":214},[122,2268,391],{"class":128},[122,2270,302],{"class":132},[122,2272,155],{"class":128},[122,2274,2275,2277,2279],{"class":124,"line":228},[122,2276,540],{"class":128},[122,2278,1031],{"class":132},[122,2280,155],{"class":128},[122,2282,2283,2285,2287],{"class":124,"line":297},[122,2284,190],{"class":128},[122,2286,209],{"class":132},[122,2288,155],{"class":128},[84,2290,2291],{},"Now our sphere finally acts like one 🏀!",[84,2293,2294,2295,2298,2299,2306],{},"Bonus: we can add a little of ",[119,2296,2297],{},"0.5"," will be fine ",[579,2300,2303],{"href":2301,"rel":2302},"https://rapier.rs/docs/user_guides/javascript/colliders#restitution",[583],[119,2304,2305],{},"restitution"," (which will make the rigidBody bounce)",[2308,2309,2310],"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 pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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":2312},[],"Explanation of how the physic and 3D world merge.","md",null,{},{"title":19,"description":2313},"OR_OFhFXUIRvbG48gfrFnwDYDwtVtMbzRjmiQSBr6fs",[2320,2322],{"title":15,"path":16,"stem":17,"description":2321,"children":-1},"Learn how to enable Physics in your TresJS scenes.",{"title":28,"path":24,"stem":29,"description":2323,"children":-1},"The main component for render.",1781680040064]