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

怼烎@ 2023-05-30 09:09 82阅读 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的代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    	<style>
    		body {
    			margin: 0;
    			overflow: hidden;
    		}
    	</style>
    </head>
    <body>
    	<script type="module">
    		import {
    			Bone,
    			Color,
    			CylinderBufferGeometry,
    			DoubleSide,
    			Float32BufferAttribute,
    			MeshPhongMaterial,
    			PerspectiveCamera,
    			PointLight,
    			Scene,
    			SkinnedMesh,
    			Skeleton,
    			SkeletonHelper,
    			Vector3,
    			Uint16BufferAttribute,
    			WebGLRenderer
    		} from "../build/three.module.js";
    
    		import { GUI } from './../examples/jsm/libs/dat.gui.module.js';
    		import Stats from './../examples/jsm/libs/stats.module.js';
    		import { OrbitControls } from "../examples/jsm/controls/OrbitControls.js";
    
    		let gui, stats, scene, camera, renderer, orbit, lights, mesh, bones, skeletonHelper;
    
    		let state = {
    			animateBones: false,
    			wireframe: false
    		};
    
    		// 初始化场景
    		function initScene() {
    
    			gui = new GUI();
    
    			stats = new Stats();
    			document.body.appendChild( stats.domElement );
    
    			scene = new Scene();
    			scene.background = new Color( 0x444444 );
    
    			camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 200 );
    			camera.position.z = 30;
    			camera.position.y = 30;
    
    			renderer = new WebGLRenderer( { antialias: true } );
    			renderer.setPixelRatio( window.devicePixelRatio );
    			renderer.setSize( window.innerWidth, window.innerHeight );
    			document.body.appendChild( renderer.domElement );
    
    			orbit = new OrbitControls( camera, renderer.domElement );
    			orbit.enableZoom = true;
    			orbit.enableKeys = false;
    
    			lights = [];
    			lights[ 0 ] = new PointLight( 0xffffff, 1, 0 );
    			lights[ 1 ] = new PointLight( 0xffffff, 1, 0 );
    			lights[ 2 ] = new PointLight( 0xffffff, 1, 0 );
    
    			lights[ 0 ].position.set( 0, 200, 0 );
    			lights[ 1 ].position.set( 100, 200, 100 );
    			lights[ 2 ].position.set( - 100, - 200, - 100 );
    
    			scene.add( lights[ 0 ] );
    			scene.add( lights[ 1 ] );
    			scene.add( lights[ 2 ] );
    
    			window.addEventListener( 'resize', function () {
    
    				camera.aspect = window.innerWidth / window.innerHeight;
    				camera.updateProjectionMatrix();
    
    				renderer.setSize( window.innerWidth, window.innerHeight );
    
    			}, false );
    
    			initBones();
    			setupDatGui();
    
    		}
    
    		// 创建几何
    		function createGeometry( sizing ) {
    
    			let geometry = new CylinderBufferGeometry( 5, 5, sizing.height, 20, sizing.segmentCount * 6, true );
    
    			let position = geometry.attributes.position;
    
    			let vertex = new Vector3();
    
    			let skinIndices = []; // 蒙皮索引数组
    			let skinWeights = []; // 蒙皮权值
    
    			for ( let i = 0; i < position.count; i ++ ) {
    
    				vertex.fromBufferAttribute( position, i );
    				let y = ( vertex.y + sizing.halfHeight );
    
    				let skinIndex = Math.floor( y / sizing.segmentHeight );
    				let skinWeight = ( y % sizing.segmentHeight ) / sizing.segmentHeight;
    
    				skinIndices.push( skinIndex, skinIndex + 1, 0, 0 );
    				skinWeights.push( 1 - skinWeight, skinWeight, 0, 0 );
    
    			}
    
    			geometry.addAttribute( 'skinIndex', new Uint16BufferAttribute( skinIndices, 4 ) );
    			geometry.addAttribute( 'skinWeight', new Float32BufferAttribute( skinWeights, 4 ) );
    
    			return geometry;
    
    		}
    
    		// 创建骨骼
    		function createBones( sizing ) {
    
    			bones = [];
    
    			let prevBone = new Bone();
    			bones.push( prevBone );
    			prevBone.position.y = - sizing.halfHeight;
    
    			for ( let i = 0; i < sizing.segmentCount; i ++ ) {
    
    				let bone = new Bone();
    				bone.position.y = sizing.segmentHeight;
    				bones.push( bone );
    				prevBone.add( bone );
    				prevBone = bone;
    
    			}
    
    			return bones;
    
    		}
    
    		// 创建几何
    		function createMesh( geometry, bones ) {
    
    			let material = new MeshPhongMaterial( {
    				skinning: true,
    				color: 0x156289,
    				emissive: 0x072534,
    				side: DoubleSide,
    				flatShading: true
    			} );
    			let mesh = new SkinnedMesh( geometry,	material );
    			let skeleton = new Skeleton( bones );
    
    			mesh.add( bones[ 0 ] ); // 绑定骨骼
    
    			mesh.bind( skeleton ); // 绑定骨架
    
    			skeletonHelper = new SkeletonHelper( mesh );
    			skeletonHelper.material.linewidth = 2;
    			scene.add( skeletonHelper );
    
    			return mesh;
    
    		}
    
    		function setupDatGui() {
    
    			let folder = gui.addFolder( "General Options" );
    
    			folder.add( state, "animateBones" );
    			folder.__controllers[ 0 ].name( "Animate Bones" );
    
    			folder.add( mesh, "pose" );
    			folder.__controllers[ 1 ].name( ".pose()" );
    
    			folder.add( state, "wireframe" ).onChange( ( e ) => {
    
    				mesh.material.wireframe = e;
    
    			} );
    
    			let bones = mesh.skeleton.bones;
    
    			for ( let i = 0; i < bones.length; i ++ ) {
    
    				let bone = bones[ i ];
    
    				folder = gui.addFolder( "Bone " + i );
    
    				folder.add( bone.position, 'x', - 10 + bone.position.x, 10 + bone.position.x );
    				folder.add( bone.position, 'y', - 10 + bone.position.y, 10 + bone.position.y );
    				folder.add( bone.position, 'z', - 10 + bone.position.z, 10 + bone.position.z );
    
    				folder.add( bone.rotation, 'x', - Math.PI * 0.5, Math.PI * 0.5 );
    				folder.add( bone.rotation, 'y', - Math.PI * 0.5, Math.PI * 0.5 );
    				folder.add( bone.rotation, 'z', - Math.PI * 0.5, Math.PI * 0.5 );
    
    				folder.add( bone.scale, 'x', 0, 2 );
    				folder.add( bone.scale, 'y', 0, 2 );
    				folder.add( bone.scale, 'z', 0, 2 );
    
    				folder.__controllers[ 0 ].name( "position.x" );
    				folder.__controllers[ 1 ].name( "position.y" );
    				folder.__controllers[ 2 ].name( "position.z" );
    
    				folder.__controllers[ 3 ].name( "rotation.x" );
    				folder.__controllers[ 4 ].name( "rotation.y" );
    				folder.__controllers[ 5 ].name( "rotation.z" );
    
    				folder.__controllers[ 6 ].name( "scale.x" );
    				folder.__controllers[ 7 ].name( "scale.y" );
    				folder.__controllers[ 8 ].name( "scale.z" );
    
    			}
    
    		}
    
    		// 绑定骨骼
    		function initBones() {
    
    			let segmentHeight = 8;
    			let segmentCount = 4;
    			let height = segmentHeight * segmentCount;
    			let halfHeight = height * 0.5;
    
    			let sizing = {
    				segmentHeight: segmentHeight,
    				segmentCount: segmentCount,
    				height: height,
    				halfHeight: halfHeight
    			};
    
    			let geometry = createGeometry( sizing );
    			let bones = createBones( sizing );
    			mesh = createMesh( geometry, bones );
    
    			mesh.scale.multiplyScalar( 1 );
    			scene.add( mesh );
    
    		}
    
    		function render() {
    
    			requestAnimationFrame( render );
    
    			let time = Date.now() * 0.001;
    
    			//Wiggle the bones
    			if ( state.animateBones ) {
    
    				for ( let i = 0; i < mesh.skeleton.bones.length; i ++ ) {
    
    					mesh.skeleton.bones[ i ].rotation.z = Math.sin( time ) * 2 / mesh.skeleton.bones.length;
    
    				}
    
    			}
    
    			renderer.render( scene, camera );
    
    			stats.update();
    
    		}
    
    		initScene();
    		render();
    
    	</script>
    
    </body>
    </html>

[20191108212635312.gif]: https://img-blog.csdnimg.cn/20191108212635312.gif