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

最新推荐文章于 2024-11-19 10:56:30 发布

置顶

coder_路远

最新推荐文章于 2024-11-19 10:56:30 发布

阅读量997

点赞数 1

分类专栏： Three.js开发 three.js进阶文章标签： Three.js 创建SkinenMesh Three.js绑定骨骼 Three.js蒙皮 Three.js骨骼动画

本文链接：https://blog.youkuaiyun.com/qq_37338983/article/details/102980225

版权

本文介绍了Three.js中SkinnedMesh的概念，它是3D动画中用于骨骼驱动模型运动的关键技术。通过将模型绑定到骨骼上，可以实现蒙皮效果，常见于3D游戏和动画。Three.js提供了THREE.SkinnedMesh来创建蒙皮网格几何，并通过骨架绑定实现动画效果。文章还提及了3D建模软件如3Dmax和blender以及游戏引擎unity在处理蒙皮动画方面的应用，并暗示在Web端使用js编程也能实现类似功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

下面是这个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";

最低0.47元/天解锁文章