three.js 精灵模型模拟下雨场景效果

效果：代码：<!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

攻城狮plus

980人浏览 · 2022-02-25 14:30:32

攻城狮plus · 2022-02-25 14:30:32 发布

效果：

代码：

<!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">
  <title>下雨场景效果模拟</title>
  <script src="../three.js"></script>
  <script src="../OrbitControls.js"></script>
</head>
<body>
  <script>
    // 1,创建场景对象
    var scene = new THREE.Scene();
    // 2，创建模型对象
    var plane_geometry = new THREE.PlaneGeometry(500,500);
    plane_geometry.rotateX(Math.PI/2);
    // 加载草地图片
    var gress = new THREE.TextureLoader().load('./caodi.png');
    gress.wrapS = THREE.RepeatWrapping;
    gress.wrapT = THREE.RepeatWrapping;
    gress.repeat.set(20,20);
    var plane_material = new THREE.MeshBasicMaterial({
      // color:0xffaacc,
      side:THREE.DoubleSide,
      map:gress
    });
    var mesh = new THREE.Mesh(plane_geometry,plane_material);
    scene.add(mesh);
    // 创建雨滴
    var group = new THREE.Group();
    var rain = new THREE.TextureLoader().load('./rain2.png');
    for(var i = 0;i<500;i++){
      // 创建精灵材质
      var sprite_material = new THREE.SpriteMaterial({map: rain});
      var sprite = new THREE.Sprite(sprite_material);
      sprite.position.set(Math.random()*200,Math.random()*300,Math.random()*200);
      sprite.scale.set(8,8,1);
      group.add(sprite);
    }
      scene.add(group);
    // 3,创建光源对象
    var ambient = new THREE.AmbientLight(0xffffff)
    scene.add(ambient);
    // 3,创建光源对象
    var point = new THREE.PointLight(0xffffff)
    point.position.set(200,100,200);
    scene.add(point);
    // 4,创建相机对象
    var width = window.innerWidth;
    var height = window.innerHeight;
    var k = width / height;
    var s = 200;
    var camera = new THREE.PerspectiveCamera(60,k,0.1,1000);
    camera.position.set(200,50,200);
    camera.lookAt(scene.position);
    // 5，创建渲染器对象
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width,height);
    document.body.appendChild(renderer.domElement);
    function render(){
      renderer.render(scene,camera);
      group.children.forEach(rain => {
        rain.position.y -= 1;
        if(rain.position.y<0){
          rain.position.y = 200;
        }
      });
      requestAnimationFrame(render);
    }
    // 创建轴坐标对象
    var axes = new THREE.AxesHelper(500);
    scene.add(axes);
    // 创建鼠标控制对象
    var controls = new THREE.OrbitControls(camera,renderer.domElement);

    render();
  </script>
</body>
</html>

天启AI社区

GitCode 天启AI是一款由 GitCode 团队打造的智能助手，基于先进的LLM（大语言模型）与多智能体 Agent 技术构建，致力于为用户提供高效、智能、多模态的创作与开发支持。它不仅支持自然语言对话，还具备处理文件、生成 PPT、撰写分析报告、开发 Web 应用等多项能力，真正做到“一句话，让 Al帮你完成复杂任务”。

更多推荐