[{"data":1,"prerenderedAt":893},["ShallowReactive",2],{"navigation":3,"/api/joint":72,"/api/joint-surround":888},[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":65,"body":74,"description":882,"extension":883,"links":884,"meta":885,"navigation":332,"path":66,"seo":886,"stem":67,"__hash__":887},"docs/2.api/2.joint.md",{"type":75,"value":76,"toc":876},"minimark",[77,89,95,103,205,214,219,228,791,796,817,834,838,872],[78,79,80,81,88],"p",{},"Joints is an extension feature provided in ",[82,83,87],"a",{"href":84,"rel":85},"https://rapier.rs/docs/user_guides/javascript/joints/",[86],"nofollow","Rapier#Joint",". It lets us connect two or more bodies, restricting their movements according to each other.",[90,91,92],"scene-wrapper",{},[93,94],"demos-joints",{},[78,96,97,98,102],{},"In ",[99,100,101],"strong",{},"TresJs"," we can achieve such motion restriction by using the available joint components:",[104,105,106,122],"table",{},[107,108,109],"thead",{},[110,111,112,116,119],"tr",{},[113,114,115],"th",{},"Joint component",[113,117,118],{},"Rapier equivalent",[113,120,121],{},"Description",[123,124,125,140,153,166,179,192],"tbody",{},[110,126,127,134,137],{},[128,129,130],"td",{},[131,132,133],"code",{},"\u003CGenericJoint />",[128,135,136],{},"Generic joint",[128,138,139],{},"Low-level configurable joint used to compose custom constraints and advanced DOF combinations.",[110,141,142,147,150],{},[128,143,144],{},[131,145,146],{},"\u003CPrismaticJoint />",[128,148,149],{},"Prismatic joint",[128,151,152],{},"Allows only relative translation along one axis (sliding motion).",[110,154,155,160,163],{},[128,156,157],{},[131,158,159],{},"\u003CRevoluteJoint />",[128,161,162],{},"Revolute joint",[128,164,165],{},"Allows only relative rotation around one axis (hinge motion).",[110,167,168,173,176],{},[128,169,170],{},[131,171,172],{},"\u003CRopeJoint />",[128,174,175],{},"Rope joint",[128,177,178],{},"Limits the maximum distance between two anchors, like a rope/cable constraint.",[110,180,181,186,189],{},[128,182,183],{},[131,184,185],{},"\u003CSphericalJoint />",[128,187,188],{},"Spherical joint",[128,190,191],{},"Keeps two anchor points together while allowing free relative rotation (ball-and-socket).",[110,193,194,199,202],{},[128,195,196],{},[131,197,198],{},"\u003CSpringJoint />",[128,200,201],{},"Spring joint",[128,203,204],{},"Connects two bodies with spring behavior using stiffness and damping.",[78,206,207,208,213],{},"All of them extend ",[82,209,212],{"href":210,"rel":211},"https://github.com/Tresjs/rapier/tree/main/src/components/joints/index.ts#L96",[86],"BaseJoint",".",[215,216,218],"h2",{"id":217},"how-to-use","How to use",[78,220,221,222,224,225,227],{},"Here's a basic ",[131,223,65],{}," implementation in ",[99,226,101],{},":",[229,230,235],"pre",{"className":231,"code":232,"language":233,"meta":234,"style":234},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { RigidBody, SphericalJoint } from '@tresjs/rapier'\nimport { shallowRef } from 'vue'\n\nconst bodyRefA = shallowRef(null)\nconst bodyRefB = shallowRef(null)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CRigidBody\n    ref=\"bodyRefA\"\n    type=\"kinematic\"\n    :position=\"[0, 0, 0]\"\n    collider=\"ball\"\n  >\n    \u003CTresMesh>\n      \u003CTresSphereGeometry />\n      \u003CTresMeshNormalMaterial />\n    \u003C/TresMesh>\n  \u003C/RigidBody>\n\n  \u003CRigidBody\n    ref=\"bodyRefB\"\n    :position=\"[-2.2, 0, 0]\"\n    collider=\"ball\"\n  >\n    \u003CTresMesh>\n      \u003CTresSphereGeometry />\n      \u003CTresMeshNormalMaterial />\n    \u003C/TresMesh>\n  \u003C/RigidBody>\n\n  \u003CSphericalJoint\n    :bodies=\"[bodyRefA?.instance, bodyRefB?.instance]\"\n    :params=\"[\n      [0, -1.1, 0],\n      [0, 2, 0],\n    ]\"\n  />\n\u003C/template>\n","vue","",[131,236,237,272,307,327,334,357,375,385,390,400,409,425,440,474,489,495,506,518,528,538,549,554,561,575,604,617,622,631,640,649,658,667,672,680,714,729,750,768,776,782],{"__ignoreMap":234},[238,239,242,246,250,254,257,260,263,267,269],"span",{"class":240,"line":241},"line",1,[238,243,245],{"class":244},"sMK4o","\u003C",[238,247,249],{"class":248},"swJcz","script",[238,251,253],{"class":252},"spNyl"," setup",[238,255,256],{"class":252}," lang",[238,258,259],{"class":244},"=",[238,261,262],{"class":244},"\"",[238,264,266],{"class":265},"sfazB","ts",[238,268,262],{"class":244},[238,270,271],{"class":244},">\n",[238,273,275,279,282,286,289,292,295,298,301,304],{"class":240,"line":274},2,[238,276,278],{"class":277},"s7zQu","import",[238,280,281],{"class":244}," {",[238,283,285],{"class":284},"sTEyZ"," RigidBody",[238,287,288],{"class":244},",",[238,290,291],{"class":284}," SphericalJoint",[238,293,294],{"class":244}," }",[238,296,297],{"class":277}," from",[238,299,300],{"class":244}," '",[238,302,303],{"class":265},"@tresjs/rapier",[238,305,306],{"class":244},"'\n",[238,308,310,312,314,317,319,321,323,325],{"class":240,"line":309},3,[238,311,278],{"class":277},[238,313,281],{"class":244},[238,315,316],{"class":284}," shallowRef",[238,318,294],{"class":244},[238,320,297],{"class":277},[238,322,300],{"class":244},[238,324,233],{"class":265},[238,326,306],{"class":244},[238,328,330],{"class":240,"line":329},4,[238,331,333],{"emptyLinePlaceholder":332},true,"\n",[238,335,337,340,343,345,348,351,354],{"class":240,"line":336},5,[238,338,339],{"class":252},"const",[238,341,342],{"class":284}," bodyRefA ",[238,344,259],{"class":244},[238,346,316],{"class":347},"s2Zo4",[238,349,350],{"class":284},"(",[238,352,353],{"class":244},"null",[238,355,356],{"class":284},")\n",[238,358,360,362,365,367,369,371,373],{"class":240,"line":359},6,[238,361,339],{"class":252},[238,363,364],{"class":284}," bodyRefB ",[238,366,259],{"class":244},[238,368,316],{"class":347},[238,370,350],{"class":284},[238,372,353],{"class":244},[238,374,356],{"class":284},[238,376,378,381,383],{"class":240,"line":377},7,[238,379,380],{"class":244},"\u003C/",[238,382,249],{"class":248},[238,384,271],{"class":244},[238,386,388],{"class":240,"line":387},8,[238,389,333],{"emptyLinePlaceholder":332},[238,391,393,395,398],{"class":240,"line":392},9,[238,394,245],{"class":244},[238,396,397],{"class":248},"template",[238,399,271],{"class":244},[238,401,403,406],{"class":240,"line":402},10,[238,404,405],{"class":244},"  \u003C",[238,407,408],{"class":248},"RigidBody\n",[238,410,412,415,417,419,422],{"class":240,"line":411},11,[238,413,414],{"class":252},"    ref",[238,416,259],{"class":244},[238,418,262],{"class":244},[238,420,421],{"class":265},"bodyRefA",[238,423,424],{"class":244},"\"\n",[238,426,428,431,433,435,438],{"class":240,"line":427},12,[238,429,430],{"class":252},"    type",[238,432,259],{"class":244},[238,434,262],{"class":244},[238,436,437],{"class":265},"kinematic",[238,439,424],{"class":244},[238,441,443,446,449,451,453,456,460,463,465,467,469,472],{"class":240,"line":442},13,[238,444,445],{"class":244},"    :",[238,447,448],{"class":252},"position",[238,450,259],{"class":244},[238,452,262],{"class":244},[238,454,455],{"class":244},"[",[238,457,459],{"class":458},"sbssI","0",[238,461,462],{"class":244},", ",[238,464,459],{"class":458},[238,466,462],{"class":244},[238,468,459],{"class":458},[238,470,471],{"class":244},"]",[238,473,424],{"class":244},[238,475,477,480,482,484,487],{"class":240,"line":476},14,[238,478,479],{"class":252},"    collider",[238,481,259],{"class":244},[238,483,262],{"class":244},[238,485,486],{"class":265},"ball",[238,488,424],{"class":244},[238,490,492],{"class":240,"line":491},15,[238,493,494],{"class":244},"  >\n",[238,496,498,501,504],{"class":240,"line":497},16,[238,499,500],{"class":244},"    \u003C",[238,502,503],{"class":248},"TresMesh",[238,505,271],{"class":244},[238,507,509,512,515],{"class":240,"line":508},17,[238,510,511],{"class":244},"      \u003C",[238,513,514],{"class":248},"TresSphereGeometry",[238,516,517],{"class":244}," />\n",[238,519,521,523,526],{"class":240,"line":520},18,[238,522,511],{"class":244},[238,524,525],{"class":248},"TresMeshNormalMaterial",[238,527,517],{"class":244},[238,529,531,534,536],{"class":240,"line":530},19,[238,532,533],{"class":244},"    \u003C/",[238,535,503],{"class":248},[238,537,271],{"class":244},[238,539,541,544,547],{"class":240,"line":540},20,[238,542,543],{"class":244},"  \u003C/",[238,545,546],{"class":248},"RigidBody",[238,548,271],{"class":244},[238,550,552],{"class":240,"line":551},21,[238,553,333],{"emptyLinePlaceholder":332},[238,555,557,559],{"class":240,"line":556},22,[238,558,405],{"class":244},[238,560,408],{"class":248},[238,562,564,566,568,570,573],{"class":240,"line":563},23,[238,565,414],{"class":252},[238,567,259],{"class":244},[238,569,262],{"class":244},[238,571,572],{"class":265},"bodyRefB",[238,574,424],{"class":244},[238,576,578,580,582,584,586,589,592,594,596,598,600,602],{"class":240,"line":577},24,[238,579,445],{"class":244},[238,581,448],{"class":252},[238,583,259],{"class":244},[238,585,262],{"class":244},[238,587,588],{"class":244},"[-",[238,590,591],{"class":458},"2.2",[238,593,462],{"class":244},[238,595,459],{"class":458},[238,597,462],{"class":244},[238,599,459],{"class":458},[238,601,471],{"class":244},[238,603,424],{"class":244},[238,605,607,609,611,613,615],{"class":240,"line":606},25,[238,608,479],{"class":252},[238,610,259],{"class":244},[238,612,262],{"class":244},[238,614,486],{"class":265},[238,616,424],{"class":244},[238,618,620],{"class":240,"line":619},26,[238,621,494],{"class":244},[238,623,625,627,629],{"class":240,"line":624},27,[238,626,500],{"class":244},[238,628,503],{"class":248},[238,630,271],{"class":244},[238,632,634,636,638],{"class":240,"line":633},28,[238,635,511],{"class":244},[238,637,514],{"class":248},[238,639,517],{"class":244},[238,641,643,645,647],{"class":240,"line":642},29,[238,644,511],{"class":244},[238,646,525],{"class":248},[238,648,517],{"class":244},[238,650,652,654,656],{"class":240,"line":651},30,[238,653,533],{"class":244},[238,655,503],{"class":248},[238,657,271],{"class":244},[238,659,661,663,665],{"class":240,"line":660},31,[238,662,543],{"class":244},[238,664,546],{"class":248},[238,666,271],{"class":244},[238,668,670],{"class":240,"line":669},32,[238,671,333],{"emptyLinePlaceholder":332},[238,673,675,677],{"class":240,"line":674},33,[238,676,405],{"class":244},[238,678,679],{"class":248},"SphericalJoint\n",[238,681,683,685,688,690,692,694,696,699,702,704,706,708,710,712],{"class":240,"line":682},34,[238,684,445],{"class":244},[238,686,687],{"class":252},"bodies",[238,689,259],{"class":244},[238,691,262],{"class":244},[238,693,455],{"class":244},[238,695,421],{"class":284},[238,697,698],{"class":244},"?.",[238,700,701],{"class":284},"instance",[238,703,462],{"class":244},[238,705,572],{"class":284},[238,707,698],{"class":244},[238,709,701],{"class":284},[238,711,471],{"class":244},[238,713,424],{"class":244},[238,715,717,719,722,724,726],{"class":240,"line":716},35,[238,718,445],{"class":244},[238,720,721],{"class":252},"params",[238,723,259],{"class":244},[238,725,262],{"class":244},[238,727,728],{"class":244},"[\n",[238,730,732,735,737,740,743,745,747],{"class":240,"line":731},36,[238,733,734],{"class":244},"      [",[238,736,459],{"class":458},[238,738,739],{"class":244},", -",[238,741,742],{"class":458},"1.1",[238,744,462],{"class":244},[238,746,459],{"class":458},[238,748,749],{"class":244},"],\n",[238,751,753,755,757,759,762,764,766],{"class":240,"line":752},37,[238,754,734],{"class":244},[238,756,459],{"class":458},[238,758,462],{"class":244},[238,760,761],{"class":458},"2",[238,763,462],{"class":244},[238,765,459],{"class":458},[238,767,749],{"class":244},[238,769,771,774],{"class":240,"line":770},38,[238,772,773],{"class":244},"    ]",[238,775,424],{"class":244},[238,777,779],{"class":240,"line":778},39,[238,780,781],{"class":244},"  />\n",[238,783,785,787,789],{"class":240,"line":784},40,[238,786,380],{"class":244},[238,788,397],{"class":248},[238,790,271],{"class":244},[792,793,795],"h3",{"id":794},"explanation","Explanation",[78,797,798,799,801,802,805,806,808,809,812,813,816],{},"In the above example, we created two ",[131,800,546],{}," references, then, we implemented the ",[131,803,804],{},"SphericalJoint"," component, by placing our two ",[131,807,546],{}," references in the ",[131,810,811],{},":bodies"," property and specifying parameters, we created a ",[131,814,815],{},"spherical-joint"," between them.",[818,819,820],"prose-note",{},[78,821,822,823,828,829,213],{},"For more info please take a look at the official ",[82,824,827],{"href":825,"rel":826},"https://rapier.rs/docs/user_guides/javascript/joints",[86],"Joint Documentation"," also don't forget to check ",[82,830,833],{"href":831,"rel":832},"https://rapier.rs/docs/user_guides/javascript/joint_constraints",[86],"Joint constrains",[215,835,837],{"id":836},"props","Props",[839,840,841,849,855,861],"field-group",{},[842,843,846],"field",{"name":844,"type":845},"type","JointType",[78,847,848],{},"Joint type to create.",[842,850,852],{"name":687,"type":851},"[RigidBody, RigidBody]",[78,853,854],{},"Two rigid bodies connected by the joint.",[842,856,858],{"name":721,"type":857},"number | number[]",[78,859,860],{},"Joint parameters passed to Rapier joint data.",[842,862,865],{"name":863,"type":864},"wakeUpOnChanges","boolean",[78,866,867,868,871],{},"Default: ",[131,869,870],{},"true"," - Wakes up connected bodies when the joint mounts, unmounts, or updates.",[873,874,875],"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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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":234,"searchDepth":241,"depth":274,"links":877},[878,881],{"id":217,"depth":274,"text":218,"children":879},[880],{"id":794,"depth":309,"text":795},{"id":836,"depth":274,"text":837},"Simple and declarative way to joint two or more rigidBodies.","md",null,{},{"title":65,"description":882},"9njVGGws57LPfeFxkp2ldjYd8qfjivsX4jAyAtJEcAA",[889,891],{"title":61,"path":62,"stem":63,"description":890,"children":-1},"Simulate many repeated objects efficiently by creating one Rapier rigid body per instance of a TresInstancedMesh.",{"title":69,"path":70,"stem":71,"description":892,"children":-1},"Composable more advance physics world manipulation.",1781680040528]