three.js 使用纹理贴图和精灵模型--模拟下雨

最新推荐文章于 2023-12-18 10:18:35 发布

zhuoyunluo77

最新推荐文章于 2023-12-18 10:18:35 发布

阅读量503

点赞数

分类专栏： three.js 文章标签： javascript 贴图 html

本文链接：https://blog.csdn.net/w__qwwq/article/details/126728808

版权

three.js 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

一、效果图：

模拟下雨

二、代码实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>模拟下雨</title>
  <style>
    body{
      margin: 0px;
      overflow: hidden;
    }
  </style>
  <script src="js/yanhuang/three.js"></script>
  <script src="js/yanhuang/OrbitControls.js"></script>
</head>
<body>
<script>
  //场景
  var scene = new THREE.Scene();
  //相机
  var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(292, 100, 268); //设置相机位置
  camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
  //光源
  var points = new THREE.PointLight(0xffffff);
  points.position.set(400,300,500);
  scene.add(points);

  var Ambient = new THREE.AmbientLight(0x888888);
  scene.add(Ambient);

  /*
     加载图片做背景
  * */
  //加载图片
  var bgtexture = new THREE.TextureLoader().load("1.jfif");

  //精灵材质对象SpriteMaterial
  var bgSpriteMaterial = new THREE.SpriteMaterial({
    map:bgtexture,  //设置精灵纹理贴图
    transparent:true,  //开启透明
    opacity:0.5          // 透明度
  })
  //  创建精灵模型对象，不需要几何体geometry参数
  var bgSprite = new THREE.Sprite(bgSpriteMaterial);
  scene.add(bgSprite);

  // 控制精灵大小，比如可视化中精灵大小表征数据大小
  bgSprite.scale.set(850,850,400);

  /**
  * 精灵创建下雨效果
  */
  // 加载雨滴理贴图
   var rains = new THREE.TextureLoader().load("rain.png");
  // 批量创建表示雨滴的精灵模型

  //创建一个组包含所有雨滴
  var group = new THREE.Group();
  for(var i = 0; i < 500; i++)
  {
    var spriteMaterial = new THREE.SpriteMaterial({
      map:rains
    });
    //创建精灵对象
    var sprite = new THREE.Sprite(spriteMaterial);
    group.add(sprite);
    //控制精灵的大小
    sprite.scale.set(7,9,1);

    //随机分布位置
    var r1 = Math.random() - 0.5;
    var r2 = Math.random();
    var r3 = Math.random() - 0.5;
    sprite.position.set(1000 * r1, 300 * r2, 1000 * r3);
  }
  scene.add(group);  //雨滴群组插入场景中

  // 渲染器对象
  var renderer = new THREE.WebGLRenderer();
  // renderer.setClearColor();
  renderer.setSize(window.innerWidth,window.innerHeight);
  document.body.appendChild(renderer.domElement);

  //辅助坐标系
  // var axisHelper = new THREE.AxisHelper(300,300,300);
  // scene.add(axisHelper);

  //渲染函数
  function  render()
  {
    //每次渲染遍历雨滴群组，刷新频率30~60FPS,两帧时间间隔16.67ms~33.33ms
    // 每次渲染都会更新雨滴的位置，进而产生动画效果
    group.children.forEach(sprite =>{
      //雨滴的y坐标每次减1
      sprite.position.y -=1;
      if(sprite.position.y < 0)
      {
        //如果雨滴落到地面，重置y，重新下落
        sprite.position.y = 200;
      }
    });

    renderer.render(scene,camera); //执行渲染操作
    requestAnimationFrame(render);  //请求再次执行渲染函数render,渲染下一帧
  }
  render();
</script>
</body>
</html>