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

最新推荐文章于 2022-06-09 16:08:00 发布

置顶

coder_路远

最新推荐文章于 2022-06-09 16:08:00 发布

阅读量914

点赞数 1

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

本文链接：https://blog.csdn.net/qq_37338983/article/details/102980225

版权

学习交流欢迎加群：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元/天解锁文章

coder_路远

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Three.js用SkinedMesh创建蒙皮 (1)

学习交流欢迎加群：789723098，博主会将一些demo整理共享蒙皮(skin)是3D动画中常用的一种为模型添加骨骼的技术，由于骨骼与模型是相互独立的，为了让骨骼驱动模型性运动，把模型绑定到骨骼上的技术称之为蒙皮。蒙皮被广泛应用于3D动画制作或者3D游戏中的角色对象，很多模型制作软件都有带这一功能，例如3Dmax和blender，而由它们创建出来的动画模型利用unity这样的游戏引擎，...
复制链接

扫一扫