[{"data":1,"prerenderedAt":813},["ShallowReactive",2],{"navigation":3,"/api/joint":72,"/api/joint-surround":808},[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":802,"extension":803,"links":804,"meta":805,"navigation":332,"path":66,"seo":806,"stem":67,"__hash__":807},"docs/2.api/2.joint.md",{"type":75,"value":76,"toc":796},"minimark",[77,89,95,103,205,214,219,228,709,714,735,752,756,792],[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,455,470,476,487,499,509,519,530,535,542,556,570,583,588,597,606,615,624,633,638,646,661,674,680,686,694,700],{"__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,448,450,453],{"class":240,"line":442},13,[238,444,445],{"class":252},"    :position",[238,447,259],{"class":244},[238,449,262],{"class":244},[238,451,452],{"class":265},"[0, 0, 0]",[238,454,424],{"class":244},[238,456,458,461,463,465,468],{"class":240,"line":457},14,[238,459,460],{"class":252},"    collider",[238,462,259],{"class":244},[238,464,262],{"class":244},[238,466,467],{"class":265},"ball",[238,469,424],{"class":244},[238,471,473],{"class":240,"line":472},15,[238,474,475],{"class":244},"  >\n",[238,477,479,482,485],{"class":240,"line":478},16,[238,480,481],{"class":244},"    \u003C",[238,483,484],{"class":248},"TresMesh",[238,486,271],{"class":244},[238,488,490,493,496],{"class":240,"line":489},17,[238,491,492],{"class":244},"      \u003C",[238,494,495],{"class":248},"TresSphereGeometry",[238,497,498],{"class":244}," />\n",[238,500,502,504,507],{"class":240,"line":501},18,[238,503,492],{"class":244},[238,505,506],{"class":248},"TresMeshNormalMaterial",[238,508,498],{"class":244},[238,510,512,515,517],{"class":240,"line":511},19,[238,513,514],{"class":244},"    \u003C/",[238,516,484],{"class":248},[238,518,271],{"class":244},[238,520,522,525,528],{"class":240,"line":521},20,[238,523,524],{"class":244},"  \u003C/",[238,526,527],{"class":248},"RigidBody",[238,529,271],{"class":244},[238,531,533],{"class":240,"line":532},21,[238,534,333],{"emptyLinePlaceholder":332},[238,536,538,540],{"class":240,"line":537},22,[238,539,405],{"class":244},[238,541,408],{"class":248},[238,543,545,547,549,551,554],{"class":240,"line":544},23,[238,546,414],{"class":252},[238,548,259],{"class":244},[238,550,262],{"class":244},[238,552,553],{"class":265},"bodyRefB",[238,555,424],{"class":244},[238,557,559,561,563,565,568],{"class":240,"line":558},24,[238,560,445],{"class":252},[238,562,259],{"class":244},[238,564,262],{"class":244},[238,566,567],{"class":265},"[-2.2, 0, 0]",[238,569,424],{"class":244},[238,571,573,575,577,579,581],{"class":240,"line":572},25,[238,574,460],{"class":252},[238,576,259],{"class":244},[238,578,262],{"class":244},[238,580,467],{"class":265},[238,582,424],{"class":244},[238,584,586],{"class":240,"line":585},26,[238,587,475],{"class":244},[238,589,591,593,595],{"class":240,"line":590},27,[238,592,481],{"class":244},[238,594,484],{"class":248},[238,596,271],{"class":244},[238,598,600,602,604],{"class":240,"line":599},28,[238,601,492],{"class":244},[238,603,495],{"class":248},[238,605,498],{"class":244},[238,607,609,611,613],{"class":240,"line":608},29,[238,610,492],{"class":244},[238,612,506],{"class":248},[238,614,498],{"class":244},[238,616,618,620,622],{"class":240,"line":617},30,[238,619,514],{"class":244},[238,621,484],{"class":248},[238,623,271],{"class":244},[238,625,627,629,631],{"class":240,"line":626},31,[238,628,524],{"class":244},[238,630,527],{"class":248},[238,632,271],{"class":244},[238,634,636],{"class":240,"line":635},32,[238,637,333],{"emptyLinePlaceholder":332},[238,639,641,643],{"class":240,"line":640},33,[238,642,405],{"class":244},[238,644,645],{"class":248},"SphericalJoint\n",[238,647,649,652,654,656,659],{"class":240,"line":648},34,[238,650,651],{"class":252},"    :bodies",[238,653,259],{"class":244},[238,655,262],{"class":244},[238,657,658],{"class":265},"[bodyRefA?.instance, bodyRefB?.instance]",[238,660,424],{"class":244},[238,662,664,667,669,671],{"class":240,"line":663},35,[238,665,666],{"class":252},"    :params",[238,668,259],{"class":244},[238,670,262],{"class":244},[238,672,673],{"class":265},"[\n",[238,675,677],{"class":240,"line":676},36,[238,678,679],{"class":265},"      [0, -1.1, 0],\n",[238,681,683],{"class":240,"line":682},37,[238,684,685],{"class":265},"      [0, 2, 0],\n",[238,687,689,692],{"class":240,"line":688},38,[238,690,691],{"class":265},"    ]",[238,693,424],{"class":244},[238,695,697],{"class":240,"line":696},39,[238,698,699],{"class":244},"  />\n",[238,701,703,705,707],{"class":240,"line":702},40,[238,704,380],{"class":244},[238,706,397],{"class":248},[238,708,271],{"class":244},[710,711,713],"h3",{"id":712},"explanation","Explanation",[78,715,716,717,719,720,723,724,726,727,730,731,734],{},"In the above example, we created two ",[131,718,527],{}," references, then, we implemented the ",[131,721,722],{},"SphericalJoint"," component, by placing our two ",[131,725,527],{}," references in the ",[131,728,729],{},":bodies"," property and specifying parameters, we created a ",[131,732,733],{},"spherical-joint"," between them.",[736,737,738],"prose-note",{},[78,739,740,741,746,747,213],{},"For more info please take a look at the official ",[82,742,745],{"href":743,"rel":744},"https://rapier.rs/docs/user_guides/javascript/joints",[86],"Joint Documentation"," also don't forget to check ",[82,748,751],{"href":749,"rel":750},"https://rapier.rs/docs/user_guides/javascript/joint_constraints",[86],"Joint constrains",[215,753,755],{"id":754},"props","Props",[757,758,759,767,774,781],"field-group",{},[760,761,764],"field",{"name":762,"type":763},"type","JointType",[78,765,766],{},"Joint type to create.",[760,768,771],{"name":769,"type":770},"bodies","[RigidBody, RigidBody]",[78,772,773],{},"Two rigid bodies connected by the joint.",[760,775,778],{"name":776,"type":777},"params","number | number[]",[78,779,780],{},"Joint parameters passed to Rapier joint data.",[760,782,785],{"name":783,"type":784},"wakeUpOnChanges","boolean",[78,786,787,788,791],{},"Default: ",[131,789,790],{},"true"," - Wakes up connected bodies when the joint mounts, unmounts, or updates.",[793,794,795],"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 .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":797},[798,801],{"id":217,"depth":274,"text":218,"children":799},[800],{"id":712,"depth":309,"text":713},{"id":754,"depth":274,"text":755},"Simple and declarative way to joint two or more rigidBodies.","md",null,{},{"title":65,"description":802},"1F2PvsJpLTsbMZ4F08_BQUI6dVG-Z1HWv2kc0YhaE7g",[809,811],{"title":61,"path":62,"stem":63,"description":810,"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":812,"children":-1},"Composable more advance physics world manipulation.",1789116600847]