智慧城市流光扫描光效

使用Three.js实现智慧城市流光效果，效果如上，需要源码得可联系文末企鹅：1582360909

import { WebGLRenderer, PerspectiveCamera, Scene, Mesh, SphereGeometry, MeshPhongMaterial, DoubleSide, Vector3, HemisphereLight, AxesHelper, ObjectLoader, Vector2, DirectionalLight, PlaneGeometry, TextureLoader, MirroredRepeatWrapping, RepeatWrapping, ClampToEdgeWrapping, MeshBasicMaterial, Group, CylinderBufferGeometry, FrontSide, BackSide } from "three"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// import * as THREE from "three"
// THREE.WebGLRenderer(); THREE.PerspectiveCamera();
var renderer, camera, control, scene;var effectComposer, renderPass, bloomPass;
var params = {exposure: 1,bloomStrength: 1.7,bloomThreshold: 0.01,bloomRadius: 0.4
};
var gui;var textureLoader = new TextureLoader();
var textureTest, waveMesh;import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader"
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader"
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer" //jsm js module
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass" //jsm js module
import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass" //jsm js module
import { GUI } from "three/examples/jsm/libs/dat.gui.module"
import {get } from "./fetch";
import * as cga from "xtorcga"
import { toSVGData, parsePathNode } from "./svgPath"
var roadMaterial;function init() {renderer = new WebGLRenderer({ antialias: true });document.body.appendChild(renderer.domElement);renderer.setSize(window.innerWidth, window.innerHeight);// renderer.setClearColor(0xffffff);camera = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100000);camera.position.y = 1000;camera.position.z = 500;control = new OrbitControls(camera, renderer.domElement);// camera.lookAt(new Vector3(0, 1, 1))var light = new HemisphereLight(0xffffff, 0x444444);// var dirlight = new DirectionalLight(0xffffff);scene = new Scene();scene.add(light);// scene.add(dirlight);scene.add(new AxesHelper(10000));// scene.add(new Mesh(new SphereGeometry(2, 30, 30), new MeshPhongMaterial({ color: 0xff0000, side: DoubleSide })));window.addEventListener('resize', () => {renderer.setSize(window.innerWidth, window.innerHeight);camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();effectComposer.setSize(window.innerWidth, window.innerHeight);renderPass.setSize(window.innerWidth, window.innerHeight)bloomPass.setSize(window.innerWidth, window.innerHeight);})loadModel();initEffectComposer();initGUI()
}function loadModel() {var mtlLoader = new MTLLoader();var objLoader = new OBJLoader();for (let i = 1; i < 8; i++) {mtlLoader.load("../assets/model/city/ny" + i + ".mtl", function(preMaterial) {preMaterial.preload();objLoader.setMaterials(preMaterial).load("../assets/model/city/ny" + i + ".obj", function(obj) {obj.position.set(6691, 604.35216, 2154.6111);scene.add(obj);})})}//---纹理的讲解-------------------var textureLoader = new TextureLoader();textureTest = textureLoader.load("./assets/flower-1.jpg");// texture.offset.set(0.5, 0);textureTest.repeat.set(1, 1);textureTest.rotation = Math.PI;textureTest.wrapS = RepeatWrapping; // ClampToEdgeWrapping; //RepeatWrapping; //MirroredRepeatWrappingtextureTest.wrapT = RepeatWrapping; // ClampToEdgeWrapping; //RepeatWrapping; //MirroredRepeatWrapping//var plane = new Mesh(new PlaneGeometry(200, 200), new MeshPhongMaterial({map: textureTest}));scene.add(plane);// ---城市道路加载-------get("../../assets/data/城市应急场景.json").then(response => {if (response.ok) {return response.json()} else {}}).then(data => {var paths = [data.d[25],data.d[26],data.d[27]];var strs = []for (let i = 0; i < paths.length; i++) {const node = paths[i];var pts = node.p.points.__avar sgs = node.p.segments.__avar str = toSVGData(sgs, pts)strs.push(str)}// var lineMaterial = new LineBasicMaterial({//     color: 0xff0000,// });var roadMap = textureLoader.load("../assets/model/city/traffic_01.png");roadMap.wrapS = RepeatWrappingroadMap.wrapT = RepeatWrappingroadMap.rotation = Math.PI / 2;roadMap.offset.set(0.5, 0.5);var roadMap1 = textureLoader.load("../assets/model/city/traffic_01.png");roadMap1.wrapS = RepeatWrappingroadMap1.wrapT = RepeatWrappingroadMap1.rotation = Math.PI / 2;roadMap1.offset.set(0.5, 0.5);var roadMap2 = textureLoader.load("../assets/model/city/traffic_01.png");roadMap2.wrapS = RepeatWrappingroadMap2.wrapT = RepeatWrappingroadMap2.rotation = Math.PI / 2;roadMap2.offset.set(0.5, 0.5);roadMaterial = [new MeshBasicMaterial({map: roadMap,transparent: true,depthWrite: false,}), new MeshBasicMaterial({map: roadMap1,transparent: true,depthWrite: false,}), new MeshBasicMaterial({map: roadMap2,transparent: true,depthWrite: false,})]var roadGroup = new Group();roadGroup.position.set(66.94476, 0, -235.22057);var roaddata = [{"position": {"x": 66.94476,"y": -235.22057},"thickness": 10},{"position": {"x": 7.04712,"y": -284.96567},"thickness": 14},{"position": {"x": -42.85882,"y": -603.58046},"thickness": 20}]for (let p = 0; p < strs.length; p++) {var path = parsePathNode(strs[p])var group = new Group();group.position.set(roaddata[p].position.x, 0, roaddata[p].position.y)for (var j = 0, jl = path.subPaths.length; j < jl; j++) {var subPath = path.subPaths[j];var points = subPath.getPoints();var v3ps = [];for (let k = 0; k < points.length; k++) {const p2o = points[k];v3ps.push(new Vector3(p2o.x, 0, p2o.y))}// carPath.splitByFromToDistance(0, 10);// var extrudeRes = cga.extrude();var geometry = cga.extrudeToGeometryBuffer([cga.v3(-roaddata[p].thickness / 2, 0, 0), cga.v3(roaddata[p].thickness / 2, 0, 0)], v3ps, {normal: cga.v3(0, 0, 1),isClosed: true,sealStart: false,sealEnd: false,textureScale: new cga.Vector2(1 / roaddata[p].thickness, 1 / 2500)})var roadMesh = new Mesh(geometry, roadMaterial[p]);group.add(roadMesh);group.position.set(-104.29041, 0, -303.55284);}roadGroup.add(group);roadGroup.rotation.y = Math.PI / 2;}scene.add(roadGroup)}).catch(e => {console.error(e)});var waveTexture = textureLoader.load("../assets/model/city/gradual_blue_01.png")//----扩散波-------var cylinderGeo = new CylinderBufferGeometry(50, //顶部半径50, //底部半径200, //高50, //分段1,true);cylinderGeo.translate(0, 100, 0);var cylinder = new Mesh(cylinderGeo,new MeshBasicMaterial({transparent: true,map: waveTexture,}));waveMesh = generateTransparent(cylinder);waveMesh.position.x += 500;scene.add(waveMesh);
}/*** 透明的解决方案* @param {*} mesh */
function generateTransparent(mesh) {var group = new Group();var frontMesh = new Mesh(mesh.geometry, new MeshBasicMaterial({transparent: true,map: mesh.material.map,side: FrontSide,opacity: 0.8 //1是不透明 0是完全透明，默认是1}));var backMesh = new Mesh(mesh.geometry, new MeshBasicMaterial({ transparent: true, map: mesh.material.map, side: BackSide, opacity: 0.8 }));backMesh.renderOrder = 0;frontMesh.renderOrder = 1;group.add(backMesh);group.add(frontMesh);return group;
}function initEffectComposer(params) {effectComposer = new EffectComposer(renderer);effectComposer.setSize(window.innerWidth, window.innerHeight);//这个通道主要是把当前场景渲染成一张图片renderPass = new RenderPass(scene, camera);effectComposer.addPass(renderPass);bloomPass = new UnrealBloomPass(new Vector2(window.innerWidth, window.innerHeight),10, //strength发光强度  值越大就越亮0.4, //radius 发光半径  发光扩散半径  值越大，扩散就越均匀 值越小 基本上就往模型上集中1.0, //threshold 发光的阈值 大于这个阈值才发光，准确亮度比阈值越大的地方放光就越强烈)effectComposer.addPass(bloomPass);}function initGUI() {gui = new GUI();gui.add(params, 'exposure', 0.1, 2).onChange(function(value) {// renderer.toneMappingExposurerenderer.toneMappingExposure = value; //调节整个场景亮度，默认值是1});gui.add(params, 'bloomThreshold', 0.0, 1.0).step(0.01).onChange(function(value) {bloomPass.threshold = Number(value);});gui.add(params, 'bloomStrength', 0.0, 3.0).step(0.01).onChange(function(value) {bloomPass.strength = Number(value);});gui.add(params, 'bloomRadius', 0.0, 1.0).step(0.01).onChange(function(value) {bloomPass.radius = Number(value);});
}function render() {// renderer.render(scene, camera);if (roadMaterial) {roadMaterial[0].map.offset.x += 0.002;roadMaterial[1].map.offset.x += 0.004;roadMaterial[2].map.offset.x += 0.008;}waveMesh.scale.x += 0.05;waveMesh.scale.z += 0.05;if (waveMesh.scale.x > 20) {waveMesh.scale.x = 1;waveMesh.scale.z = 1;}// textureTest.offset.x += 0.03;// renderer.render()effectComposer.render(scene, camera);// 做任何事情requestAnimationFrame(render);
}init();
render();
render();

智慧城市流光扫描光效相关推荐

扫描中国智慧城市：平安给出智慧方法论
理想中的智慧城市应该是什么样子? 自从IBM在2008年提出智慧城市的概念后,诸如此类的问题时长被提及,也有越来越多的城市想要给出示范. 作为世界上老龄化速度第三快的国家,新加坡的回答是以公民为核心: ...
近期活动盘点：2019第六届世界互联网大会、智慧城市的人本尺度城市形态讲座、高管AI大数据能力研修班、英伟达初创企业展示开启报名...
想知道近期有什么最新活动?大数点为你整理的近期活动信息在此 2019第六届世界互联网大会•数字经济产业合作系列活动 2019年10月19日-10月20日 2018年,我国GDP超过90万亿元,全国互联 ...
近期活动盘点：2019第六届世界互联网大会、面向智慧城市的人本尺度城市形态：理论方法与实践讲座、高级管理人员AI大数据能力研修班...
想知道近期有什么最新活动?大数点为你整理的近期活动信息在此 2019第六届世界互联网大会•数字经济产业合作系列活动 2019年10月19日-10月20日 2018年,我国GDP超过90万亿元,全国互联 ...
院士报告 | 李德仁：基于数字孪生的智慧城市(PPT)
来源:转自智慧城市大讲堂, 微信编辑:邱峰.罗兵,张钦煜微信审核:张祥.吴斌.数字理政研究院.中通协大数据分会本文为首届川渝住房城乡建设博览会--川渝数智城市BIM/CIM高峰论坛上,中国科学院院 ...
25万亿规模！中国智慧城市建设刚需在哪？
来源:帮尼资讯如果说当下在中国新基建中最火的名词是什么,智慧城市这四个字几乎脱口而出.而在雪亮工程已经基本结束的当下,智慧城市接过了雪亮工程的大旗,成为了对安防企业来说利润最大.保障最稳的政府类项目 ...
区块链架构下智慧城市发展加速
来源:中国经济时报智慧城市与区块链技术结合愈加紧密在城市建设和管理上,越来越多的城市开始尝试推动区块链技术在智慧城市项目中应用.中国有杭州聚能城.雄安新区;韩国有"区块链首尔城" ...
入局智慧城市，科技互联网巨头路在何方？
来源:亿欧智库我国已进入智慧城市建设新时期.各大巨头先后入局,拓展云服务场景,赋能政务管理与生产生活的方方面面.未来,场景延展.生态构建与人文关怀将成为智慧城市发展的大趋势. 随着新基建政策.&qu ...
2020年中国智慧城市发展值得关注的技术
文章来源:Gartner 图片来源:网络每年Gartner发布的技术成熟度曲线(The Hype Cycle)报告都备受市场瞩目,也成为政府及企业做出重大投资决策的风向标.其原因在于,它不仅能够让C ...
智慧城市产业图谱（2020年）
来源:中国信息通信研究院(转载请注明来源) 编辑 :蒲蒲推进新型智慧城市,是党中央.国务院推动我国新型工业化.信息化.城镇化和农业现代化同步发展做出的重大决策,有利于深化新一代信息通信技术与城市发展 ...

智慧城市流光扫描光效

智慧城市流光扫描光效相关推荐

最新文章

热门文章