Three.js用SkinedMesh创建蒙皮 (1)

怼烎@ 2023-05-30 09:09 151阅读 0赞

学习交流欢迎加群：789723098，博主会将一些demo整理共享

蒙皮(skin)是3D动画中常用的一种为模型添加骨骼的技术，由于骨骼与模型是相互独立的，为了让骨骼驱动模型性运动，把模型绑定到骨骼上的技术称之为蒙皮。蒙皮被广泛应用于3D动画制作或者3D游戏中的角色对象，很多模型制作软件都有带这一功能，例如3Dmax和blender，而由它们创建出来的动画模型利用unity这样的游戏引擎，可以用于各种各样的客户端游戏和动画，这已经有一套相当成熟的体系，而对于Web端来说，复现3D建模软件创建的模型动画也是可行的，可以利用相关的图形引擎（例如Three.js和babylon.js）的模型对应的Loader加载，并将动画信息解析出来，然后执行动画即可。那还有没有一种可能就是，在web端直接使用js编程实现蒙皮，让模型动起来？答案是可以的，Three.js提供了这样一种功能，THREE.SkinedMesh，用于创建蒙皮网格几何，然后通过骨架绑定使几何对象实现动画的效果，这里先来看一下利SkinedMesh做出来的demo的效果:

20191108212635312.gif

