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

详情进入：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);//网格模型对象Meshscene.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坐标每次减1sprite.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);

three.js精灵模型-下雨场景效果模拟相关推荐

Three.js精灵模型Sprite
Three.js精灵模型Sprite 本文是Three.js电子书的10.1节 Three.js的精灵模型对象Sprite和Threejs的网格模型Mesh一样都是模型对象,基类都是Object3D, ...
three.js 精灵模型-树林效果
详情进入:Three.js零基础入门教程(郭隆邦) 通过一张背景透明的树纹理贴图tree.png作为精灵模型的纹理贴图.map模拟一个树林效果. 效果: 代码: <!DOCTYPE html&g ...
Three.js（十）—— 精灵模型和粒子系统
文章目录 10.精灵模型和粒子系统 10.1 精灵模型Sprite Sprite和SpriteMaterial .scale 和 .position Sprite用途 10.2 中国城市PM2.5可视 ...
WebGL/ThreeJS如何在场景中创建立体文字TextGeometry，认识精灵模型
1.通过TextTrue创建 THREE.jS封装了TextGeometry类可以很容易地生成E维文字 TextGeometry(text : String, parameters : object ...
【企业数字化转型】数据可视化技术：Three.js 用Physijs在场景中添加物理效果
Three.js 极简教程简介 Three.JS 是什么 Three.JS是基于WebGL的Javascript开源框架,简言之,就是能够实现3D效果的JS库. Three.JS 能做什么利用Th ...
实现osgEarth三维仿真场景模型雾的效果的添加解决方法
在osgearth项目开发的过程中,为了实现逼真的三维场景可视化效果,需要对模型进行雾化处理,从而实现雾的自然天气情况模拟.在这过程中,利用OSG的osg::Fog类实现雾的效果,实现的效果如图1所示 ...
你会在场景中创建立体文字吗？可否认识精灵模型？
文章目录前言一.1.通过TextTrue创建 TextTrueDemo代码如下: 二.通过精灵模型和Cavas画布 Sprite和SpriteMaterial .scale 和.position ...
html5 canvas网页下雨场景动画js特效
下载地址一款透明的html5 canvas网页下雨场景动画特效,有意思的是按钮就像雨伞一样可以挡住雨水. dd:
ArcGIS JS API实现地图场景视频融合
ArcGIS JS API实现地图场景视频融合效果展示实现步骤 1.创建地图场景 2.引入相应模块并创建地图场景 3.获取点坐标 4.生成网格 5.生成图形并添加进场景中总结完整代码效果展示 ...

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

three.js精灵模型-下雨场景效果模拟相关推荐

最新文章

热门文章