([])
16 |
17 | const { linkCount, linkLength, endEffectorRotation } = useControls({
18 | linkCount: { value: 4, min: 0, max: 50, step: 1 },
19 | linkLength: { value: 200, min: 1, max: 200, step: 10 },
20 | endEffectorRotation: { value: 0, min: -180, max: 180, step: 15 },
21 | })
22 |
23 | useEffect(() => {
24 | setLinks(makeLinks(linkCount, linkLength, endEffectorRotation))
25 | }, [linkCount, linkLength, endEffectorRotation])
26 |
27 | useAnimationFrame(60, () => {
28 | const knownRangeOfMovement = linkCount * linkLength
29 |
30 | function learningRate(errorDistance: number): number {
31 | const relativeDistanceToTarget = MathUtils.clamp(errorDistance / knownRangeOfMovement, 0, 1)
32 | const cutoff = 0.1
33 |
34 | if (relativeDistanceToTarget > cutoff) {
35 | return 10e-6
36 | }
37 |
38 | // result is between 0 and 1
39 | const remainingDistance = relativeDistanceToTarget / 0.02
40 | const minimumLearningRate = 10e-7
41 |
42 | return minimumLearningRate + remainingDistance * 10e-7
43 | }
44 |
45 | const result = Solve2D.solve(links, base, target, {
46 | method: 'FABRIK',
47 | learningRate,
48 | acceptedError: 10,
49 | }).links
50 |
51 | links.forEach((_, index) => {
52 | links[index] = result[index]!
53 | })
54 | })
55 |
56 | return (
57 |
59 | setTarget([clientX - window.innerWidth / 2, -clientY + window.innerHeight / 2])
60 | }
61 | >
62 |
77 |
78 |
79 | )
80 | }
81 |
82 | const makeLinks = (linkCount: number, linkLength: number, endEffectorRotation: number): Solve2D.Link[] =>
83 | Array.from({ length: linkCount }).map((_, index) => {
84 | if (index === linkCount - 1) {
85 | return {
86 | position: [linkLength, 0],
87 | constraints: { value: (endEffectorRotation * Math.PI) / 180, type: 'global' },
88 | rotation: 0,
89 | }
90 | }
91 | return Solve2D.buildLink([linkLength, 0])
92 | })
93 |
--------------------------------------------------------------------------------
/example/src/demos/two-dimensional/ConstrainedLocalRotation2D.tsx:
--------------------------------------------------------------------------------
1 | import { Canvas } from '@react-three/fiber'
2 | import { MathUtils, Solve2D, V2 } from 'inverse-kinematics'
3 | import { useControls } from 'leva'
4 | import React, { useEffect, useState } from 'react'
5 | import { useAnimationFrame } from '../../hooks/useAnimationFrame'
6 | import { Base } from './components/Base'
7 | import { JointTransforms } from './components/JointTransforms'
8 | import { Logger } from './components/Logger'
9 | import { Target } from './components/Target'
10 |
11 | const base: Solve2D.JointTransform = { position: [0, 0], rotation: 0 }
12 |
13 | export default function ConstrainedLocalRotation2D() {
14 | const [target, setTarget] = useState([500, 50] as V2)
15 | const [links, setLinks] = useState([])
16 |
17 | const { linkCount, linkLength, endEffectorRotation } = useControls({
18 | linkCount: { value: 4, min: 0, max: 50, step: 1 },
19 | linkLength: { value: 200, min: 1, max: 200, step: 10 },
20 | endEffectorRotation: { value: 0, min: -180, max: 180, step: 5 },
21 | })
22 |
23 | useEffect(() => {
24 | setLinks(makeLinks(linkCount, linkLength, endEffectorRotation))
25 | }, [linkCount, linkLength, endEffectorRotation])
26 |
27 | useAnimationFrame(60, () => {
28 | const knownRangeOfMovement = linkCount * linkLength
29 |
30 | function learningRate(errorDistance: number): number {
31 | const relativeDistanceToTarget = MathUtils.clamp(errorDistance / knownRangeOfMovement, 0, 1)
32 | const cutoff = 0.1
33 |
34 | if (relativeDistanceToTarget > cutoff) {
35 | return 10e-6
36 | }
37 |
38 | // result is between 0 and 1
39 | const remainingDistance = relativeDistanceToTarget / 0.02
40 | const minimumLearningRate = 10e-7
41 |
42 | return minimumLearningRate + remainingDistance * 10e-7
43 | }
44 |
45 | const result = Solve2D.solve(links, base, target, {
46 | method: 'FABRIK',
47 | learningRate,
48 | acceptedError: 10,
49 | }).links
50 |
51 | links.forEach((_, index) => {
52 | links[index] = result[index]!
53 | })
54 | })
55 |
56 | return (
57 |
59 | setTarget([clientX - window.innerWidth / 2, -clientY + window.innerHeight / 2])
60 | }
61 | >
62 |
77 |
78 |
79 | )
80 | }
81 |
82 | const makeLinks = (linkCount: number, linkLength: number, endEffectorRotation: number): Solve2D.Link[] =>
83 | Array.from({ length: linkCount }).map((_, index) => {
84 | if (index === linkCount - 1) {
85 | return {
86 | position: [linkLength, 0],
87 | constraints: { value: (endEffectorRotation * Math.PI) / 180, type: 'local' },
88 | rotation: 0,
89 | }
90 | }
91 | return {
92 | position: [linkLength, 0],
93 | rotation: 0,
94 | }
95 | })
96 |
--------------------------------------------------------------------------------
/example/src/demos/two-dimensional/TwoDimension.tsx:
--------------------------------------------------------------------------------
1 | import { Canvas } from '@react-three/fiber'
2 | import { MathUtils, Solve2D, V2 } from 'inverse-kinematics'
3 | import React, { useEffect, useRef, useState } from 'react'
4 | import { useAnimationFrame } from '../../hooks/useAnimationFrame'
5 | import { Base } from './components/Base'
6 | import { JointTransforms } from './components/JointTransforms'
7 | import { Logger } from './components/Logger'
8 | import { Target } from './components/Target'
9 | import { useControls } from 'leva'
10 |
11 | const base: Solve2D.JointTransform = { position: [0, 0], rotation: 0 }
12 |
13 | export default function TwoDimension({ method }: { method: 'CCD' | 'FABRIK' }) {
14 | const [target, setTarget] = useState([500, 50] as V2)
15 | const [links, setLinks] = useState([])
16 |
17 | const { linkCount, linkLength, linkMinAngle, linkMaxAngle } = useControls({
18 | linkCount: { value: 1, min: 0, max: 50, step: 1 },
19 | linkLength: { value: 200, min: 1, max: 200, step: 10 },
20 | linkMinAngle: { value: -90, min: -360, max: 0, step: 10 },
21 | linkMaxAngle: { value: 90, min: 0, max: 360, step: 10 },
22 | })
23 |
24 | useEffect(() => {
25 | setLinks(makeLinks(linkCount, linkLength, linkMinAngle, linkMaxAngle))
26 | }, [linkCount, linkLength, linkMinAngle, linkMaxAngle])
27 |
28 | useAnimationFrame(60, () => {
29 | const knownRangeOfMovement = linkCount * linkLength
30 |
31 | function learningRate(errorDistance: number): number {
32 | const relativeDistanceToTarget = MathUtils.clamp(errorDistance / knownRangeOfMovement, 0, 1)
33 | const cutoff = 0.1
34 |
35 | if (relativeDistanceToTarget > cutoff) {
36 | return 10e-6
37 | }
38 |
39 | // result is between 0 and 1
40 | const remainingDistance = relativeDistanceToTarget / 0.02
41 | const minimumLearningRate = 10e-7
42 |
43 | return minimumLearningRate + remainingDistance * 10e-7
44 | }
45 |
46 | const result = Solve2D.solve(links, base, target, {
47 | learningRate: method === 'FABRIK' ? learningRate : 1,
48 | acceptedError: 10,
49 | method,
50 | }).links
51 |
52 | links.forEach((_, index) => {
53 | links[index] = result[index]!
54 | })
55 | })
56 |
57 | return (
58 |
60 | setTarget([clientX - window.innerWidth / 2, -clientY + window.innerHeight / 2])
61 | }
62 | >
63 |
78 |
79 |
80 | )
81 | }
82 |
83 | const makeLinks = (linkCount: number, linkLength: number, linkMinAngle: number, linkMaxAngle: number): Solve2D.Link[] =>
84 | Array.from({ length: linkCount }).map(() => ({
85 | position: [linkLength, 0],
86 | constraints: { min: (linkMinAngle * Math.PI) / 180, max: (linkMaxAngle * Math.PI) / 180 },
87 | rotation: 0,
88 | }))
89 |
--------------------------------------------------------------------------------
/example/src/demos/two-dimensional/components/Base.tsx:
--------------------------------------------------------------------------------
1 | import { useFrame } from '@react-three/fiber'
2 | import { Solve2D, V2 } from 'inverse-kinematics'
3 | import React, { useMemo, useRef } from 'react'
4 | import { BoxBufferGeometry, Mesh, MeshNormalMaterial } from 'three'
5 | import { Link, LinkProps } from './Link'
6 |
7 | export const Base = ({ base: base, links }: { links: Solve2D.Link[]; base: Solve2D.JointTransform }) => {
8 | const ref = useRef>()
9 | const chain = useMemo(() => makeChain(links), [links])
10 |
11 | useFrame(() => {
12 | if (!ref.current) return
13 | ref.current.position.set(...base.position, 0)
14 | ref.current.rotation.set(0, 0, base.rotation)
15 |
16 | let depth = 0
17 | let child = chain
18 |
19 | while (child !== undefined && links[depth] !== undefined) {
20 | child.link.rotation = links[depth]!.rotation ?? 0
21 | depth++
22 | child = child.child
23 | }
24 | })
25 |
26 | return (
27 |
28 |
29 |
30 | {chain && }
31 |
32 | )
33 | }
34 |
35 | function makeChain(links: Solve2D.Link[]): LinkProps | undefined {
36 | let chain: LinkProps | undefined
37 | for (let index = links.length - 1; index >= 0; index--) {
38 | const link: LinkProps = { link: { ...links[index]!, rotation: links[index]!.rotation ?? 0 } }
39 |
40 | // Is first element
41 | if (chain === undefined) {
42 | chain = link
43 | continue
44 | }
45 |
46 | chain = { link: link.link, child: chain }
47 | }
48 |
49 | return chain
50 | }
51 |
--------------------------------------------------------------------------------
/example/src/demos/two-dimensional/components/JointTransforms.tsx:
--------------------------------------------------------------------------------
1 | import { useFrame } from '@react-three/fiber'
2 | import { Solve2D } from 'inverse-kinematics'
3 | import React, { useMemo, useRef } from 'react'
4 | import { Group } from 'three'
5 |
6 | export const JointTransforms = ({ links, base }: { links: Solve2D.Link[]; base: Solve2D.JointTransform }) => {
7 | const ref = useRef()
8 |
9 | useFrame(() => {
10 | if (ref.current === undefined) return
11 |
12 | const { transforms } = Solve2D.getJointTransforms(links, base)
13 | for (let index = 0; index < ref.current.children.length; index++) {
14 | const child = ref.current.children[index]!
15 | const jointPosition = transforms[index]?.position
16 | if (jointPosition === undefined) {
17 | throw new Error(`No corresponding child position for index ${index}`)
18 | }
19 | child.position.set(...jointPosition, 100)
20 | }
21 | })
22 |
23 | const jointPositions = useMemo(
24 | () =>
25 | Array.from({ length: links.length + 1 }).map((_, index) => {
26 | return (
27 |
28 |
29 |
30 |
31 | )
32 | }),
33 | [links],
34 | )
35 | return {jointPositions}
36 | }
37 |
--------------------------------------------------------------------------------
/example/src/demos/two-dimensional/components/Link.tsx:
--------------------------------------------------------------------------------
1 | import { useFrame } from '@react-three/fiber'
2 | import React, { useMemo, useRef } from 'react'
3 | import {
4 | BoxBufferGeometry,
5 | BufferGeometry,
6 | Color,
7 | Group,
8 | Line,
9 | LineBasicMaterial,
10 | Mesh,
11 | MeshNormalMaterial,
12 | Vector3,
13 | } from 'three'
14 | import { V2 } from 'inverse-kinematics'
15 |
16 | export interface LinkProps {
17 | link: { rotation: number; position: V2 }
18 | child?: LinkProps
19 | }
20 |
21 | export const Link = ({ link, child }: LinkProps) => {
22 | const rotationRef = useRef()
23 | const translationRef = useRef>()
24 |
25 | useFrame(() => {
26 | if (!rotationRef.current) return
27 | if (!translationRef.current) return
28 | rotationRef.current.rotation.set(0, 0, link.rotation)
29 | translationRef.current.position.set(...link.position, 0)
30 | })
31 |
32 | const line: Line = useMemo(() => {
33 | const points = [new Vector3(), new Vector3(...link.position, 0)]
34 | const geometry = new BufferGeometry().setFromPoints(points)
35 | const material = new LineBasicMaterial({ color: new Color('#8B008B') })
36 |
37 | return new Line(geometry, material)
38 | }, [link])
39 |
40 | return (
41 |
42 |
43 |
44 |
45 | {child && }
46 |
47 |
48 |
49 | )
50 | }
51 |
--------------------------------------------------------------------------------
/example/src/demos/two-dimensional/components/Logger.tsx:
--------------------------------------------------------------------------------
1 | import { Solve2D, V2 } from 'inverse-kinematics'
2 | import React, { useRef } from 'react'
3 | import { useAnimationFrame } from '../../../hooks/useAnimationFrame'
4 |
5 | export const Logger = ({
6 | target,
7 | links,
8 | base: base,
9 | }: {
10 | target: V2
11 | links: Solve2D.Link[]
12 | base: Solve2D.JointTransform
13 | }) => {
14 | const distanceRef = useRef(null)
15 |
16 | useAnimationFrame(1, () => {
17 | if (!distanceRef.current) return
18 | distanceRef.current.innerText = Solve2D.getErrorDistance(links, base, target).toFixed(3)
19 | })
20 |
21 | return (
22 |
23 |
24 |
25 |
26 | | Distance |
27 | |
28 |
29 |
30 |
31 |