下面是这个demo的代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         body {
  8.             margin: 0;
  9.             overflow: hidden;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <script type="module">
  15.         import {
  16.             Bone,
  17.             Color,
  18.             CylinderBufferGeometry,
  19.             DoubleSide,
  20.             Float32BufferAttribute,
  21.             MeshPhongMaterial,
  22.             PerspectiveCamera,
  23.             PointLight,
  24.             Scene,
  25.             SkinnedMesh,
  26.             Skeleton,
  27.             SkeletonHelper,
  28.             Vector3,
  29.             Uint16BufferAttribute,
  30.             WebGLRenderer
  31.         } from "../build/three.module.js";
  33.         import { GUI } from './../examples/jsm/libs/dat.gui.module.js';
  34.         import Stats from './../examples/jsm/libs/stats.module.js';
  35.         import { OrbitControls } from "../examples/jsm/controls/OrbitControls.js";
  37.         let gui, stats, scene, camera, renderer, orbit, lights, mesh, bones, skeletonHelper;
  39.         let state = {
  40.             animateBones: false,
  41.             wireframe: false
  42.         };
  44.         // 初始化场景
  45.         function initScene() {
  47.             gui = new GUI();
  49.             stats = new Stats();
  50.             document.body.appendChild( stats.domElement );
  52.             scene = new Scene();
  53.             scene.background = new Color( 0x444444 );
  55.             camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 200 );
  56.             camera.position.z = 30;
  57.             camera.position.y = 30;
  59.             renderer = new WebGLRenderer( { antialias: true } );
  60.             renderer.setPixelRatio( window.devicePixelRatio );
  61.             renderer.setSize( window.innerWidth, window.innerHeight );
  62.             document.body.appendChild( renderer.domElement );
  64.             orbit = new OrbitControls( camera, renderer.domElement );
  65.             orbit.enableZoom = true;
  66.             orbit.enableKeys = false;
  68.             lights = [];
  69.             lights[ 0 ] = new PointLight( 0xffffff, 1, 0 );
  70.             lights[ 1 ] = new PointLight( 0xffffff, 1, 0 );
  71.             lights[ 2 ] = new PointLight( 0xffffff, 1, 0 );
  73.             lights[ 0 ].position.set( 0, 200, 0 );
  74.             lights[ 1 ].position.set( 100, 200, 100 );
  75.             lights[ 2 ].position.set( - 100, - 200, - 100 );
  77.             scene.add( lights[ 0 ] );
  78.             scene.add( lights[ 1 ] );
  79.             scene.add( lights[ 2 ] );
  81.             window.addEventListener( 'resize', function () {
  83.                 camera.aspect = window.innerWidth / window.innerHeight;
  84.                 camera.updateProjectionMatrix();
  86.                 renderer.setSize( window.innerWidth, window.innerHeight );
  88.             }, false );
  90.             initBones();
  91.             setupDatGui();
  93.         }
  95.         // 创建几何
  96.         function createGeometry( sizing ) {
  98.             let geometry = new CylinderBufferGeometry( 5, 5, sizing.height, 20, sizing.segmentCount * 6, true );
  100.             let position = geometry.attributes.position;
  102.             let vertex = new Vector3();
  104.             let skinIndices = []; // 蒙皮索引数组
  105.             let skinWeights = []; // 蒙皮权值
  107.             for ( let i = 0; i < position.count; i ++ ) {
  109.                 vertex.fromBufferAttribute( position, i );
  110.                 let y = ( vertex.y + sizing.halfHeight );
  112.                 let skinIndex = Math.floor( y / sizing.segmentHeight );
  113.                 let skinWeight = ( y % sizing.segmentHeight ) / sizing.segmentHeight;
  115.                 skinIndices.push( skinIndex, skinIndex + 1, 0, 0 );
  116.                 skinWeights.push( 1 - skinWeight, skinWeight, 0, 0 );
  118.             }
  120.             geometry.addAttribute( 'skinIndex', new Uint16BufferAttribute( skinIndices, 4 ) );
  121.             geometry.addAttribute( 'skinWeight', new Float32BufferAttribute( skinWeights, 4 ) );
  123.             return geometry;
  125.         }
  127.         // 创建骨骼
  128.         function createBones( sizing ) {
  130.             bones = [];
  132.             let prevBone = new Bone();
  133.             bones.push( prevBone );
  134.             prevBone.position.y = - sizing.halfHeight;
  136.             for ( let i = 0; i < sizing.segmentCount; i ++ ) {
  138.                 let bone = new Bone();
  139.                 bone.position.y = sizing.segmentHeight;
  140.                 bones.push( bone );
  141.                 prevBone.add( bone );
  142.                 prevBone = bone;
  144.             }
  146.             return bones;
  148.         }
  150.         // 创建几何
  151.         function createMesh( geometry, bones ) {
  153.             let material = new MeshPhongMaterial( {
  154.                 skinning: true,
  155.                 color: 0x156289,
  156.                 emissive: 0x072534,
  157.                 side: DoubleSide,
  158.                 flatShading: true
  159.             } );
  160.             let mesh = new SkinnedMesh( geometry,    material );
  161.             let skeleton = new Skeleton( bones );
  163.             mesh.add( bones[ 0 ] ); // 绑定骨骼
  165.             mesh.bind( skeleton ); // 绑定骨架
  167.             skeletonHelper = new SkeletonHelper( mesh );
  168.             skeletonHelper.material.linewidth = 2;
  169.             scene.add( skeletonHelper );
  171.             return mesh;
  173.         }
  175.         function setupDatGui() {
  177.             let folder = gui.addFolder( "General Options" );
  179.             folder.add( state, "animateBones" );
  180.             folder.__controllers[ 0 ].name( "Animate Bones" );
  182.             folder.add( mesh, "pose" );
  183.             folder.__controllers[ 1 ].name( ".pose()" );
  185.             folder.add( state, "wireframe" ).onChange( ( e ) => {
  187.                 mesh.material.wireframe = e;
  189.             } );
  191.             let bones = mesh.skeleton.bones;
  193.             for ( let i = 0; i < bones.length; i ++ ) {
  195.                 let bone = bones[ i ];
  197.                 folder = gui.addFolder( "Bone " + i );
  199.                 folder.add( bone.position, 'x', - 10 + bone.position.x, 10 + bone.position.x );
  200.                 folder.add( bone.position, 'y', - 10 + bone.position.y, 10 + bone.position.y );
  201.                 folder.add( bone.position, 'z', - 10 + bone.position.z, 10 + bone.position.z );
  203.                 folder.add( bone.rotation, 'x', - Math.PI * 0.5, Math.PI * 0.5 );
  204.                 folder.add( bone.rotation, 'y', - Math.PI * 0.5, Math.PI * 0.5 );
  205.                 folder.add( bone.rotation, 'z', - Math.PI * 0.5, Math.PI * 0.5 );
  207.                 folder.add( bone.scale, 'x', 0, 2 );
  208.                 folder.add( bone.scale, 'y', 0, 2 );
  209.                 folder.add( bone.scale, 'z', 0, 2 );
  211.                 folder.__controllers[ 0 ].name( "position.x" );
  212.                 folder.__controllers[ 1 ].name( "position.y" );
  213.                 folder.__controllers[ 2 ].name( "position.z" );
  215.                 folder.__controllers[ 3 ].name( "rotation.x" );
  216.                 folder.__controllers[ 4 ].name( "rotation.y" );
  217.                 folder.__controllers[ 5 ].name( "rotation.z" );
  219.                 folder.__controllers[ 6 ].name( "scale.x" );
  220.                 folder.__controllers[ 7 ].name( "scale.y" );
  221.                 folder.__controllers[ 8 ].name( "scale.z" );
  223.             }
  225.         }
  227.         // 绑定骨骼
  228.         function initBones() {
  230.             let segmentHeight = 8;
  231.             let segmentCount = 4;
  232.             let height = segmentHeight * segmentCount;
  233.             let halfHeight = height * 0.5;
  235.             let sizing = {
  236.                 segmentHeight: segmentHeight,
  237.                 segmentCount: segmentCount,
  238.                 height: height,
  239.                 halfHeight: halfHeight
  240.             };
  242.             let geometry = createGeometry( sizing );
  243.             let bones = createBones( sizing );
  244.             mesh = createMesh( geometry, bones );
  246.             mesh.scale.multiplyScalar( 1 );
  247.             scene.add( mesh );
  249.         }
  251.         function render() {
  253.             requestAnimationFrame( render );
  255.             let time = Date.now() * 0.001;
  257.             //Wiggle the bones
  258.             if ( state.animateBones ) {
  260.                 for ( let i = 0; i < mesh.skeleton.bones.length; i ++ ) {
  262.                     mesh.skeleton.bones[ i ].rotation.z = Math.sin( time ) * 2 / mesh.skeleton.bones.length;
  264.                 }
  266.             }
  268.             renderer.render( scene, camera );
  270.             stats.update();
  272.         }
  274.         initScene();
  275.         render();
  277.     </script>
  279. </body>
  280. </html>

发表评论

表情：
评论列表 （有 0 条评论，151人围观）

还没有评论，来说两句吧...

相关阅读

    相关 threejs

    Three.js是一个基于WebGL技术的JavaScript库，它可以简化3D图形的创建和展示。使用Three.js，你可以在网页上创建复杂的3D场景、模型和动画。 Thr

    偏执的太偏执、偏执的太偏执、/ 0 赞/ 151 阅读

    相关 ThreeJS环境搭建

    ThreeJS介绍 ThreeJS是一款基于WebGL封装的在浏览器中运行的 3D 库，你可以用它来创造你所需要的一系列3D场景，如最近比较火的数字孪生、元宇宙可视化等等

    清疚清疚/ 0 赞/ 249 阅读

    相关 ThreeJs创建天空盒

    ThreeJS创建天空盒比较简单，可以理解成给一个立方体贴图，所以需要给六个面分别贴图，6张图构建整个场景的图片。这六张图分别是朝前的（posz）、朝后的（negz）、朝上的（

    墨蓝墨蓝/ 0 赞/ 113 阅读