WebGL/Threejs瀑布水流粒子效果

news/2024/10/28 21:27:39/

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.ppmy.cn/news/485940.html

相关文章

随笔-不要裸辞

2023年5月份,16-24岁、25-59岁劳动力调查失业率分别为20.8%、4.1%。 先不说这些大数据,就聊聊我身边发生的事儿。 NO1 欢迎你,新同事 A,别的项目组的,先前通过一个同事说过几句话,那是真正的点头之交。今…

(十二)反射与特性 -反射与预定义特性(1)

一、反射 1、什么是反射 了解反射之前,要先了解一下元数据。元数据指保存在程序集中的一些有关程序及其类型的数据,包括类、结构、委托、接口和枚举等)的成员和成员的信息。 程序在运行时,可以查看程序集以及其本身的元数据&…

OpenHarmony端云一体化应用开发快速入门练习(中)登录认证

一、登录认证手机 可以在应用中集成手机帐号认证方式,您的用户可以使用“手机号码密码”或者“手机号码验证码”的方式来登录您的应用。 (一)前提条件 需要在AGC控制台开通认证服务。 需要先在您的应用中集成SDK。 (二&#xff…

2017年电气报价软件排名!评分最高的是它

↑『电老虎dianlaohu』关注中国专业的电气产品销售与服务平台!电气人必关注的微信平台:技术分享、学习交流、业务合作。 ▲电气报价类软件最常用的是:EP精灵和ExWinner成套报价软件。 ▲电气绘图类软件最常用的是:浩辰CAD2017…

电气产品报价单模板

模拟电气产品和多路转换器的作用主要用于信号的切换,目前集成模拟电子电气产品在小信号领域已成为主导产品,与以往的机械触点式电子电气产品相比,集成电子开关有许多优点,例如,切换速率快、无抖动、耗电省、体积小、工作可靠且容易控制等。接下来那我们来详细了解一下电气产品报…

电气论文:基于价格弹性矩阵的需求侧响应(python实现)

专栏解锁后可以查看该专栏所有文章 文章目录 讲解代码讲解 参考文章 代码 首先看下电价是如何影响负荷的 #!/usr/bin/env python3 # -*- coding: utf-8 -*- # @Author: yudengwu(余登武)

全球与中国电气用有机硅弹性体市场深度研究分析报告

【报告篇幅】:98 【报告图表数】:140 【报告出版时间】:2022年1月 报告摘要 2021年全球电气用有机硅弹性体市场销售额达到了 亿美元,预计2028年将达到 亿美元,年复合增长率(CAGR)为 %&#…

电气simulink常用模块_干货丨16种常用模块电路分析,工程师的必备~

电路图一大张,看似复杂,但也都是由一小块一小块的功能模块组成的。因此要根据大的功能先划分成块,再在块里面看是通过什么电路形式实现的,有些起辅助作用,有些起主要作用。下面小编给大家整理了16种常用的模块电路分析,希望对大家有帮助。 1. RS232通讯电路 双路232通信电…