25-Threejs平行光源阴影渲染过程记录与要点总结(多图预警)
概述:阅读完本文,你将学会如何使用 Threejs 平行光源创建阴影以及如何避免阴影渲染过程中的一些坑;
基本原理:Threejs 阴影的渲染有三个关键的条件:
Render 对象开启阴影渲染能力;
光源或阴影原物体开启阴影投射;
显示阴影的物体开启阴影接收;
渲染过程关键代码:根据上面的原理,以下代码片段演示在实际 threejs 开发中如何进行配置
123456789101112131415161718192021222324252627282930313233//1.创建rendererconst renderer: THREE.WebGLRenderer = new THREE.WebGLRenderer({ antialias: true,})renderer.shadowMap.enabled = true //开启阴影renderer.shadowMap.type = THREE.VSMShadowMap //设置阴影类型//2.创建平行光源和光源辅助工具const light = new THREE.DirectionalLight(0xfff ...
实现博客更新推送后自动刷新EdgeOne节点缓存
前情:在上一篇建站记录系列文章中,我们为博客源服务器配置了CDN加速,但是实际使用中发现,我们推送代码,自动构建生成的新包发到服务器后,我们使用域名访问站点,内容缺没有更新,这是为什么呢?实际上是因为站点资源更新后,CDN没有及时回源进行缓存刷新。
我使用的CDN产品是在腾讯云搞活动买服务器时顺便买的EdgeOne,好像是50块钱一年,据说是新一代的CDN,多了DDos攻击防御和CC攻击功能,但是我用的是活动版就享受不到这些功能了,估计等这个到期了还是要换回更便宜的常规CDN,这个正常价续费太贵了,我等一般人实在用不起啊。😂,下面就以EdgeOne为例,记录下我的优化过程。
两种实现思路:
在服务器端监听文件变化,如果有文件推送,则调用腾讯云API刷新CDN缓存;
通过GithubAction实现:在代码推送到远程仓库后,触发Action工作流,调用腾讯云API实现CDN缓存刷新;
相关知识补充:1.什么是腾讯云API?在本文的需求中,腾讯云API是实现CDN缓存刷新的关键工具,它是腾讯云提供的实现其一系列产品操作的网络接口,通过调用这些接口,开发者可以实现自己想要的功能,比如我们 ...
记录一次前端按省份统计点位数量的算法优化
情况:在做WebGIS项目的过程中,遇到一个需求是按省份统计省份内点位的数量,最开始我用双循环暴力统计,当点位达到三千左右时,统计耗时达到了2500ms左右,于是有了效率优化的需求。
优化前代码:123456provinces.forEach(province=>{ province.count = 0 points.forEach(point=>{ if(turf.booleanPointInPolygonO(point,province)) province.count++ })})
优化思路:1.循环逻辑优化:每个点位在判断属于一个省份后,它就不会再属于第二个省份,就可以将该点移除数组,从而减少剩下省份统计时遍历的点位数量;
2.多边形简化:每个省份的多边形其实也是由很多个点组成,多边形越复杂,判断一个点是否在多边形内时消耗的时间也越多,因此可以简化多边形来提高空间计算的效率;
优化后代码:123456789101112131415161718provinces.forEach(provinc ...
Cesium矩阵变换实践——实现3dtiles模型平移、旋转、缩放
矩阵变换基础知识补充:
矩阵变换是图形学中的知识,在Cesium开发中理解它的概念和实践也同样重要。学会了矩阵变换可以轻松完成对模型的平移、旋转、缩放操作;感兴趣的同学可移步games101B站视频课补充相关知识;
1.平移、旋转、缩放都可以在线性代数中用一个变换矩阵表示;
2.对一个图形进行变换,只需要将图形的每一个坐标点左乘一个变换矩阵,即可计算出这个图形变换后的每一个新坐标点;
3.矩阵的乘法运算不符合交换律,左乘和右乘结果不一样;
实现思路:模型平移:假设在三维空间中有一个模型,可以建立一个三维空间坐标系来描述模型的位置,对模型实现平移操作只需要对模型的x,y,z坐标进行加减即可;但是在Cesium中,默认三维坐标系是以球心为原点的ENU坐标,使用此坐标直接进行模型平移运算较为困难,我们还需要建立一个以模型中心为原点的局部ENU坐标,以简化对模型的坐标计算。
模型旋转、缩放:对模型旋转和缩放原理与平移差不多,但需要注意应用一个旋转、缩放矩阵时,需要将旋转、缩放参考点先平移到坐标原点;
关键源码封装:
!未考虑执行效率,有精力可继续优化;
123456789101112131 ...
Cesium实现wms瓦片贴3dtiles
需求最近在项目开发中遇到一个需求,需要将Cesium加载的地块瓦片服务贴到3dtiles倾斜摄影模型上。
思路结合网上查询的相关资料,初步确定了四种实现思路:
修改imageryProvider使其支持贴地 (技术难度大)
通过WFS服务空间查询获取3dtiles范围的矢量要素渲染 (性能开销太大,严重卡顿)
通过3dtiles范围裁剪WMS服务,设置rectangle纹理为裁剪的图片实现贴地 ( 最终方案 )
直接给3dtiles模型叠加一层图片材质; ( 较为复杂 )
其中1和4的思路没有去实际验证,有能力且有兴趣的朋友可以尝试一下。我验证了2和3的方案,其中第2方案加载后导致操作严重卡顿,性能太差放弃了,最终选用了第3个方案。
关键代码1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556//通过config文件获取wms服务的url和图层名const blockServiceUrl = gis_config.wms_serv ...
Cesium实现将3dtile模型定位到任意经纬度
背景:3dtiles文件在Cesium场景中加载时,是自带中心的坐标的,在做某个功能时需要将其定位到指定的经纬度。
思路:Cesium中每个3dtile对象都有modelMatrix属性,通过向该属性赋值,改变其变换矩阵,可以实现对模型的平移、旋转、缩放。
代码:1234567891011121314151617181920212223242526272829303132//移动3dtiles模型中心点到某个经纬度async updateTilesetLocation(tileset, [lng, lat]) { // 获取tileset的中心点坐标 let startPosition = tileset.boundingSphere.center; // 获取tileset中心点高度 const height = Cesium.Cartographic.fromCartesian(startPosition).height // 平移终点坐标 const endPosition = Cesium.Cartesian3.fromDegrees(lng, lat, ...
前端代码优化之配置文件抽取思路
问题:在前端开发某个项目过程中,遇到了好几次需要换环境部署的场景,每次都需要在代码中改后端url以后重新打包,这样非常麻烦。
如果可以把这部分配置抽取出来,每次需要换环境部署时只要改一下配置文件,就可以不用重新打包,省下大量无意义的重复劳动,实现一包多用。
解决方案:将配置抽取到一个json文件中,放到public目录下,通过请求的方式获取。
来自GPT的赞美:
使用cdn加速优化腾讯云COS图床的安全性问题
问题:之前在搭建腾讯云COS图床的过程中,查阅资料时留意到了有小伙伴说有被盗刷的风险,于是上网查阅了一下相关资料,还真是!(这个图里的兄弟太惨了😂)
参考链接:https://cloud.tencent.com/developer/article/2239296?areaSource=100001.4&traceId=kQzP3W3NM0uma1MVnz5AP
于是升级图床的安全性防护就很有必要,查了N多方案后,了解到可以通过CDN加速的方式提高图床的安全性,有效防止盗刷流量。
思路:
COS桶设置私有读写,禁止空refer访问;
设置私有读写后,直接使用COS桶的默认url就无法访问桶内的资源了,怎么办呢?这时候CDN就出场了
使用子域名配置一个CDN,指向COS桶的URL,腾讯云会提示授权给cdn访问COS桶,点击确认授权
上一步授权后,CDN就可以访问私有读写的存储桶了
等CDN部署完成,就可以使用CDN加速的域名访问我们存储桶内的资源,大功告成!🥳
具体操作:
需要前置知识:CDN,域名
知道原理以后操作就很简单,我这里就暂时先不复现了,后面有时候可能会更 ...
记录一次在Cesium场景中模型贴地效果的优化
问题:今天在开发业务过程中接到一个需求,是优化Cesium场景中模型的贴地效果,之前模型贴地的实现方式是在模型加载时,设置HeightReference为CLAMP_TO_GROUND来实现的,但是在实际使用场景中,这种方式并不能满足需求,以这种方式批量加载的模型,会在视角移过去之后才慢慢一个一个贴到地形上面,如果电脑性能很慢,或者浏览器没有启用GPU渲染,就会非常卡。
优化思路:问了下万能的GPT,它是这样说的:
然后查了下官方文档,发现有例子,直接复制粘贴需要的部分:
最后改造原有的loadModel函数
12345678910111213141516171819202122232425262728293031323334353637383940async loadModel({ position: [lng, lat], modelUrl, bearing = 0 }) { console.log('模型加载') //获取精确贴地形高度 const terrainProvider = viewer.sc ...
09-使用CDN加速网站
一、CDN基本概念CDN是什么?CDN的英文全称是Content Delivery Network,中文翻译叫内容分发网络
用现实中的例子来解释,就好比京东的物流网:
货物如果都呆在原产地,等客户下单后直接从原产地发货,这种就是不用cdn,网站访客与服务器直连的方式
货物如果生产出来先预先发货到几个大的物流中心,分管西部、西北、华中、东南、东北几大地区,那么这些地区的客户下单后,如果物流中心有货,就直接从物流中心发货,如果没货再从原产地发货,这种方式就是用上了cdn加速的方式
CDN是怎么工作的?CDN 的工作原理如下:
缓存内容: CDN 在全球(或全国)各地部署了多个服务器节点,这些节点被称为边缘服务器。这些服务器会缓存网站的静态资源,如图像、CSS、JavaScript 文件等。
就近访问: 当用户请求访问某个网站时,CDN 会自动将用户的请求路由到离用户地理位置最近的边缘服务器上。
加速传输: 边缘服务器会提供缓存过的内容,从而减少从源服务器到用户的传输距离,加速数据传输。这有助于降低延迟并提高网站加载速度。
利用CDN的优势?
提高网站性能: 用户可以从离他们更近的服 ...
ssl证书部署—使网站支持https访问
背景:前端时间在网站部署完成后,直接通过http访问时,浏览器会提示网站不安全,为了使网站支持https访问,需要申请一个https证书部署到服务器上。
步骤:1.申请免费的ssl证书如果没有特殊需求,可以直接申请免费的ssl证书使用,我买的是腾讯云的域名,可以在ssl证书控制台直接申请
2.下载证书上传到服务器申请到免费证书后在我的证书里点击下载,然后上传到服务器的/etc/nginx/ssl目录下
3.修改nginx配置使证书生效nginx配置文件:
1234567891011121314151617181920212223242526272829server { #SSL 默认访问端口号为 443 listen 443 ssl; #请填写绑定证书的域名 server_name cloud.tencent.com; #请填写证书文件的相对路径或绝对路径 ssl_certificate cloud.tencent.com_bundle.crt; #请填写私钥文件的相对路径或绝对路径 ssl_certificate_key cloud. ...
nginx静态网站部署配置高级
背景:在刚开始使用nginx部署静态网站时,我对nginx中的多个配置文件——nginx.d,nginx.conf,sites-available/* 的作用和概念搞不清楚,不太明白他们是怎么工作的,经过几天跟gpt的问答学习,逐渐梳理出来了一些关键问题,有助于新手搞清楚nginx的配置文件脉络,在这里分享给大家。
问答:Q1: nginx配置文件有哪些 ?Nginx的配置文件通常包括以下几个主要部分:
nginx.conf:这是Nginx的主配置文件,包含全局配置指令,比如worker_processes(工作进程数)、events(事件模块配置)等,可以理解为项目开发中的main函数,即入口配置文件
sites-available目录:这个目录通常包含所有可用的网站配置文件。每个配置文件对应一个网站的配置。这个目录下有一个默认的default配置文件,是nginx为我们提供的配置模版,在新增配置时,推荐以复制该模版然后进行修改的方式来新增配置。
sites-enabled目录:这个目录包含了实际生效的网站配置文件的符号链接。Nginx默认加载这个目录中的配置文件。
...