threejs官网中的example第一个案例webgl_animation_cloth

本文深入解析Three.js中的webgl_animation_cloth案例，详细介绍了如何使用Three.js实现布料模拟，包括代码结构、关键函数说明及性能优化技巧。

webgl_animation_cloth

起因
代码详解
参考资料

起因

最近在使用pano2VR，是通过封装的threejs，所以就看了一下threejs。这是研究的第一个案例https://threejs.org/examples/#webgl_animation_cloth

代码详解

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - cloth simulation</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
   
   
				font-family: Monospace;
				background-color: #000;
				color: #000;
				margin: 0px;
				overflow: hidden;
			}

			#info {
   
   
				position: absolute;
				padding: 10px;
				width: 100%;
				text-align: center;
			}

			a {
   
   
				text-decoration: underline;
				cursor: pointer;
			}

		</style>
	</head>

	<body>
		<div id="info">Simple Cloth Simulation<br/>
			Verlet integration with relaxed constraints<br/>
			<a onclick="wind = !wind;">Wind</a> |
			<a onclick="sphere.visible = !sphere.visible;">Ball</a> |
			<a onclick="togglePins();">Pins</a>
		</div>

		<script src="../build/three.js"></script>
		<!--引入一个兼容性检测
			（1）判断canvas兼容。
			（2）判断webgl兼容性。
			（3）在页面添加不兼容提示信息。-->
		<script src="js/Detector.js"></script>
		<!--引入一个使用鼠标观察物体的库,可动态观察、缩放和平移-->
		<script src="js/controls/OrbitControls.js"></script>
		<!--引入一个javascript性能检测库-->
		<script src="js/libs/stats.min.js"></script>
		<!--引入一个使用松弛约束解算器进行布料模拟的库-->
		<script src="js/Cloth.js"></script>

		<script>

			/* testing cloth simulation */

			var pinsFormation = [];
			var pins = [ 6 ];

			pinsFormation.push( pins );

			pins = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
			pinsFormation.push( pins );

			pins = [ 0 ];
			pinsFormation.push( pins );

			pins = []; // cut the rope ;)
			pinsFormation.push( pins );

			pins = [ 0, cloth.w ]; // classic 2 pins
			pinsFormation.push( pins );

			pins = pinsFormation[ 1 ];


			function