npm install
npm run dev
[注意]为了能够运行该示例,您需要进入 /examples/_res/ 并按照说明克隆资源库。这些文件非常大,所以它们被保存在一个单独的 repo 中,以使这个项目尽可能轻量。
[hidecontent type="logged" desc="隐藏内容:登录后可查看"]
此示例是基本样板示例,说明如何从 GLTF2 文件中提取网格和骨骼数据,然后使用自定义 THREE.JS 材质渲染可以摆姿势或动画的网格。
const gltf = await Gltf2.fetch( '../_res/models/nabba/nabba.gltf' );
//--------------------------------
// Setup Armature
const arm = new Armature();
for( let j of gltf.getSkin().joints ){
arm.addBone( j.name, j.parentIndex, j.rotation, j.position, j.scale );
}
//--------------------------------
// Setup Skinning : Matrix
arm.bind( SkinMTX, 0.07 );
const mat = SkinMTXMaterial( 'cyan', arm.getSkinOffsets()[0] );
//--------------------------------
// Load Mesh
const mesh = Gltf2Util.loadMesh( gltf, null, mat );
App.add( mesh );
Matrices
: 典型的蒙皮,最容易在 GLSL 中使用Dual Quaternions
:用于更好地弯曲顶点,通常用于迪士尼等地方。它只能处理旋转和平移,缩放单个骨骼不起作用。DQ Transform
:这个库的实验性和独特性。它使用 Transform 而不是矩阵或 dualquats 来处理转换层次结构和绑定姿势。当数据准备好供着色器使用时,世界空间变换将转换为双四元数以处理旋转和平移以及包含比例的额外缓冲区。这种混合方法的希望是获得 DQ 的质量,同时仍然能够像使用矩阵蒙皮时那样缩放单个骨骼。[/hidecontent]