threejs骨架形状

最新推荐文章于 2024-08-14 14:05:02 发布

目尽地平线

最新推荐文章于 2024-08-14 14:05:02 发布

阅读量5.9k

点赞数

分类专栏：前端 threejs three.js基础教程文章标签： threejs skeleton bone 骨骼

本文链接：https://blog.csdn.net/ruangong1203/article/details/56016214

版权

本文介绍了ThreeJS中的骨骼动画，包括骨骼的概念、创建骨架的四步过程，以及如何通过更新骨架来控制图形运动。强调了skinIndices和skinWeights属性在骨骼控制中的作用，并提供了一个简单的完整示例。

摘要由CSDN通过智能技术生成

骨骼动画

骨骼是什么？骨骼就是一个可以控制其它形状的对象。在threejs中，骨骼（Bone）就是一个空的Object3D对象，当然，也可以是任何Object3D对象的子类。

创建骨架

创建骨架总体来说就四步：

创建形状
创建骨架
为形状的每一个点指定其控制的骨骼
将形状和骨架中的骨骼绑定起来

往往第三步是最复杂的，因为要考虑形状的每一个点。下面是一个完整的例子,在这个例子中，是使用点的y值来划分哪个点属于哪根骨骼管的：

function createBones(){
   
       //计算参数，这些参数在多处用到
        var segmentHeight = 8;
        var segmentCount = 4;
        var height = segmentHeight * segmentCount;
        var halfHeight = height * 0.5;

        var sizing = {
                segmentHeight : segmentHeight,
                segmentCount : segmentCount,
                height : height,
                halfHeight : halfHeight
        };

        //创建骨架
        bones = [];
        var prevBone = new THREE.Bone();
        bones.push( prevBone );
        prevBone.posit