three-skeletor
v0.0.7
Published
Inverse Kinematics for three.js
Downloads
8
Readme
three-skeletor
Inverse Kinematics for three.js forked from https://github.com/sneha-belkhale/THREE.IK/tree/hinge and ported to typescript with breaking API changes. The primary purpose of this library is to support aframe-skeletor.
WARNING
There is going to be some breaking API changes for bit until things settle down.
Quick Start
npm install three-skeletor
or from latest builds are in /dst/
import {
IK,
IKChain,
IKJoint,
IKBallConstraint,
IKHelper,
} from 'three-skeletor'
// readme from https://github.com/jsantell/THREE.IK
// Set up scene, camera, renderer
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
0.01,
100
)
camera.position.z = 5
const renderer = new THREE.WebGLRenderer()
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
const ik = new IK()
const chain = new IKChain()
const constraints = [new IKBallConstraint(90)]
const bones = []
// Create a target that the IK's effector will reach
// for.
const movingTarget = new THREE.Mesh(
new THREE.SphereGeometry(0.1),
new THREE.MeshBasicMaterial({ color: 0xff0000 })
)
movingTarget.position.z = 2
const pivot = new THREE.Object3D()
pivot.add(movingTarget)
scene.add(pivot)
// Create a chain of THREE.Bone's, each wrapped as an IKJoint
// and added to the IKChain
for (let i = 0; i < 10; i++) {
const bone = new THREE.Bone()
bone.position.y = i === 0 ? 0 : 0.5
if (bones[i - 1]) {
bones[i - 1].add(bone)
}
bones.push(bone)
// The last IKJoint must be added with a `target` as an end effector.
const target = i === 9 ? movingTarget : null
chain.add(new IKJoint(bone, { constraints }), { target })
}
// Add the chain to the IK system
ik.add(chain)
// Ensure the root bone is added somewhere in the scene
scene.add(ik.getRootBone())
// Create a helper and add to the scene so we can visualize
// the bones
const helper = new IKHelper(ik)
scene.add(helper)
function animate() {
pivot.rotation.x += 0.01
pivot.rotation.y += 0.01
pivot.rotation.z += 0.01
ik.solve()
renderer.render(scene, camera)
requestAnimationFrame(animate)
}
animate()
Usage
aframe-skeletor
Easy Inverse Kinematics for aframe.io
goblin-life
Used for character IK in goblin.life!