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

最新推荐文章于 2025-03-25 13:39:29 发布
最新推荐文章于 2025-03-25 13:39:29 发布
阅读量2.9k 收藏 4
点赞数 1
文章标签： webgl js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xixi_csdn/article/details/104817346
版权

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 togglePins() {

				pins = pinsFormation[ ~~ ( Math.random() * pinsFormation.length ) ];

			}
			//这是在使用Detector，检测兼容性；如果不兼容，会提示库代码里面getWebGLErrorMessage方法里面的英文提示内容
			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

			var container, stats;
			var camera, scene, renderer;

			var clothGeometry;
			var sphere;
			var object;

			init();
			animate();

			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				// scene

				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0xcce0ff );
				// 设置场景的雾化距离(第一次参数是雾的颜色,第二个数值表示雾从哪个距离开始显示默认1,第三个表示雾的结束位置默认1000)
				scene.fog = new THREE.Fog( 0xcce0ff, 500, 10000 );

				// camera
				//透视相机：构造一个视锥体垂直视野角度为30,视锥体长宽比为window.innerWidth / window.innerHeight,视锥体近端面为1,远端面为10000的透视摄像机
				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
				camera.position.set( 1000, 50, 1500 );

				// lights

				var light, materials;
				// 为场景添加一个环境光,均匀地洒在场景上
				scene.add( new THREE.AmbientLight( 0x666666 ) );
				// 创建一个平行光线,可以产生投影,第一个参数表示光线的颜色,16进制默认为白色,第二个表示光的强度,默认1
				light = new THREE.DirectionalLight( 0xdfebff, 1 );
				// 设置光线从(50,200,100) 到 (0,0,0) 沿着这条线照射
				light.position.set( 50, 200, 100 );
				// 将光线的向量与所传入的标量1.3进行相乘。
				light.position.multiplyScalar( 1.3 );
				//castShadow 如果设置为 true 该平行光会产生动态阴影。 警告: 这样做的代价比较高而且需要一直调整到阴影看起来正确
				light.castShadow = true;
				// 设置阴影贴图的宽度和高度
				light.shadow.mapSize.width = 1024;
				light.shadow.mapSize.height = 1024;

				var d = 300;
				// 在光的世界里。这用于生成场景的深度图;从光的角度来看，其他物体背后的物体将处于阴影中。
				light.shadow.camera.left = - d;
				light.shadow.camera.right = d;
				light.shadow.camera.top = d;
				light.shadow.camera.bottom = - d;

				light.shadow.camera.far = 1000;

				scene.add( light );

				// cloth material
				// 创建一个texture加载器,内部可以加载图片
				var loader = new THREE.TextureLoader();
				var clothTexture = loader.load( 'textures/patterns/circuit_pattern.png' );
				/**
				 * anisotropy 沿着轴，通过具有最高纹素密度的像素的样本数。 默认情况下，这个值为1。
				 * 设置一个较高的值将会产生比基本的mipmap更清晰的效果，代价是需要使用更多纹理样本
				*/
				clothTexture.anisotropy = 16;
				//MeshLambertMaterial是一种高级材质，可以用来创建暗淡的并不光亮的表面
				var clothMaterial = new THREE.MeshLambertMaterial( {
					map: clothTexture,			//颜色贴图  类型为Texture
					side: THREE.DoubleSide,		//定义将要渲染哪一面 - 正面，背面或两者,LeftSide单侧
					alphaTest: 0.5,				//透明度 设置运行alphaTest时要使用的alpha值。如果不透明度低于此值，则不会渲染材质。默认值为0。
					// color:0x00ffff            可以设置材质的颜色，即使是加载的图片也能改变颜色
				} );
 
				// cloth geometry
				/**
				 * 创造几何体，根据传入的公式
				 * clothFunction该函数以u、v值作为参数定义每个顶点的位置。需要返回three.vector3的值，u和v的范围是0-1，此方法在clothjs中
				 * cloth.w	该属性定义u值应该分成多少份
				 * cloth.h	该属性定义v值应该分成多少份
				*/
				clothGeometry = new THREE.ParametricGeometry( clothFunction, cloth.w, cloth.h );

				// cloth mesh
				/**
				 * 属性：position	rotation	scale	translateX/Y/Z
				 * 前三种属性设置有三种方式
				 * 		直接设置相关坐标轴单个轴设置	cube.position.x = 5;
				 * 		一次性设置x，y和z坐标的值（下面采用的这种方式）		cube.position.set(5,6,7);
				 * 		因为它们都是一个THREE.Vector3对象，所以我们可以直接赋值一个新的对象给它	cube.position = new THREE.Vector3(5,6,7);
				*/
				object = new THREE.Mesh( clothGeometry, clothMaterial );//这是常规写法，创建网格，需要一个几何体和一个或多个材质
				object.position.set( 0, 0, 0 );
				object.castShadow = true;
				scene.add( object );
				//这个材质不受光线和材质属性的影响，主要由与物体离相机的距离决定 很容易结合其他材质产生阴影效果；其参数类型与MeshLambertMaterial相似
				object.customDepthMaterial = new THREE.MeshDepthMaterial( {

					depthPacking: THREE.RGBADepthPacking,
					map: clothTexture,							
					alphaTest: 0.5

				} );

				// sphere
				//创建球体，至于为啥不用ParametricGeometry这种创建几何体的方式创建，可以参考https://www.jianshu.com/p/2e66b7db5549
				var ballGeo = new THREE.SphereBufferGeometry( ballSize, 32, 16 );
				var ballMaterial = new THREE.MeshLambertMaterial();

				sphere = new THREE.Mesh( ballGeo, ballMaterial );
				sphere.castShadow = true;
				sphere.receiveShadow = true;
				scene.add( sphere );

				// ground
				//使用草坪图片制作材质覆盖到场景中，与布料的创建一致
				var groundTexture = loader.load( 'textures/terrain/grasslight-big.jpg' );
				//贴面的重复方式
				groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
				groundTexture.repeat.set( 25, 25 );
				groundTexture.anisotropy = 16;

				var groundMaterial = new THREE.MeshLambertMaterial( { map: groundTexture } );
				//创建平面
				var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 20000, 20000 ), groundMaterial );
				mesh.position.y = - 250;
				mesh.rotation.x = - Math.PI / 2;
				mesh.receiveShadow = true;
				scene.add( mesh );

				// poles
				//创建长方体，挂布料的杆子；下面的坐标都是以杆的中心点计算的
				var poleGeo = new THREE.BoxBufferGeometry( 5, 375, 5 );
				var poleMat = new THREE.MeshLambertMaterial();

				//这是左右杆
				var mesh = new THREE.Mesh( poleGeo, poleMat );
				//这是杆中心点坐标
				mesh.position.x = - 125;
				mesh.position.y = - 62;
				mesh.receiveShadow = true;
				mesh.castShadow = true;
				scene.add( mesh );

				var mesh = new THREE.Mesh( poleGeo, poleMat );
				mesh.position.x = 125;
				mesh.position.y = - 62;
				mesh.receiveShadow = true;
				mesh.castShadow = true;
				scene.add( mesh );
				//横杆
				var mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 255, 5, 5 ), poleMat );
				mesh.position.y = - 250 + ( 750 / 2 );
				mesh.position.x = 0;
				mesh.receiveShadow = true;
				mesh.castShadow = true;
				scene.add( mesh );
				//这是左右杆下面的小长方体
				var gg = new THREE.BoxBufferGeometry( 10, 10, 10 );
				var mesh = new THREE.Mesh( gg, poleMat );
				mesh.position.y = - 250;
				mesh.position.x = 125;
				mesh.receiveShadow = true;
				mesh.castShadow = true;
				scene.add( mesh );

				var mesh = new THREE.Mesh( gg, poleMat );
				mesh.position.y = - 250;
				mesh.position.x = - 125;
				mesh.receiveShadow = true;
				mesh.castShadow = true;
				scene.add( mesh );

				//这是坐标轴的起点位置，没加投影，只是看看坐标轴而已
				// var mesh = new THREE.Mesh( gg, poleMat );
				// mesh.position.y = 0;
				// mesh.position.x = 0;
				// scene.add( mesh );

				// renderer：具体查看http://www.manongjc.com/article/25286.html
				//WebGLRenderer具体的一些参数可以看这个文章，https://blog.youkuaiyun.com/weixin_41111068/article/details/82491985
				renderer = new THREE.WebGLRenderer( { antialias: true } );//开启反锯齿，默认是false
				//自动帮你根据设备dpr设置canvas的实际物理像素以及视口的大小，你也可以输入更大的dpr以获得“HD-DPI”品质的渲染
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );

				container.appendChild( renderer.domElement );
				//所有纹理和颜色都是预乘伽马
				renderer.gammaInput = true;
				//所有纹理和颜色需要以预乘伽马输出
				renderer.gammaOutput = true;
				//阴影贴图的引用，默认值为false
				renderer.shadowMap.enabled = true;

				// controls：具体可见https://blog.youkuaiyun.com/objdreammylife/article/details/81486018
				//这里初始化了OrbitControlsjs用于对场景的操作
				var controls = new THREE.OrbitControls( camera, renderer.domElement );
				controls.maxPolarAngle = Math.PI * 0.5;		//最大仰视角和俯视角
				//相机移动距离
				controls.minDistance = 1000;				
				controls.maxDistance = 5000;

				// performance monitor
				//右上角帧数
				stats = new Stats();
				container.appendChild( stats.dom );

				//监听页面变化，更新相机投影

				window.addEventListener( 'resize', onWindowResize, false );
				//球体不显示
				sphere.visible = ! true;

			}

			//

			function onWindowResize() {
				// 更新相机投影矩阵
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			//

			function animate() {
				//执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画
				requestAnimationFrame( animate );

				var time = Date.now();

				var windStrength = Math.cos( time / 7000 ) * 20 + 40;
				//定义在clothjs中
				windForce.set( Math.sin( time / 2000 ), Math.cos( time / 3000 ), Math.sin( time / 1000 ) )
				//方法在threejs中
				windForce.normalize()
				windForce.multiplyScalar( windStrength );
				//定义在clothjs中
				simulate( time );
				render();
				stats.update();

			}

			function render() {
				//clothjs中创建
				var p = cloth.particles;

				for ( var i = 0, il = p.length; i < il; i ++ ) {
					//这是几何图形
					clothGeometry.vertices[ i ].copy( p[ i ].position );

				}

				clothGeometry.verticesNeedUpdate = true;

				clothGeometry.computeFaceNormals();
				clothGeometry.computeVertexNormals();

				sphere.position.copy( ballPosition );

				renderer.render( scene, camera );

			}

		</script>
	</body>
</html>

参考资料

查看了很多文章，有的直接在代码中直接注释了文章内容

???xixi
关注
three.js官方案例（animation / skinning / morph）webgl_animation_skinning_morph.html学习记录
hemiaoyuan1989的专栏
07-13 566
基于morphTarget.name属性的morphTargets字典。默认情况下是未定义的，但是会被。
three.js官方案例（animation / keyframes）webgl_animation_keyframes.html学习
hemiaoyuan1989的专栏
06-01 1144
这允许不同的级别 的模糊，可根据材质粗糙度快速访问。不像 传统的MIPMAP链，它只下到LOD_MIN级别（上图）， 然后在同一LOD_MIN创建额外甚至更多过滤的“MIP” 分辨率，与更高的粗糙度水平相关。的粗糙度取决于 提供的纹理的大小。如果您的渲染尺寸较小，或者 闪亮的部分有很多曲率，你也许仍然可以逃脱 具有较小的纹理尺寸。- （可选）指定在PMREM生成之前应用于场景的以弧度为单位的模糊半径。- （可选）近平面值，默认值为0.1。- （可选）远平面值。
ThreeJs官方案例源码
07-20
ThreeJs官方案例源码
ThreeJS 官方案例学习（webgl_animation_keyframes）
木木开发屋的博客
05-24 394
【代码】ThreeJS 官方案例学习（webgl_animation_keyframes）
数字孪生开发之 Three.js 插件资源库（9）
最新发布
03-25 372
本期为大家分享Three.js开发中的相关资源代码，希望能对正在探索或从事这一领域的朋友们有所帮助。对于之前分享的插件，可以关注公众号，后台回复相关信息（如“threejs加载3dtiles的插件”、“threejs描边功能插件”等）即可获取相应信息。THREE.Terrain是一个用于Three.js 3D图形库的程序生成地形引擎。该引擎支持多种地形生成方法，如Perlin噪声和等，用户可以生成、导出和导入高度图。它还提供了动态地形材质的生成功能，允许根据地形的高度和位置自动纹理化地形。
threejs官方案例
03-22
包含各种模型和动画加载，以及其他特效案例，功能案例。 资源来自开源github网站，故不设置积分。 国内浏览github极其慢，经常由于网络原因下载失败，故将此资源放置在优快云，方便大家学习，发扬IT开源共享精神，共同促进IT进步。
ThreeJS官方案例学习(1)webgl - animation - keyframes
梦里蓝天
03-24 304
ThreeJS官方案例学习(1)webgl - animation - keyframes。
three.js官方案例（animation / skinning / ik）webgl_animation_skinning_ik.html学习记录
hemiaoyuan1989的专栏
07-13 1155
target、effector 和 link-index 是 .sculptor.bones 中的索引整数。骨骼关系从父级到子级的顺序应为“links[ n ]、 links[ n - 1 ]、...、 links[ 0 ]、effector”。CCDIKSolver 用 CCD 算法解决逆运动学问题。CCDIKSolver 设计用于与。用于 CCDIKSolver 解决 IK 问题。— 指定 IK 参数的对象。
three.jss官方案例（animation / skinning / blending）webgl_animation_skinning_blending.html学习记录
hemiaoyuan1989的专栏
07-12 207
【代码】three.jss官方案例（animation / skinning / blending）webgl_animation_skinning_blending.html学习记录。
【01】基于 Three.js 的 WebGL 动画代码解析（webgl_animation_keyframes.html)
Jiaberrr的博客
12-23 1143
在本文中，我们将深入解析一段使用 Three.js 实现 WebGL 动画相关功能的代码。这段代码涵盖了从场景搭建、模型加载到动画控制以及页面响应式处理等多个方面的内容，下面让我们逐步来看。
Three.js官方案例webgl_materials_car学习
hemiaoyuan1989的专栏
05-16 1632
创建一个文件夹StudyThreejs，把解压后的three.js-r163放到里面，找到文件webgl_materials_car.html进行学习。针对car.js:就是看着webgl_materials_car.html里的代码抄写一遍加深记忆，部分地方有自己的修改，比如记载改为了异步加载。本机搭建个Apache的服务器，把解压后的文件夹放到WWW文件夹下，运行本机服务器，就可以本地产看文档和运行案例了。效果是不是有了，接下来添加玻璃和细节材质，看后面的car.js的全部脚本。找到后点击安装就行。
Three.js案例分析系列1--webgl_animation_cloth 草坪上漂浮的白布
知无涯
07-20 3784
案例地址webgl_animation_cloth--草坪上随风漂浮的白布 github源代码: 效果图: 案件描述介绍: 右上角显示帧数,左上角是一个控制盘,控制一些参数 居中是一片草坪,远处的草坪皆有雾化的效果,逐渐模糊不清,草坪中央有一个单杠,挂着一块白布,随风飘摇. 为什么选中这个案例: 首先这个案例是运用了雾化,动画,材质,而且效果看着也很自然,不管是远处的草坪...
Three.js开发指南在线案例演示
X01动力装甲的专栏
04-16 4401
Three.js开发指南在线案例演示 Learning Three.js(Three.js 开发指南)第二版的案例在线演示，代码是基于r69版本的（目前r103版本）。 案例列表经过简单的改造，改成类似three官网的案例那种样式，觉得那是一个完美的展示案例的方式，左边列表右边预览。 并生成了pages,可以直接在网站中打开预览。 注意： chapter-09：16-animation-from...
对threejs官方案例webgl_kinect的思考
srk19960903的博客
05-17 3399
在上次按照自己的想法使用粒子系统对图片进行处理之后，我最近又看到了官方案例中，使用粒子使视频呈现出3D效果，既然是官方案例就需要仔细研究一下。 这是该案例的实现效果：可以看到屏幕中由粒子构成了一个人在整理桌面的东西，效果十分的酷炫，大家可以在官方案例中看到动态的效果。 官方案例地址：https://threejs.org/examples/#webgl_kinect 下面是我自己对于
three.js官网的第一个案列代码解读
weixin_50379372的博客
07-06 614
three.js官网的第一个案列代码解读three.js官网的第一个案列代码解读three.js官网的第一个案列代码解读three.js官网的第一个案列代码解读three.js官网的第一个案列代码解读
three.js加载全景hdr（官网案例）
yunbabac的博客
01-03 726
【代码】three.js加载全景hdr（官网案例）
Threejs 官网 - 入门指南（Getting Started）
太阳火神的美丽人生
07-27 3850
Threejs 官网 - 入门指南（Getting Started）
three.js官方案例webgl_loader_fbx.html学习
hemiaoyuan1989的专栏
05-27 1410
先创建必要的场景scene,相机camera，渲染器webrenderer，控制器controls和灯光DirectionalLight. 性能检测stars， 地面， 网格。-（可选）一个表示颜色的 Color 的实例、字符串或数字，默认为一个白色（0xffffff）的。-（可选）一个表示颜色的 Color 的实例、字符串或数字，默认为一个白色（0xffffff）的。针对后缀的anim的动画文件，目前是需要这么解决。这里模型加载进去小，所以进行了放大100。加上这个光后，模型明显变量了。
ThreeJS 官方案例学习（webgl_clipping）
木木开发屋的博客
05-30 317
【代码】ThreeJS 官方案例学习（webgl_clipping）
请帮我把three.js的r102版本中的example中的webgl_gpu_particle_system.html改写成能在vue项目中最新three。js版本也能用的代码
04-27
好的，我会尽力帮你完成这个任务。首先，你需要将原来的three.js库替换为最新版本的three.js库。然后，你需要在Vue项目中引入three.js库，并创建一个Vue组件来包含你的粒子系统。 下面是将webgl_gpu_particle_system.html改写成适用于Vue项目的代码的步骤： 1. 引入three.js库 在Vue项目中，你需要先引入最新版本的three.js库。你可以使用npm安装three.js，然后在你的Vue组件中使用import语句引入： ``` import * as THREE from 'three'; ``` 2. 创建Vue组件 你需要创建一个Vue组件来包含你的粒子系统。你可以在Vue单文件组件中定义这个组件。在这个组件中，你需要定义一个canvas元素来渲染你的粒子系统： ``` <template> <div> <canvas ref="canvas"></canvas> </div> </template> <script> export default { name: 'ParticleSystem', mounted() { this.init(); }, methods: { init() { // 在这里创建你的粒子系统 } } } </script> ``` 3. 创建粒子系统 在init方法中，你需要创建你的粒子系统。你可以使用原来的代码来创建你的粒子系统，但需要将一些API调用更新为最新版本的three.js库。 以下是一个示例代码，用于创建一个简单的粒子系统： ``` init() { const canvas = this.$refs.canvas; const renderer = new THREE.WebGLRenderer({ canvas }); const camera = new THREE.PerspectiveCamera(45, canvas.clientWidth / canvas.clientHeight, 1, 1000); camera.position.set(0, 0, 500); const scene = new THREE.Scene(); const particles = new THREE.BufferGeometry(); const positions = new Float32Array(1000 * 3); for (let i = 0; i < 1000; i++) { positions[i * 3] = (Math.random() - 0.5) * 1000; positions[i * 3 + 1] = (Math.random() - 0.5) * 1000; positions[i * 3 + 2] = (Math.random() - 0.5) * 1000; } particles.addAttribute('position', new THREE.BufferAttribute(positions, 3)); const material = new THREE.PointsMaterial({ color: 0xffffff }); const particleSystem = new THREE.Points(particles, material); scene.add(particleSystem); function animate() { requestAnimationFrame(animate); particleSystem.rotation.x += 0.001; particleSystem.rotation.y += 0.001; renderer.render(scene, camera); } animate(); } ``` 这个示例代码创建了一个包含1000个随机位置的粒子系统，并在每一帧中旋转这个粒子系统。 注意，这个示例代码可能需要根据你的具体需求进行修改。 希望这个回答能够帮助你！
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值