WebGL/Threejs瀑布水流粒子效果

news2024/11/25 9:39:49

webgl瀑布效果

初始化场景

function init () {

   scene = new THREE.Scene();
   camera =  new THREE.PerspectiveCamera (45, scr.w / scr.h, 0.1, 10000);

   renderer = new THREE.WebGLRenderer ({ antialias: true });
   renderer.gammaInput = true;
   renderer.gammaOutput = true;
   renderer.setClearColor (new THREE.Color (0xffffff, 1.0));
   renderer.setSize (scr.w, scr.h);

   /* Camera positioning and pointing it to the center of the scene.  */
   camera.position.x = -waterfall.startX * 2;
   camera.position.y = waterfall.h * 4;
   camera.position.z = waterfall.h * 4;
   /* Look at the center of the scene.  */
   camera.lookAt (0, 0, 0);

   /* Add the output of the renderer to the html element.  */
   document.getElementById("WebGL-output").appendChild
               (renderer.domElement);

   /* Camera mouse controls.  */
   cameraControls = new THREE.OrbitAndPanControls (camera,
                  renderer.domElement);
   cameraControls.target.set (0,0,0);

   /* Sun light.  */
   var sunLight = new THREE.DirectionalLight (0x0f0f0f, 100.0);
   sunLight.position.set (-riverOutput.startX, 64000,
            riverOutput.dimZ + 20).normalize();
   scene.add (sunLight);

   /* Fog. */
   scene.fog = new THREE.FogExp2( 0x2f2f2f, 0.00050 );

   window.addEventListener ('resize', onWindowResize, false);

}

 

模型场景创建

webgl瀑布效果

function createTreeTrunk () {

   var treeTrunkGeometry, treeTrunkMaterial, treeTrunkTex;


   treeTrunkGeometry = new THREE.CylinderGeometry (treeTrunkStruct.radius,
                     treeTrunkStruct.radius,
                     treeTrunkStruct.height,
                     100, 100, false);
   treeTrunkTex = applyTex ("textures/treeTrunkTex.jpg", 1, 1);
   treeTrunkMaterial = new THREE.MeshBasicMaterial ({ map: treeTrunkTex });
   treeTrunk = new THREE.Mesh (treeTrunkGeometry, treeTrunkMaterial);

   treeTrunk.position.x = treeTrunkStruct.posX;
   treeTrunk.position.y = treeTrunkStruct.posY;
   treeTrunk.position.z = treeTrunkStruct.posZ;

   treeTrunk.rotation.x = (treeTrunkStruct.rotX * Math.PI) / 180.0;
   treeTrunk.rotation.z = (treeTrunkStruct.rotZ * Math.PI) / 180.0;

   treeTrunk.visible = false;

   scene.add (treeTrunk);

}

