three.js 笑脸雨

最新推荐文章于 2023-02-02 13:43:02 发布

很不简单

最新推荐文章于 2023-02-02 13:43:02 发布

阅读量232

点赞数

分类专栏： three.js 文章标签： webgl

本文链接：https://blog.csdn.net/qq_41960265/article/details/108383379

版权

three.js 专栏收录该内容

6 篇文章 4 订阅

订阅专栏

思路：加载纹理贴图，批量创建精灵模型，然后随机生成。下落到指定位置就重新生成

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>笑脸雨</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      /* 隐藏body窗口区域滚动条 */
    }
  </style>
  <!--引入three.js三维引擎-->
  <script src="../../js/three.js"></script>
  <script src="../../js/OrbitControls.js"></script>
  <!-- <script src="./three.js"></script> -->

</head>

<body>
<script type="text/javascript">
  var scene,camera,renderer,
    light,group;

  init();//开始初始化

  //将需要初始化的放在该方法中统一初始化
  function init(){
    initScene();//初始化场景
    initCamera();//初始化相机
    initRenender();//初始化渲染器
    initLight();//初始化光线
    initOthers();//初始化其他参数
    setWindown();//窗体的设置
    initaxisHelper();//辅助坐标
    yu();
  }

  //初始化场景
  function initScene(){
    scene = new THREE.Scene();//创建场景
  }

  //初始化相机
  function  initCamera(){
    //创建一个摄像机对象
    // camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight, 0.1, 1000);
    // camera.position.z=3;//设置相机的位置

    //创建相机对象
    camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.set(292, 109, 268);//设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
  }

  //初始化渲染器
  function initRenender(){
    //创建渲染器
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
  }

  //其他内容初始化
  function initOthers(){
    document.body.appendChild(renderer.domElement);//渲染到浏览器
  }

  function yu() {
    // 加载理贴图
    var textureTree = new THREE.TextureLoader().load("../../img/笑笑.jpg");
    console.log(textureTree)
    // 创建一个组表示所有的雨滴
    group = new THREE.Group();
    // 批量创建表示雨滴的精灵模型
    for (let i = 0; i < 400; i++) {
      var spriteMaterial = new THREE.SpriteMaterial({
        map:textureTree,//设置精灵纹理贴图
      });

      // 创建精灵模型对象
      var sprite = new THREE.Sprite(spriteMaterial);
      // 控制精灵大小,
      sprite.scale.set(8, 10, 1);  只需要设置x、y两个分量就可以
      var k1 = Math.random() - 0.5;
      var k2 = Math.random() - 0.5;

      // 设置精灵模型位置，在整个空间上上随机分布
      // 设置精灵模型位置，在空间中随机分布
      sprite.position.set(1000 * k1, 300 * Math.random(), 1000 * k2)
      group.add(sprite);
    }

    scene.add(group);
  }

  //定义窗口的设置
  function setWindown(){
    //加入事件监听器,窗口自适应
    window.addEventListener('resize', function(){
      var width = window.innerWidth;
      var height = window.innerHeight;
      renderer.setSize(width,height);
      camera.aspect = width/height;
      camera.updateProjectionMatrix();
    });
  }


  function initaxisHelper() {
    //辅助三维坐标系AxisHelper
    var axisHelper = new THREE.AxisHelper(250);
    scene.add(axisHelper);
  }

  //初始化光线
  function initLight(){
    //5.    光（Light）光源的基类。
    light = new THREE.Light(0xFFFFFF,1.0);
    scene.add(light);//光线加入场景中
  }

  //逻辑
  var update=function(){
    //物体随着XY轴旋转
    //cube.rotation.x +=0.01;
    //cube.rotation.y += 0.005;
  }

  // 渲染函数
  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，渲染下一帧
  }

  //循环运行update，render
  var loop=function() {
    requestAnimationFrame(loop);//请求再次执行渲染函数render，渲染下一帧
    update();
    render();
  }

  loop();//循环开始
</script>
</body>
</html>

很不简单

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
three.js 笑脸雨

three.js 笑脸雨思路：加载纹理贴图，批量创建精灵模型，然后随机生成。下落到指定位置就重新生成<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>笑脸雨</title> <style> body { margin: 0; overflow: hidden; /* 隐藏b
复制链接

扫一扫