Three.js案例分析系列1--webgl_animation_cloth 草坪上漂浮的白布

案例地址 webgl_animation_cloth--草坪上随风漂浮的白布

github源代码:

效果图:

案件描述介绍:

右上角显示帧数,左上角是一个控制盘,控制一些参数

居中是一片草坪,远处的草坪皆有雾化的效果,逐渐模糊不清,草坪中央有一个单杠,挂着一块白布,随风飘摇.

为什么选中这个案例:

首先这个案例是运用了雾化,动画,材质,而且效果看着也很自然,不管是远处的草坪,还是近处随风飘摇的衣服,都很让人感觉很舒服.

再看代码,在html中只有300行不到. 下面先贴出带有我注释的代码,在来给大家讲一讲其中的精华和重点.

下面解释一下代码中比较难理解的函数和方法

代码片段1:

function togglePins() {

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

}

代码片段2:

// 设置每一帧运行的函数,右上角的站,场景的渲染,以及 调用cloth的函数进行衣服动画的模拟

function animate() {

requestAnimationFrame( animate );

var time = Date.now();

var windStrength = Math.cos( time / 7000 ) * 20 + 40;

windForce.set( Math.sin( time / 2000 ), Math.cos( time / 3000 ), Math.sin( time / 1000 ) )

windForce.normalize()

windForce.multiplyScalar( windStrength );

simulate( time );

render();

stats.update();

}

代码片段3:

function render() {

var p = cloth.particles;

for ( var i = 0, il = p.length; i < il; i ++ ) {

var v = p[ i ].position;

clothGeometry.attributes.position.setXYZ( i, v.x, v.y, v.z );

}

clothGeometry.attributes.position.needsUpdate = true;

clothGeometry.computeVertexNormals();

sphere.position.copy( ballPosition );

renderer.render( scene, camera );

}

代码片段4:

/*

* Cloth Simulation using a relaxed constraints solver

*/

// Suggested Readings

// Advanced Character Physics by Thomas Jakobsen Character

// http://freespace.virgin.net/hugo.elias/models/m_cloth.htm

// http://en.wikipedia.org/wiki/Cloth_modeling

// http://cg.alexandra.dk/tag/spring-mass-system/

// Real-time Cloth Animation http://www.darwin3d.com/gamedev/articles/col0599.pdf

var DAMPING = 0.03;

var DRAG = 1 - DAMPING;

var MASS = 0.1;

var restDistance = 25;

.......

.......

.......

代码的详细分析,在稍后上传..... 有点急事需要处理,请各位稍等...

JavaScript WebGL

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。