HTML5+WebGLThree.js实现超逼真的流动水流动画效果源码.zip

共6个文件

js：5个

html：1个

版权申诉

138 浏览量 2022-11-03 23:56:46 上传评论收藏 140KB ZIP 举报

HTML5是一种先进的网页标记语言，它极大地扩展了网页的交互性和多媒体内容支持。在本案例中，"HTML5+WebGL Three.js实现超逼真的流动水流动画效果源码.zip"是一个利用HTML5的先进技术来创建高度逼真、动态的水流动画的项目。WebGL是一种基于OpenGL标准的JavaScript API，允许在浏览器中进行硬件加速的3D图形渲染，无需插件支持。Three.js是基于WebGL的最流行的JavaScript库之一，它简化了3D建模和动画的复杂性，使得开发者可以轻松地在网页上创建复杂的3D场景。 Three.js库提供了许多功能，包括几何形状创建、材质、光照、相机控制以及动画系统。在这个项目中，开发人员可能利用Three.js的几何形状功能来构建水面的3D模型，如使用多个平面或曲面来模拟水面。他们可能会使用网格的顶点动画来模拟波浪起伏的效果，通过修改每个顶点的位置，让水面看起来像是在流动。 WebGL允许直接对GPU进行编程，因此可以实现高性能的图形渲染。在水流动画中，开发者可能使用时间作为输入，计算每个帧中每个顶点的新位置，以创建连续的、平滑的水流运动。此外，他们还可能应用纹理映射，使用一个包含波动模式的图像来增加水面的视觉细节，使其看起来更真实。为了实现更逼真的效果，开发人员可能会添加光照和阴影。Three.js提供了各种光照模型，如点光源、方向光和聚光灯，这些都可以用来模拟环境中的光线对水面的影响。阴影则可以增强物体间的深度感知，使动画看起来更加立体。此外，为了使动画更加动态，开发人员可能会集成物理引擎或者自定义算法来模拟水的表面张力、重力和阻力等物理特性。这通常涉及到数值积分和物理方程的求解，以确保水流行为符合现实世界的物理规则。这个项目展示了HTML5、WebGL和Three.js的强大组合，为用户提供了在网页上体验逼真3D水流动画的能力。通过深入学习和理解这个源代码，开发者可以提升自己的3D图形编程技能，同时也能了解到如何将高级视觉效果融入到网页设计中，从而提高用户体验。无论是游戏开发、数据可视化还是艺术表现，这样的技术都具有广泛的应用前景。

资源推荐

资源详情

资源评论

收起资源包目录

HTML5+WebGL Three.js实现超逼真的流动水流动画效果源码.zip （6个子文件）

132686865910833865

index.html 12KB

bas.min.1.1.2.js 37KB

GPUComputationRenderer.js 10KB

OrbitControls-2.js 24KB

SimplexNoise.js 13KB

