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

最新推荐文章于 2024-05-21 14:15:14 发布

好锅煮好饭

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量841

点赞数 1

分类专栏： three.js 文章标签： javascript 开发语言学习

本文链接：https://blog.csdn.net/qq_54224923/article/details/127068686

版权

three.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

详情进入：Three.js零基础入门教程(郭隆邦)

通过足够多的精灵模型构成一个粒子系统，然后每一个雨滴按照在一定空间内随机分布，每个精灵模型都使用一个背景透明的雨滴rain.png作为纹理贴图。
效果：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>10.4精灵模型-下雨场景</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            /* 隐藏body窗口区域滚动条 */
        }
    </style>
    <!--引入three.js三维引擎-->
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
    <!-- 引入threejs扩展控件OrbitControls.js -->
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
    <script>
        var scene = new THREE.Scene();

        /**
         * 精灵创建下雨效果
         */
        //加载雨滴纹理贴图
        var textureLoader = new THREE.TextureLoader();
        var textureTree = textureLoader.load("../picture/rain.png");
        //创建一个组表示所有的雨滴
        var group = new THREE.Group();
        //批量创建表示雨滴的精灵模型
        for (let i =0 ; i< 400 ; i++ ){
            var spriteMaterial =new THREE.SpriteMaterial({
               map:textureTree,//设置精灵纹理贴图
            });
            //创建精灵模型对象
            var sprite = new THREE.Sprite(spriteMaterial);
            scene.add(sprite);
            //控制精灵大小
            sprite.scale.set(8,10,1);//只需要设置x,y两个分量就可以
            var k1 = Math.random() - 0.5;
            var k2 = Math.random() - 0.5;
            // var k3 = Math.random() - 0.5;
            //设置精灵模型位置，在整个空间上随机分布
            sprite.position.set(1000 * k1, 300 * Math.random(), 1000 * k2);
            //把所有创建的精灵模型插入到一个组对象Group中，然后在渲染函数render()中周期性改变每个表示雨滴精灵模型的y坐标，从上到下移动。
            group.add(sprite);
        };
        scene.add(group);//雨滴群组插入场景中


        //创建一个草地平面
        var geometry = new THREE.PlaneGeometry(1000,1000);
        var textureGrass = textureLoader.load("../picture/grass.jpg");
        textureGrass.wrapS = THREE.RepeatWrapping;//wrapS:纹理贴图在水平方向上将如何进行包裹
        textureGrass.wrapT = THREE.RepeatWrapping;
        //uv两个方向纹理重复数量
        textureGrass.repeat.set(10,10);
        var material =new THREE.MeshLambertMaterial({
            color:0x93c47d,
            map:textureGrass,
        });
        var mesh =new THREE.Mesh(geometry,material);//网格模型对象Mesh
        scene.add(mesh);//网格模型添加到场景中
        mesh.rotateX(-Math.PI/2);


        /**
         * 光源设置
         */
            //点光源
        var point = new THREE.PointLight(0xffffff);
        point.position.set(400, 200, 300); //点光源位置
        scene.add(point); //点光源添加到场景中
        var point1 =new THREE.PointLight(0xffffff);
        point1.position.set(-400,-200,-300);
        scene.add(point1);
        //环境光
        var ambient = new THREE.AmbientLight(0x888888);
        scene.add(ambient);
        /**
         * 相机设置
         */
        var width = window.innerWidth; //窗口宽度
        var height = window.innerHeight; //窗口高度
        var k = width / height; //窗口宽高比
        var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
        //创建相机对象
        var camera = new THREE.PerspectiveCamera(60,width / height , 1 ,1000);
        camera.position.set(292, 109, 268); //设置相机位置
        camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
        /**
         * 创建渲染器对象
         */
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height); //设置渲染区域尺寸
        renderer.setClearColor(0x000000, 1); //设置背景颜色
        document.body.appendChild(renderer.domElement); //body元素中插入canvas对象


        // 渲染函数
        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();
        var controls = new THREE.OrbitControls(camera,renderer.domElement);
    </script>

    <div class="" style="position:absolute;top:0px;left:0px;background: rgba(255, 255, 255, 0.5);padding:10px 20px;"><a href="https://blog.csdn.net/qq_54224923/" target="_blank" style="color:#fff;text-decoration: none;">博客@好锅煮好饭</a></div>

</body>
</html>

rain.png
在这里插入图片描述
grass.jpg

要点：
1.使用透视投影相机PerspectiveCamera，同时把透视投影相机对象的位置设置在雨粒子系统里面而不是雨粒子系统的外面。

//透视投影相机对象
        var camera = new THREE.PerspectiveCamera(60,width / height , 1 ,1000);
        camera.position.set(292, 109, 268); //设置相机位置

2.把透视投影相机对象放在雨粒子系统中，可以通过放大雨精灵分布的空间范围，也可以直接调整透视投影相机的位置。
下面代码精灵模型的分布空间范围是(0,-150,-500)到(1000,150,500)对角线构成的长方体空间中,相机的位置是(292, 109, 268)。

var k1 = Math.random() - 0.5;
var k2 = Math.random() - 0.5;
sprite.position.set(1000 * k1, 300 * Math.random(), 1000 * k2);

好锅煮好饭

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
three.js精灵模型-下雨场景效果模拟

three.js 精灵模型
复制链接

扫一扫

专栏目录

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

“相关推荐”对你有帮助么？