Three.js骨骼关节Bone

参考资料：threejs中文网

threejs qq交流群：814702116

Three.js骨骼关节Bone

骨骼关节Bone是threejs的一个类，你可以类似人或动物的骨骼关节，来理解骨骼关节Bone对象。

骨骼关节Bone的作用就是模拟人或动物的关节运动，控制身体表面变形，来生成骨骼动画(可以查看下节课的案例)。

骨骼关节Bone的父类是Object3D,自然会继承Object3D相关的属性或方法，比如位置属性position、旋转方法rotateX()、添加方法add()…

骨骼关节Bone树结构

人或动物实际的骨骼关节结构往往是比较复杂的，一般可以用一个层级树结构表达。

你可以把骨骼关节当做一个模型对象Object3D，构建一个简单的层级模型。

const Bone1 = new THREE.Bone(); //关节1，用来作为根关节
const Bone2 = new THREE.Bone(); //关节2
const Bone3 = new THREE.Bone(); //关节3

// 设置关节父子关系   多个骨头关节构成一个树结构
Bone1.add(Bone2);
Bone2.add(Bone3);

设置关节模型的位置和姿态角度

//根关节Bone1默认位置是(0,0,0)
Bone2.position.y = 60; //Bone2相对父对象Bone1位置
Bone3.position.y = 30; //Bone3相对父对象Bone2位置
//平移Bone1，Bone2、Bone3跟着平移
Bone1.position.set(50,0,50);

// 骨骼关节旋转
Bone1.rotateX(Math.PI / 6);
Bone2.rotateX(Math.PI / 6);

SkeletonHelper可视化骨骼关节

把所有骨骼关节对象的父对象，也就是根节点骨骼Bone1，添加一个模型对象中作为子对象，然后把模型对象作为SkeletonHelper的参数，就可以看到骨骼关节的可视化效果。

// 骨骼关节可以和普通网格模型一样作为其他模型子对象，添加到场景中
const group = new THREE.Group();
group.add(Bone1);

// SkeletonHelper会可视化参数模型对象所包含的所有骨骼关节
const skeletonHelper = new THREE.SkeletonHelper(group);
group.add(skeletonHelper);

注意SkeletonHelper的可视化效果，SkeletonHelper几个线段并不表示Bone，每个Bone你可以理解为一个虚拟关节点，SkeletonHelper几个线段是每个虚拟Bone关节点连线。

拖动条控制骨骼关节旋转

import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
const gui = new GUI();
gui.add(Bone1.rotation, 'x', 0, Math.PI / 3).name('关节1');
gui.add(Bone2.rotation, 'x', 0, Math.PI / 3).name('关节2');