WebGL：如何使用WebGL创建液体效果？

明王 · 发表于 2020-6-29 22:45

许多网页设计师都在寻找为他们的网站设计增添重大影响的方法，以便他们能够吸引用户的注意力。多年来，从使用标题图形到在登录页面菜单下放置幻灯片，到成为完整的浏览器宽度，现在绝大多数网站都遵循相同的格式。添加交互式元素确实可以吸引用户的注意力，并表明这与他们刚刚访问过的其他网站不同，它使一个网站比只有一个巨大的幻灯片和一些视差滚动更有趣。 01.添加初始变量从项目文件中打开开始文件夹，然后将其拖到代码编辑器中。打开’ index.html ‘，您将看到JavaScript库已经链接到您，在空脚本标签内部是代码所在的位置，在这里检测WebGL以确保可以运行项目，然后添加将在场景中使用的整个变量范围。if (!Detector.webgl) Detector.addGetWebGLMessage();var SCREEN_WIDTH = window.innerWidth;var SCREEN_HEIGHT = window.innerHeight;var renderer, camera, scene, moverGroup, floorGeometry, floorMaterial, pointLight, pointLight2, pGeometry;var FLOOR_RES = 60;var FLOOR_HT = 650;var stepCount = 0;var noiseScale = 9.5;var noiseSeed = Math.random() * 100;02.创建更多变量下一个变量块处理水底应该有多大以及它与初始鼠标位置一起移动的速度，屏幕的中心已经完成，改进的噪声库正在用于创建水面。var FLOOR_WIDTH = 3600;var FLOOR_DEPTH = 4800;var MOVE_SPD = 1.9;var mouseX = 0;var mouseY = 0;var windowHalfX = window.innerWidth / 2;var windowHalfY = window.innerHeight / 2;var snoise = new ImprovedNoise();var textureLoader = new THREE.TextureLoader();03.计算鼠标为场景的后期处理效果添加了一些最终变量，添加一个检查鼠标移动的事件监听器，场景将在显示端口移动以对鼠标移动作出反应，此处添加的功能可计算出允许的移动量。04.更改后期处理设置‘ params ‘功能是存储后处理效果的所有设置的地方，前四行中覆盖了倾斜移位模糊，然后电影在其余行中通过，这主要是针对屏幕强度和噪声强度。05.设定最终参数最后一个参数是针对屏幕边缘的黑暗小插图，调用’ init ‘和’ animate ‘函数来运行。’ animate ‘函数将在本教程的后期创建，但是’ init ‘函数在这里创建。摄像机和场景设置为允许查看3D内容。 effectVignette.uniforms["offset"].value = 1.0; effectVignette.uniforms["darkness"].value = 1.3;}init();animate();function init() { camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 4000); camera.position.z = 2750; scene = new THREE.Scene(); scene.fog = new THREE.FogExp2(0x1c3c4a, 0.00045);06.让光进去为了看到场景的内容，将放置四个灯，第一个是半球灯，用于获得场景的基本氛围，接下来是在场景中间添加浅蓝色光的中心灯，这是为了给整个场景提供一些亮光。var hemisphereLight = new THREE.HemisphereLight(0xe3feff, 0xe6ddc8, 0.7);scene.add(hemisphereLight);hemisphereLight.position.y = 300;var centerLight = new THREE.SpotLight(0xb7f9ff, 1);scene.add(centerLight);centerLight.position.set(2500, 300, 2000);centerLight.penumbra = 1;centerLight.decay = 5;07.动画灯接下来要添加两个灯，“ PointLight ”和“ PointLight2 ”是彩色灯光，它们会围绕场景以相反的方向旋转，以便灯光在视图中不断变化。第一种是粉红色光，第二种是橙色光。反射图像的路径和格式在最后两行中设置。pointLight = new THREE.PointLight(0xe07bff, 1.5);pointLight.position.z = 200;scene.add(pointLight);pointLight2 = new THREE.PointLight(0xff4e00, 1.2);pointLight2.position.z = 200;scene.add(pointLight2);var path = "img/";var format = '.jpg';08.有光泽的表面液体表面将具有反射的光泽表面，这通过创建反射立方体来完成。这是一个立方体，里面放有一个360度的天空盒，它将被反射到液体表面。’ urls ‘数组包含要加载的图像，然后设置材质。09.成立一些小组移动器组将包含稍后将添加的一些粒子，而地板组将包含液体的表面。将创建一个新的3D对象来保存该表面。将有两个液体表面; 一个将具有反射材料，第二个将具有线框’ floorMaterial ‘，如此处所定义。moverGroup = new THREE.Object3D();scene.add(moverGroup);var floorGroup = new THREE.Object3D();var floorMaterial = new THREE.MeshPhongMaterial({color: 0xeeeeee, side: THREE.DoubleSide, blending: THREE.AdditiveBlending, wireframe: true});floorGeometry = new THREE.PlaneGeometry(FLOOR_WIDTH + 1200, FLOOR_DEPTH, FLOOR_RES, FLOOR_RES);10.制作表面当添加第一个液体表面时，反射贴图非常明显，雾有助于将背景和表面混合在一起这两个液体表面在这里创建为’ floorMesh ‘和’ floorMesh2 ‘。它们被定位并放置在“ floorGroup ” 内，然后在相机前旋转到良好的视角。这不是直接平坦，而是略微倾斜，因为它看起来更好。var floorMesh = new THREE.Mesh(floorGeometry, cubeMaterial);var floorMesh2 = new THREE.Mesh(floorGeometry, floorMaterial);floorMesh2.position.y = 20;floorMesh2.position.z = 5;floorGroup.add(floorMesh);floorGroup.add(floorMesh2);scene.add(floorGroup);floorMesh.rotation.x = Math.PI / 1.65;floorMesh2.rotation.x = Math.PI / 1.65;floorGroup.position.y = 180;11.添加浮动颗粒浮动粒子填充场景，当所有这些都在渲染功能中进行动画处理时，它会带来对相机的移动感这里的代码部分创建一个空的几何对象，然后将2,000个顶点放入其中作为粒子。它们分布在X，Y和Z轴上的随机位置。它们会漂浮在液体地板表面的正上方。pGeometry = new THREE.Geometry();sprite = textureLoader.load("img/sprite.png");for (i = 0; i < 2000; i++) { var vertex = new THREE.Vector3(); vertex.x = 4000 * Math.random() - 2000; vertex.y = -200 + Math.random() * 700; vertex.z = 5000 * Math.random() - 2000; pGeometry.vertices.push(vertex);}12.创建外观此处定义的材料将设置粒子的外观。在上一步中加载了图像，并在创建材质后将其用作每个粒子上的图像，然后将其应用于所有粒子的几何的每个点，然后将它们添加到场景中。13.添加徽标添加徽标（透明的PNG图像）将其放置在场景的中心，以后可以轻松替换为您自己的徽标。徽标将放置在屏幕中央，这将添加到面向相机的平面上，徽标略微透明，并添加添加剂混合物，以便在较轻的物体从后面通过时更加明显。这被定位并放置在场景中。sprite = textureLoader.load("img/logo.png");geometry = new THREE.PlaneBufferGeometry(500, 640, 1);material = new THREE.MeshLambertMaterial({ transparent: true, opacity: 0.8, blending: THREE.AdditiveBlending, map: sprite, side: THREE.DoubleSide});var plane = new THREE.Mesh(geometry, material);plane.position.set(0, 70, 1800);scene.add(plane);14.添加渲染设置渲染器设置为具有平滑的抗锯齿边缘，现在设置背景颜色。这将添加到文档正文中，以便场景位于HTML页面上，通过初始化各种渲染和着色器通道来设置后处理效果。15.传球一旦添加了胶片和毛刺传递，就会创建一个效果组合器，将所有传递组合在一起。这些将逐一添加到作曲家，最终将呈现给屏幕以供观众展示。16.关闭’init’功能最后几个设置被添加用于场景的初始化。设置后处理的参数，调用wave的设置，并在每次调整浏览器大小时添加事件监听器，这样可以更新显示以适应新尺寸。17.设置波浪现在为液体表面产生波浪，这是通过在x和z轴上移动地板几何体的每个顶点并在y轴上向上移动来完成的。在此阶段，为x和z轴创建“ for ”循环。function setWaves() { stepCount++; moverGroup.position.z = -MOVE_SPD; var i, ipos; var offset = stepCount * MOVE_SPD / FLOOR_DEPTH * FLOOR_RES; for (i = 0; i < FLOOR_RES + 1; i++) { for (var j = 0; j < FLOOR_RES + 1; j++) { ipos = i + offset;18.制造波浪并非所有顶点都以相同的方式向上缩放，距离相机最远的那些将是较大的，然后两侧将略微减少，并且最靠近相机的那些将缩放最少，这使得背部和侧面看起来更有趣。if ((i > 30) || (j < 12) || (j > 48)) { floorGeometry.vertices[i * (FLOOR_RES + 1) + j].z = snoise.noise(ipos / FLOOR_RES * noiseScale, j / FLOOR_RES * noiseScale, noiseSeed) * FLOOR_HT; } else if (i > 25 && i < 30) { floorGeometry.vertices[i * (FLOOR_RES + 1) + j].z = snoise.noise(ipos / FLOOR_RES * noiseScale, j / FLOOR_RES * noiseScale, noiseSeed) * (FLOOR_HT / 1.2); } else { floorGeometry.vertices[i * (FLOOR_RES + 1) + j].z = snoise.noise(ipos / FLOOR_RES * noiseScale, j / FLOOR_RES * noiseScale, noiseSeed) * (FLOOR_HT / 2); } } } floorGeometry.verticesNeedUpdate = true;}19.调整大小和动画调整窗口大小时，此处的函数将从步骤16中设置的侦听器调用。摄像机，渲染器和编辑器都在此处重置，以匹配浏览器窗口的新维度。animate函数只将其自身设置为60fps，调用render函数来更新显示。function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); composer.setSize(window.innerWidth, window.innerHeight);}function animate() { requestAnimationFrame(animate); render();}20.设定每一个行动框架每帧调用渲染函数，点光源设置为在场景中绕轨道运行，摄像机根据鼠标移动定位，稍微缓和，使其逐渐移动到位。相机设置为始终查看场景的中心。function render() { var timer = -0.0002 * Date.now(); pointLight.position.x = 2400 * Math.cos(timer); pointLight.position.z = 2400 * Math.sin(timer); pointLight2.position.x = 1800 * Math.cos(-timer * 1.5); pointLight2.position.z = 1800 * Math.sin(-timer * 1.5); camera.position.x += (mouseX - camera.position.x) * .05; camera.position.y += (-mouseY - camera.position.y) * .05;camera.lookAt(scene.position);21.渲染场景经常会有一个后处理效果在屏幕上产生毛刺效应，只是为了使屏幕变得活跃并扭曲屏幕，然后再恢复正常在最后一步中，粒子在它们各自的顶点上向前移动，如果它们到达相机，它们就被放回到距离中。这会更新，并调用’ setWaves’函数使波向前滚动。相关文章推荐CSS3动画使用教程将CSS3动画视为CSS过渡的更复杂的姐妹，动画在几个关键方面与变换不同：动画不会优雅地降级，如果浏览器不支持 […]...React入门教程 ReactJS简介 ReactJS是用于构建UI的javascript库之一，对于Web和便携式应用程序的视图 […]...3D Touch简介：静态快速主屏幕操作 iOS 9引入了3D Touch，用户可以使用该触摸按下主屏幕图标并获取应用程序中某些操作的快捷方式，或者用户 […]...APPIUM – 用于测试的自动化工具 Appium最初由Dan Cueller开发，用于利用Apple iOS的UI自动化框架对本机移动应用程序运行 […]...php是什么？为什么要使用php？ PHP（PHP的递归首字母缩写：Hypertext Preprocessor）是JavaScript和Pyth […]...