111 three.js下雨进阶版，面只旋转y轴朝向相机

最新推荐文章于 2024-07-17 12:40:01 发布
最新推荐文章于 2024-07-17 12:40:01 发布
阅读量2k 收藏 5
点赞数 4
分类专栏： Three.js笔记 文章标签： webgl three.js shader 下雨
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30100043/article/details/107517896
版权

之前实现过，是利用的sprite永久朝向相机的特性实现的效果。但是这种效果对于雪还比较好，如果贴图修改成长条形的雨的话，从上往下看，就会有一种说不出的感觉，不真实。
案例查看地址：https://www.wjceo.com/blog/threejs2/2019-02-28/185.html
而我也通过修改shader和自己拼接渲染数据，实现了一个比较简单的渲染效果。接下来讲解一下实现逻辑：

第一步，创建一个包围盒，来设置范围

      const box = new THREE.Box3(
        new THREE.Vector3(-2000, -2000, -2000),
        new THREE.Vector3(2000, 2000, 2000)
      );

第二步，创建一个默认材质，并修改材质的shader

这里简单的提一句，three.js的材质对象是生成webgl的原生的program的工具，内置的那些材质都有相应的字符串拼接组成。
相应的，我们也可以通过拼接的方式，修改材质的默认着色器代码，从而达到自己的需求。

      material = new THREE.MeshBasicMaterial({
        transparent: true,
        opacity:.8,
        map: new THREE.TextureLoader().load("./color.png"),
        depthWrite: false,
      });

      material.onBeforeCompile = function (shader, renderer) {
        const getFoot = `
            uniform float top;
            uniform float bottom;
            uniform float time;
            #include <common>
            float angle(float x, float y){
              return atan(y, x);
            }
            vec2 getFoot(vec2 camera,vec2 normal,vec2 pos){
                vec2 position;

                float distanceLen = distance(pos, normal);

                float a = angle(camera.x - normal.x, camera.y - normal.y);

                if(pos.x > normal.x){
                  a -= 0.785; 
                }
                else{
                  a += 0.785; 
                }

                position.x = cos(a) * distanceLen;
                position.y = sin(a) * distanceLen;
                
                return position + normal;
            }
            `;
        const begin_vertex = `
            vec2 foot = getFoot(vec2(cameraPosition.x, cameraPosition.z),  vec2(normal.x, normal.z), vec2(position.x, position.z));
            float height = top-bottom;
            float y = normal.y - bottom - height*time;
            if(y < 0.0) y += height;
            float ratio = (1.0 - y /height) * (1.0 - y /height);
            y = height * (1.0 - ratio);
            y += bottom;
            y += position.y - normal.y;
            vec3 transformed = vec3( foot.x, y, foot.y );
            // vec3 transformed = vec3( position );
            `;
        shader.vertexShader = shader.vertexShader.replace(
          "#include <common>",
          getFoot
        );
        shader.vertexShader = shader.vertexShader.replace(
          "#include <begin_vertex>",
          begin_vertex
        );

        shader.uniforms.cameraPosition = {
          value: new THREE.Vector3(0, 200, 0),
        };
        shader.uniforms.top = {
          value: 2000,
        };
        shader.uniforms.bottom = {
          value: -2000,
        };
        shader.uniforms.time = {
          value: 0,
        };
        material.uniforms = shader.uniforms;
      };

第三步，通过包围盒生成相应的渲染数据

由于MeshBasicMaterial材质不受光照影响，所以，我们直接在拼接数据时， 将normal值设置面片的中心，一个正方形的面片需要由两个三角形组成，也就是最少四个顶点完成。
主要的操作就在这里，这里生成的数据，会在shader里面计算获取到y轴都为零情况下，沿中心点旋转的角度，通过此角度再生成一下旋转后，顶点需要渲染的位置。

      var geometry = new THREE.BufferGeometry();

      const vertices = [];
      const normals = [];
      const uvs = [];
      const indices = [];

      for (let i = 0; i < 1000; i++) {
        const pos = new THREE.Vector3();
        pos.x = Math.random() * (box.max.x - box.min.x) + box.min.x;
        pos.y = Math.random() * (box.max.y - box.min.y) + box.min.y;
        pos.z = Math.random() * (box.max.z - box.min.z) + box.min.z;

        const height = (box.max.y - box.min.y) / 15;
        const width = height / 50;

        vertices.push(
          pos.x + width,
          pos.y + height / 2,
          pos.z,
          pos.x - width,
          pos.y + height / 2,
          pos.z,
          pos.x - width,
          pos.y - height / 2,
          pos.z,
          pos.x + width,
          pos.y - height / 2,
          pos.z
        );

        normals.push(
          pos.x,
          pos.y,
          pos.z,
          pos.x,
          pos.y,
          pos.z,
          pos.x,
          pos.y,
          pos.z,
          pos.x,
          pos.y,
          pos.z
        );

        uvs.push(1, 1, 0, 1, 0, 0, 1, 0);

        indices.push(
          i * 4 + 0,
          i * 4 + 1,
          i * 4 + 2,
          i * 4 + 0,
          i * 4 + 2,
          i * 4 + 3
        );
      }

      geometry.addAttribute(
        "position",
        new THREE.BufferAttribute(new Float32Array(vertices), 3)
      );
      geometry.addAttribute(
        "normal",
        new THREE.BufferAttribute(new Float32Array(normals), 3)
      );
      geometry.addAttribute(
        "uv",
        new THREE.BufferAttribute(new Float32Array(uvs), 2)
      );
      geometry.setIndex(new THREE.BufferAttribute(new Uint32Array(indices), 1));