function createLake (dimX, dimY, posX, posY, posZ, rotX) {
   var lLake, lLakeGeometry, lLakeMaterial, lLakeTex;

   lLakeGeometry = new THREE.PlaneGeometry (dimX, dimY);
   lLakeTex = applyTex ("textures/water.jpg", 50, 50);
   lLakeMaterial = new THREE.MeshBasicMaterial ({ color:0x00005f,
                         side: THREE.DoubleSide,
                         map:lLakeTex });
   lLake = new THREE.Mesh (lLakeGeometry, lLakeMaterial);

   lLake.position.x = posX;
   lLake.position.y = posY;
   lLake.position.z = posZ;

   lLake.rotation.x = (rotX * Math.PI) / 180.0;

   scene.add (lLake);
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/666985.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

盘点中国顶级黑客Top10,最后一位你猜是谁

第一名:袁仁广 别名:大兔子(datuzi),人称袁哥。提起袁任广,知道的人或许并不多。但如果提起袁哥或者大兔子,在国内安全业界称得上尽人皆知。在国内,他的windows系统方面的造诣可谓首屈一指,早在…

centos系统socket5安装与使用

一、socket5安装 1、安装依赖 yum -y install gcc openldap-devel pam-devel openssl-devel 2、安装socket5 wget http://nchc.dl.sourceforge.net/project/ss5/ss5/3.8.9-8/ss5-3.8.9-8.tar.gztar -xzvf ss5-3.8.9-8.tar.gzcd ss5-3.8.9./configuremakemake install 二、…

Android Jetpack Compose — Slider滑动条

在Android Jetpack Compose中,Slider(滑动条)是一个常用的用户界面控件,它允许通过滑动条来选择一个范围或数值。Slider控件非常适用于调整音量、亮度、进度等需要连续调整的场景。 一、Slider的属性 Slider是Android Jetpack Compose中的一个…

html实现多种风格步骤条

文章目录 1.设计来源1.1 线性风步骤条1.2 进度风步骤条1.3 花式风步骤条1.4 格子风步骤条 2.效果和源码2.1 动态效果2.2 源代码 源码下载 作者:xcLeigh 文章地址:https://blog.csdn.net/weixin_43151418/article/details/131308246 html实现多种风格步骤…

Java版本+企业电子招投标系统源代码

一、立项管理 1、招标立项申请 功能点:招标类项目立项申请入口,用户可以保存为草稿,提交。 2、非招标立项申请 功能点:非招标立项申请入口、用户可以保存为草稿、提交。 3、采购立项列表 功能点:对草稿进行编辑&#x…

浅析景区慢直播的需求与基于视频技术的解决方案

一、行业背景 从春节到“五一”假期,旅游市场高开稳走,复苏持续提速。“慢直播”是一种特别的直播形式,没有主持人,也没有绚丽的镜头切换以及精美的后期制作,只用固定机位拍摄来更加真实地展现事件现场,以…

文件上传413状态码报错解决方案

目录 前言 解决办法 前言 我的前端Vue项目部署在Nginx上,当我上传一个3M多的图片时,发生413错误,刚开始我以为是数据库字段不对,但我看后确实是大数据类型(text、blob),这种数据类型应对一张…

《后端存储实战课》课程学习笔记(三)

流量大、数据多的商品详情页系统该如何设计? 电商的商品系统主要功能就是增删改查商品信息,没有很复杂的业务逻辑,支撑的主要页面就是商品详情页。设计这个系统的存储,你仍然需要着重考虑两个方面的问题。 第一,要考虑…

First De-Trend then Attentd: Rethinking Attention for Time-Series Forecasting

论文题目:重新思考注意力在时间序列预测任务中应用 作者单位:亚马逊 访问学者、亚马逊云科技 摘要: 基于Transformer的一系列方法在长时间序列预测任务中很有效,除了在时域部分学习注意力外,最近的工作也在频域中探…

心中的TOP4编程语言❤

编程语言心动值排名: java:❤❤❤❤❤ python:❤❤❤❤ C:❤❤❤ C:❤❤❤❤ 一:关于编程语言优劣的评选标准 个人认为一门语言的优劣势标准评判主要是这门语言解决了哪一类问题,为人类创造了多…

Linux0.11内核源码解析-pipe.c

目录 什么是PIPE? PIPE注意事项 有名和匿名管道 内核管道通信 管道读函数 管道写函数 管道创建 什么是PIPE? 进程间通信(IPC,Inter-Process Communication)是指在不同进程间进行数据通信和交换的过程。管道&am…

生成式AI数据中心网络来了,NVIDIA抢占加速计算高端市场

在大模型和生成式AI的大风口下,NVIDIA大力倡导并率先进军传统数据中心的高端市场——加速计算数据中心。自进入AI和大数据时代,业界就开始出现“加速计算”的概念。简单理解,加速计算即使用GPU、FPGA以及各种DPU等加速芯片以及相关的软件技术…

【Java】POJO类的属性不要命名为isXXX的问题描述,复现,解决方法

问题描述 POJO的属性是布尔类型的时候,采用is_xxx的命名方式,出现参数无法找到的情况 问题复现 Boolean 的属性命名为isA,但是它的getter和setter自动取消了is public class Person { Boolean isA; public Boolean getA() { return is…

locust学习教程(4) - 命令行参数

前言 一句话总结:命令行参数、环境变量、配置文件 1、所有命令行参数 1.1、常用场景参数解读 1.1.1、无web界面,定时运行,数据存储在csv中: locust -f per_01_test.py --headless -u 10 -r 1 -t 1m -s 120 --csvexample --head…

locust学习教程(1)- 概念相关

前言 一句话总结:本文是基于2.4.1的版本去学习locust,如果你想完全搞懂它,那么就从最新的产品文档从头到尾去研读一遍吧。 1、locust是什么? 1.1、相关资料 官网:www.locust.io/产品文档:docs.locust.io…

光伏电站并网雷电防护措施探讨 安科瑞 许敏

摘要: 本文指出了雷击对并网系统光伏电站的主要危害形式及所对应的雷电防护措施。依据相关的防雷及电气接地规范,针对并网系统光伏电站提出了防雷设计方案并做了详细的阐述。在光伏电站的防雷设计中,应考虑雷电会通过何种形式对哪些设施造成损害&#xf…

玩转系统|完美替代ChatGPT!Claude注册教程及出现问题解决方案

目录 1、什么是ChatGPT? 2、什么是Claude? 3、为什么推荐Claude? 3.1、Claude特性 4、注册 slack 5、Claude添加到Slack 6、出现APP Unavailable问题 7、如何解决该问题 8、使用感受 8、1代码测试 8、2文学测试 8、3英语测试 1、什么是ChatGPT&a…

防溺水智能预警监控系统解决方案

一、方案背景 随着夏季暑期的到来,孩童、学生溺水的警钟又不断敲响。预防夏季溺水,不仅要求学校方面要加强安全宣传教育,同时相关部门也需要加强对河流、湖泊、水库、池塘等水域的监控和人员靠近预警。 目前水库、河湖、堤坝、河湖岸线、深水…

图观 智慧交通合集 | 9大行业细分应用案例 一次性看个够!

随着城市化进程的加速和交通需求的不断增长,城市交通系统的安全、高效、智能化的要求越来越高,智慧交通正成为现代城市发展的必然趋势。数字孪生技术的出现,为智慧交通领域的应用提供了更为广阔的空间。 数字冰雹深耕数字孪生行业十余载&…

【Java高级语法】(九)IO流:肝了三天三夜,我打赌没有比我这边更细的探索Java I\O流的文章了~

Java高级语法详解之IO流 :one: 概念1.1 输入流和输出流1.2 字节流和字符流 :two: 优势和缺点:three: 使用3.1 File 类3.2 RandomAccessFile 类3.3 字节流3.3.1 文件字节流3.3.2 缓冲字节流3.3.3 基本数据类型字节流3.3.4 打印流3.3.5 对象序列化流3.3.6 字节数组流 3.4 字符流3…