美文网首页
threejs骨架形状

threejs骨架形状

作者: 不决书 | 来源:发表于2019-10-14 20:56 被阅读0次

骨骼动画

骨骼是什么?骨骼就是一个可以控制其它形状的对象。在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.position.y = - sizing.halfHeight;

        for ( var i = 0; i < sizing.segmentCount; i ++ ) {

                var bone = new THREE.Bone();

                bone.position.y = sizing.segmentHeight;

                bones.push( bone );

                prevBone.add( bone );

                prevBone = bone;

        }

        skeleton = new THREE.Skeleton( bones );

        **//创建形状**

        var geometry = new THREE.CylinderGeometry(

                5,                       **// radiusTop**

                5,                       **// radiusBottom**

                sizing.height,           **// height**

                8,                       **// radiusSegments**

                sizing.segmentCount * 3, **// heightSegments**

                true                     **// openEnded**

        );

        **//将形状的每个点和骨骼建立关联,其中skinIndices指定该点由哪些骨骼控制(通过骨骼序号指定),skinWeights指定这些骨骼对该点的控制能力**

        for ( var i = 0; i < geometry.vertices.length; i ++ ) {

                var vertex = geometry.vertices[ i ];

                var y = ( vertex.y + sizing.halfHeight );

                var skinIndex = Math.floor( y / sizing.segmentHeight );

                var skinWeight = ( y % sizing.segmentHeight ) / sizing.segmentHeight;

                geometry.skinIndices.push( new THREE.Vector4( skinIndex, skinIndex + 1, 0, 0 ) );

                geometry.skinWeights.push( new THREE.Vector4( 1 - skinWeight, skinWeight, 0, 0 ) );

        }

        var material = new THREE.MeshPhongMaterial( {

                skinning : true,

                color: 0x156289,

                emissive: 0xa72534,

                side: THREE.DoubleSide,

                shading: THREE.FlatShading,

                wireframe:true

        } );

        mesh = new THREE.SkinnedMesh( geometry,material );

        **//绑定骨架和网格,任务完成**

        mesh.add( bones[ 0 ] );

        mesh.bind( skeleton );

        mesh.scale.multiplyScalar( 1 );

        scene.add( mesh );

        **//SkeletonHelper可以用线显示出骨架,帮助我们调试骨架,可有可无**

        skeletonHelper = new THREE.SkeletonHelper( mesh );

        skeletonHelper.material.linewidth = 2;

        scene.add( skeletonHelper );

}

值得一说的是skinIndices和skinWeights属性,这两个属性来自Geometry类。

skinIndices是一个数组,用来指出当前点受哪些骨骼控制,在threejs中,一个点最多可以受4根骨头控制,所以skinIndices是一个Vector4数组。

skinWeights也是一个Vector4数组,其中的数据和skinIndices数组一一对应,用来指示对应的骨骼影响该点的比重。

比如:

geometry.skinIndices[3] = new THREE.Vector4(1,2,3,0);  

geometry.skinWeights[3] = new THREE.Vector4(0.6,0.3,0.1,0);

上面的代码表示,geometry的第四个点受序号为1,2,3的三根骨骼控制,控制的比重分别是0.6,0.3,0.1。序号为0的骨骼由于控制比重为0,即这个点不受这根骨骼控制。

更新骨架

直接控制每个骨骼的运动,就能控制整个骨骼图形的运动:

angle = 0;

function render(){

    requestAnimationFrame(render);

        angle += 0.1;

        angle = angle%60;

        mesh.skeleton.bones[ 3 ].rotation.z  = angle/180*Math.PI;

        mesh.skeleton.bones[ 1 ].rotation.z  = -angle/180*Math.PI;

        skeletonHelper.update();

    renderer.render(scene,camera);

}

完整例子

threejs骨架动画简单例子

最新的threeJS demo

https://threejs.org/docs/scenes/bones-browser.html

相关文章

  • threejs骨架形状

    骨骼动画 骨骼是什么?骨骼就是一个可以控制其它形状的对象。在threejs中,骨骼(Bone)就是一个空的Obje...

  • 升级版ThreeJS 3D粒子波浪动画

    效果图 升级版demo 2:改变粒子的形状 升级版demo 1:改变粒子大小,颜色 ThreeJS官方示例:htt...

  • 身体之美,美于骨架

    身体的美这个话题,大致可以分为骨架粗细,骨架比例,肌肉含量,脂肪含量,脂肪形状这几个部分讨论。 如果人体是一种建筑...

  • what is Vector3

    线条! Threejs没有单独画点的函数,必须放到一个THREE.Geometry形状中,这个结构中包含一个数组v...

  • 载入字体

    字体 在3d 中也是 被定义成了形状。这些字体素材 threejs已经帮我做了一部分了,我们可以直接拿来用。 首先...

  • 形态学图像处理3

    细化算法 “骨架”是指一幅图像的骨骼部分,描述物体的几何形状和拓扑结构,是重要的图像描绘子之一。计算骨架的过程一般...

  • threejs相机只在水平或垂直方向上平移

    threejs 相机水平和垂直移动,这个功能在threejs提供了很方便的操作方法,在threejs里相机enab...

  • three.js 的网站连接

    three.js 官网 https://threejs.org/ three.js 官方例子 threejs.or...

  • Hello Three.js 之 Hello world!

    Threejs介绍 Demo查看 threejs 最早是 Ricardo Cabello(一个西班牙小伙) 在 G...

  • threejs Light

    WebGL and Threejs: Lightig 什么是webgl和threejs? webgl是一个在浏览器...

网友评论

      本文标题:threejs骨架形状

      本文链接:https://www.haomeiwen.com/subject/bajsuctx.html