three.min.js 499KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>WebGL Three.js 流动的水</title> <style> body { margin: 0; overflow: hidden; background: #000000; cursor: move; font-family: sans-serif; } </style> </head> <body> <div id="three-container"></div> <script id="heightMapFragmentShader" type="x-shader/x-fragment"> #include <common> uniform vec2 mousePos; uniform float mouseSize; uniform float viscosityConstant; #define deltaTime (1.0 / 60.0) #define GRAVITY_CONSTANT (resolution.x * deltaTime * 3.0) const vec2 ONE = vec2(1.0); void main() { vec2 cellSize = 1.0 / resolution.xy; vec2 uv = gl_FragCoord.xy * cellSize; // heightmapValue.x == height // heightmapValue.y == velocity // heightmapValue.z, heightmapValue.w not used vec4 heightMapValue = texture2D( heightMap, uv ); // Get neighbours vec4 north = texture2D(heightMap, mod(uv + vec2(0.0, cellSize.y), ONE)); vec4 south = texture2D(heightMap, mod(uv + vec2(0.0, -cellSize.y), ONE)); vec4 east = texture2D(heightMap, uv + vec2(cellSize.x, 0.0)); vec4 west = texture2D(heightMap, uv + vec2(-cellSize.x, 0.0)); float sump = north.x + south.x + east.x + west.x - 4.0 * heightMapValue.x; float accel = sump * GRAVITY_CONSTANT; // Dynamics heightMapValue.y += accel; heightMapValue.x += heightMapValue.y * deltaTime; // Viscosity heightMapValue.x += sump * viscosityConstant; // Mouse influence float mousePhase = clamp(length((uv - vec2(0.5)) * BOUNDS - vec2(mousePos.x, -mousePos.y)) * PI / mouseSize, 0.0, PI); heightMapValue.x += cos(mousePhase) + 1.0; gl_FragColor = heightMapValue; } </script> <script src="js/three.min.js"></script> <script src="js/bas.min.1.1.2.js"></script> <script src="js/OrbitControls-2.js"></script> <script>function THREERoot(params) { // defaults params = Object.assign({ container:'#three-container', fov:60, zNear:1, zFar:10000, createCameraControls: true, autoStart: true, pixelRatio: window.devicePixelRatio, antialias: (window.devicePixelRatio === 1), alpha: false }, params); // maps and arrays this.updateCallbacks = []; this.resizeCallbacks = []; this.objects = {}; // renderer this.renderer = new THREE.WebGLRenderer({ antialias: params.antialias, alpha: params.alpha }); this.renderer.setPixelRatio(params.pixelRatio); // container this.container = (typeof params.container === 'string') ? document.querySelector(params.container) : params.container; this.container.appendChild(this.renderer.domElement); // camera this.camera = new THREE.PerspectiveCamera( params.fov, window.innerWidth / window.innerHeight, params.zNear, params.zFar ); // scene this.scene = new THREE.Scene(); // resize handling this.resize = this.resize.bind(this); this.resize(); window.addEventListener('resize', this.resize, false); // tick / update / render this.tick = this.tick.bind(this); params.autoStart && this.tick(); // optional camera controls params.createCameraControls && this.createOrbitControls(); } THREERoot.prototype = { createOrbitControls: function() { this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement); this.addUpdateCallback(this.controls.update.bind(this.controls)); }, start: function() { this.tick(); }, addUpdateCallback: function(callback) { this.updateCallbacks.push(callback); }, addResizeCallback: function(callback) { this.resizeCallbacks.push(callback); }, add: function(object, key) { key && (this.objects[key] = object); this.scene.add(object); }, addTo: function(object, parentKey, key) { key && (this.objects[key] = object); this.get(parentKey).add(object); }, get: function(key) { return this.objects[key]; }, remove: function(o) { var object; if (typeof o === 'string') { object = this.objects[o]; } else { object = o; } if (object) { object.parent.remove(object); delete this.objects[o]; } }, tick: function() { this.update(); this.render(); requestAnimationFrame(this.tick); }, update: function() { this.updateCallbacks.forEach(function(callback) {callback()}); }, render: function() { this.renderer.render(this.scene, this.camera); }, resize: function() { var width = window.innerWidth; var height = window.innerHeight; this.camera.aspect = width / height; this.camera.updateProjectionMatrix(); this.renderer.setSize(width, height); this.resizeCallbacks.forEach(function(callback) {callback()}); }, initPostProcessing:function(passes) { var size = this.renderer.getSize(); var pixelRatio = this.renderer.getPixelRatio(); size.width *= pixelRatio; size.height *= pixelRatio; var composer = this.composer = new THREE.EffectComposer(this.renderer, new THREE.WebGLRenderTarget(size.width, size.height, { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBuffer: false })); var renderPass = new THREE.RenderPass(this.scene, this.camera); this.composer.addPass(renderPass); for (var i = 0; i < passes.length; i++) { var pass = passes[i]; pass.renderToScreen = (i === passes.length - 1); this.composer.addPass(pass); } this.renderer.autoClear = false; this.render = function() { this.renderer.clear(); this.composer.render(); }.bind(this); this.addResizeCallback(function() { var width = window.innerWidth; var height = window.innerHeight; composer.setSize(width * pixelRatio, height * pixelRatio); }.bind(this)); } }; </script> <script src="js/GPUComputationRenderer.js"></script> <script src="js/SimplexNoise.js"></script> <script> (function() { var planeWidth = 256; var planeDepth = 512; // setup root var root = new THREERoot(); root.renderer.setClearColor(0xf1f1f1); root.camera.position.set(200, 200, 0); // add top light var light = new THREE.DirectionalLight(0xffffff); light.position.set(0, 1, 0); root.add(light); // add weaker bottom light light = new THREE.DirectionalLight(0xffffff, 0.25); light.position.set(0, -1, 0); root.add(light); // setup water mesh & material var ctSizeX = planeWidth; // compute texture size var ctSizeY = planeDepth; // compute texture size var geometry = new THREE.PlaneBufferGeometry(planeWidth, planeDepth, ctSizeX - 1, ctSizeY - 1); var material = new THREE.BAS.StandardAnimationMaterial({ transparent: true, side: THREE.DoubleSide, uniforms: { uCellSize: { value: new THREE.Vector2(1.0 / ctSizeX, 1.0 / ctSizeY) }, uHeightMap: { value: null }, uFlowOffset: { value: 0.0 } }, uniformValues: { roughness: 0.0, metalness: 0.0, diffuse: new THREE.Color(0x8CB0D9), //0xD5E5F1, 0x4B83C3 opacity: 0.8 }, vertexParameters: [ 'uniform vec2 uCellSize;', 'uniform sampler2D uHeightMap;', 'uniform float uFlowOffset;' ], vertexNormal: [ 'vec2 tUv = uv;', 'tUv.y = mod(uv.y + uFlowOffset, 1.0);', 'objectNormal = vec3(',

评论收藏

内容反馈

版权申诉