第四步，在帧更新内，更新材质的uniform

    var time = 0;
    function render() {
      time = (time + clock.getDelta() * 0.2) % 1;

      // console.log(time);

      material.cameraPosition = camera.position;

      if (material.uniforms) {
        material.uniforms.cameraPosition.value = camera.position;
        material.uniforms.time.value = time;
      }

      renderer.render(scene, camera);
    }

最后一步，就设置一个变量，然后通过帧更新，更新雨点的位置，直接在shader里面计算简单方便。

接下来付上demo源码：


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>
  </head>
  <body></body>
  <script src="../node_modules/three/build/three.js"></script>
  <script src="../node_modules/three/examples/js/controls/OrbitControls.js"></script>
  <script src="../node_modules/three/examples/js/libs/stats.min.js"></script>
  <script src="../node_modules/three/examples/js/libs/dat.gui.min.js"></script>
  <script>
    var camera, scene, renderer, stats, control, material;

    var sphere;

    var clock = new THREE.Clock();

    init();
    animate();

    function init() {
      camera = new THREE.PerspectiveCamera(
        40,
        window.innerWidth / window.innerHeight,
        1,
        15000
      );
      camera.position.z = 3000;

      scene = new THREE.Scene();
      scene.background = new THREE.Color(0x333333);
      
      const box = new THREE.Box3(
        new THREE.Vector3(-2000, -2000, -2000),
        new THREE.Vector3(2000, 2000, 2000)
      );

      material = new THREE.MeshBasicMaterial({
        transparent: true,
        opacity:.8,
        map: new THREE.TextureLoader().load("./color.png"),
        depthWrite: false,
      });

      material.onBeforeCompile = function (shader, renderer) {
        const getFoot = `
            uniform float top;
            uniform float bottom;
            uniform float time;
            #include <common>
            float angle(float x, float y){
              return atan(y, x);
            }
            vec2 getFoot(vec2 camera,vec2 normal,vec2 pos){
                vec2 position;

                float distanceLen = distance(pos, normal);

                float a = angle(camera.x - normal.x, camera.y - normal.y);

                if(pos.x > normal.x){
                  a -= 0.785; 
                }
                else{
                  a += 0.785; 
                }

                position.x = cos(a) * distanceLen;
                position.y = sin(a) * distanceLen;
                
                return position + normal;
            }
            `;
        const begin_vertex = `
            vec2 foot = getFoot(vec2(cameraPosition.x, cameraPosition.z),  vec2(normal.x, normal.z), vec2(position.x, position.z));
            float height = top-bottom;
            float y = normal.y - bottom - height*time;
            if(y < 0.0) y += height;
            float ratio = (1.0 - y /height) * (1.0 - y /height);
            y = height * (1.0 - ratio);
            y += bottom;
            y += position.y - normal.y;
            vec3 transformed = vec3( foot.x, y, foot.y );
            // vec3 transformed = vec3( position );
            `;
        shader.vertexShader = shader.vertexShader.replace(
          "#include <common>",
          getFoot
        );
        shader.vertexShader = shader.vertexShader.replace(
          "#include <begin_vertex>",
          begin_vertex
        );

        shader.uniforms.cameraPosition = {
          value: new THREE.Vector3(0, 200, 0),
        };
        shader.uniforms.top = {
          value: 2000,
        };
        shader.uniforms.bottom = {
          value: -2000,
        };
        shader.uniforms.time = {
          value: 0,
        };
        material.uniforms = shader.uniforms;
      };

      var geometry = new THREE.BufferGeometry();

      const vertices = [];
      const normals = [];
      const uvs = [];
      const indices = [];

      for (let i = 0; i < 1000; i++) {
        const pos = new THREE.Vector3();
        pos.x = Math.random() * (box.max.x - box.min.x) + box.min.x;
        pos.y = Math.random() * (box.max.y - box.min.y) + box.min.y;
        pos.z = Math.random() * (box.max.z - box.min.z) + box.min.z;

        const height = (box.max.y - box.min.y) / 15;
        const width = height / 50;

        vertices.push(
          pos.x + width,
          pos.y + height / 2,
          pos.z,
          pos.x - width,
          pos.y + height / 2,
          pos.z,
          pos.x - width,
          pos.y - height / 2,
          pos.z,
          pos.x + width,
          pos.y - height / 2,
          pos.z
        );

        normals.push(
          pos.x,
          pos.y,
          pos.z,
          pos.x,
          pos.y,
          pos.z,
          pos.x,
          pos.y,
          pos.z,
          pos.x,
          pos.y,
          pos.z
        );

        uvs.push(1, 1, 0, 1, 0, 0, 1, 0);

        indices.push(
          i * 4 + 0,
          i * 4 + 1,
          i * 4 + 2,
          i * 4 + 0,
          i * 4 + 2,
          i * 4 + 3
        );
      }

      geometry.addAttribute(
        "position",
        new THREE.BufferAttribute(new Float32Array(vertices), 3)
      );
      geometry.addAttribute(
        "normal",
        new THREE.BufferAttribute(new Float32Array(normals), 3)
      );
      geometry.addAttribute(
        "uv",
        new THREE.BufferAttribute(new Float32Array(uvs), 2)
      );
      geometry.setIndex(new THREE.BufferAttribute(new Uint32Array(indices), 1));

      scene.add(new THREE.Mesh(geometry, material));

      var axesHelper = new THREE.AxesHelper(500);
      scene.add(axesHelper);

      renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      stats = new Stats();
      document.body.appendChild(stats.dom);

      control = new THREE.OrbitControls(camera, renderer.domElement);

      window.addEventListener("resize", onWindowResize, false);
    }

    function onWindowResize() {
      windowHalfX = window.innerWidth / 2;
      windowHalfY = window.innerHeight / 2;

      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();

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

    //

    function animate() {
      requestAnimationFrame(animate);

      render();
      stats.update();
    }

    var time = 0;
    function render() {
      time = (time + clock.getDelta() * 0.2) % 1;

      // console.log(time);

      material.cameraPosition = camera.position;

      if (material.uniforms) {
        material.uniforms.cameraPosition.value = camera.position;
        material.uniforms.time.value = time;
      }

      renderer.render(scene, camera);
    }
  </script>
</html>
暮志未晚NAN
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
用three.js写一个下雨动画
ynweiy的博客
03-26 1693
最近看了《Three.js开发指南》，深刻地意识到光看不练跟没看差不多，所以就练习写了这个小动画。 gif 预览地址：https://juejin.cn/post/6940542710709223432 项目地址： https://github.com/magicsoso/threejs-tutorial.git 前置知识 WebGL让我们能在浏览器开发3D应用，然而直接使用WebGL编程还是挺复杂的，开发者需要知道WebGL的底层细节，并且学习复杂的着色语言来获得WebGL的大部分功能。Three.j
THREE.MapControls:（不推荐）THREE.js相机控件适用于平坦场景-平移，缩放和有限旋转
05-18
对THREE.TrackballControls的修改，提供适用于平坦场景的摄像机控件-平移，缩放和有限旋转。 快速开始 将MapControls.js添加到您的项目中，或使用Bower安装： bower install --save three.map-controls 要使用...
使用THREE.JS开发的下雨效果
07-05
使用THREE.JS 开发的雨滴效果，使用数据驱动来更新雨滴的位置信息。可以通过数据来更雨滴的位置信息
Three.js 下雨特效（高级版本）很干！很难！很详细！
最新发布
程序员成长指北
07-17 160
大厂技术高级前端Node进阶 点击上方程序员成长指北，关注公众号 回复1，加入高级Node交流群带深度信息的下雨特效的实现效果不错，实现的每一步真的很清楚。阅读之前简略了解一下原理1. 什么是深度？深度，深度，深度就是三维世界中的坐标点，经过 MVP(modelMatrix viewMatrix projectionMatrix) 变化后，映射到相机空间的坐标中的 z 值范围 [0,1]...
three.js实现下雨、下雪天气模拟
sinat_37885331的博客
04-18 2409
three.js版本："three": "^0.136.0"
three.js 精灵模型模拟下雨场景效果
yinge0508的博客
02-25 885
效果： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti.
Threejs实现下雨，下雪，阴天，晴天，火焰
左本Web3D
07-16 6628
1，介绍 该示例使用的是 r95版本Three.js库。使用Threejs粒子效果实现下雨，下雪，阴天，晴天，火焰。 效果图如下： 2，主要说明 创建粒子有两种方式： 1，使用THREE.Points创建一个粒子集合，使用THREE.PointsMaterial来样式化粒子。 2，使用Three.Sprite()构造函数手工创建粒子。我们传入的唯一参数是材质，它只能是THREE.SpriteMaterial或THREE.SpriteCanvasMaterial。 Sprite适用创..
Learn-Three.js-Third-Edition:学习Three.js第三版，由Packt发行
05-28
学习Three.js-第三版 这是Packt发布的的代码存储库。 使用HTML5和WebGL对Web的3D动画和可视化进行编程 这本书是关于什么的？ WebGL使在浏览器中创建3D图形成为可能，而不必使用Flash和Java之类的插件。 但是，对...
基于-Three.js-的仓库可视化管理系统源码（优质项目）.zip
04-22
基于-Three.js-的仓库可视化管理系统源码+数据库.zip【项目资源】：基于 Three.js 的仓库可视化管理系统是一个利用 Three.js 这一强大的 JavaScript 3D 库来创建和管理仓库数据的系统。Three.js 允许开发者在网页上...
Three.js进阶课程
06-13
有一定的Threejs基础和WebGL基础，希望能够深入理解Three.js引擎，想了解Threejs是如何对WebGL?API和着色器封装的，想了解Threejs向量、矩阵等数学知识，在实际的项目中需要使用Threejs自定义着色器代码。?二、源码...
Three.js精灵模型Sprite模拟下雨效果
u014291990的博客
12-02 2714
精灵模型Sprite模拟下雨效果 本文是Three.js电子书的10.4节 本节课通过一个精灵模拟模拟下雨的场景进一步建立精灵模型和粒子系统的概念。 基本思路就是通过足够多的精灵模型构成一个粒子系统，然后每一个雨滴按照在一定空间内随机分布，每个精灵模型都使用一个背景透明的雨滴rain.png作为纹理贴图。 在空间中随机生成静态分布的雨滴 /** * 精灵创建下雨效果 */ // 加载雨滴...
threejs写的一些特效
03-31
threejs写的一些特效
HTML5 Three.js 3D特效
刘鹏的技术宅
07-21 7565
一、Three.js基本介绍 Three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。不过，这款引擎目前还处在比较不成熟的开发阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度（尤其是
three.js精灵模型-下雨场景效果模拟
qq_54224923的博客
09-27 918
three.js 精灵模型
threeJs绘制曲线，
Baker的博客
08-12 661
之前有讲过用three绘制直线，但是很多时候的也需要绘制曲线，这节就展示怎么用threejs绘制一条曲线，所用到的是组件CatmullRomCurve3，它实实质上是两点之间取多个点，然后用多条直线连接起来，当直线数量多，且角度不一样时，就形成了平滑的曲线，这里的曲线不是贝塞尔曲线，只是将多个点连接起来的曲线，好了不多说，...
threejs 特效 贴图方式的下雨效果。
qq_32039213的博客
09-13 332
threejs 贴图下雨效果。可以自定义数量，位置，颜色。
three.js Sprite模拟下雨、下雪
u014291990的博客
12-18 569
如果你想模拟下雨效果，一个雨滴用一个3D水滴形曲面表示，假设一个水滴用40个三角形表示，1万个雨滴，就是40万个三角形，精灵模型Sprite在threejs内部就像相当于两个三角形构成的矩形，1万个精灵模型，相当于2万个三角形，Sprite模拟雨滴相比比3D曲面几何体表示雨滴顶点数量就会少很多，这样threejs渲染性能就更好。Sprite分布渲染范围和数量，根据渲染范围来预先给一个大概的值，然后可以根据需要，在调整雨滴分布范围尺寸。调整大一些，避免距离相机非常近的雨滴渲染非常大的现象。
Three.js 下雨效果-demo
stonerao
07-05 1420
使用THREE.js开发下雨效果-demo 创建雨滴数据，用数据驱动雨滴的位置 下载连接
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值