1月12日 · 2022年

基于Babylon的三维模型旋转指南

112 0
Babylon_Rotate_Mesh 基于Babylon的三维模型旋转指南 前言 在做基于Babylon的三维橱柜项目时,需要用到旋转的功能,探究了一下,发现三维旋转有着多种方法,且多种方法有着自己的特性,因此在此记录一下。   正文 旋转理论 三维旋转常见的有三种表示方式:矩阵旋转,欧拉旋转与四元数。 矩阵旋转使用了一个4*4大小的矩阵来表示绕任意轴旋转的变换矩阵; 欧拉旋转则是按照一定的坐标轴顺序(例如先x、再y、最后z)、每个轴旋转一定角度来变换坐标或向量,它实际上是一系列坐标轴旋转的组合; 四元数则是使用四维的四元数就可以表示任意方向. 1.矩阵旋转 简单来说,一个点在二维或三维里旋转一定角度后新的坐标,是可以通过一个矩阵计算求解的,具体的证明过程可参见:旋转矩阵(Rotation Matrix)的推导及其应用 优缺点 优点: 旋转轴可以是任意向量. 缺点: 旋转其实只需要知道一个向量 + 一个角度,一共4个值的信息,但矩阵法却使用了16个元素; 而且在做乘法操作时也会增加计算量,造成了空间和时间上的一些浪费. 2.欧拉旋转 欧拉角是用来确定定点转动刚体位置的3个一组独立角参量,由章动角θ(or β ) 、旋进角(即进动角)ψ(or γ )和自转角φ(or α )组成。任何一个旋转可以表示为依次绕着三个旋转轴旋三个角度的组合。这三个角度称为欧拉角。 三个轴可以指固定的世界坐标系轴,也可以指被旋转的物体坐标系的轴。三个旋转轴次序不同,会导致结果不同。 用一句话说,欧拉角就是物体绕坐标系三个坐标轴(x,y,z轴)的旋转角度。 由于欧拉角并没有一个统一的标准,这样就会导致不同人描述欧拉角的旋转轴和旋转的顺序可能是不同的,因此使用其他人的欧拉角时,应当搞清楚对方的约定。具体的欧拉角还挺复杂的,更多详细内容可参见:欧拉角 由于Babylon最常用的方法(Rotation)是基于欧拉角来决定模型的旋转的,因此简单介绍一下欧拉角。 文档:Mesh…
12月8日 · 2021年

Flask项目集成Celery

34 0
Flask项目Celery集成指南 Flask项目集成Celery 1. 前言 之前在做公司一个项目的时候,需要将前端数据提交到服务器,由服务器进行计算,将计算结果返回给前端。由于存在部分任务计算时间过长,因此会导致前端在发送计算请求后,在请求的限制时间内并不能得到计算的结果。此时,要想实现快速响应客户端的需求,就需要考虑使用任务队列了。 任务队列是一个单独的程序,与网站没关系。只是任务队列提供了接口,在网站中通过代码操作任务队列,比如:添加任务,查看任务结果等。 2. Celery介绍 Celery 是一个简单、灵活、可靠的分布式系统,用于处理大量消息,同时提供维护此类系统所需的工具。它是一个专注于实时处理的任务队列,同时也支持任务调度。 官方文档:Introduction 因为是使用python项目开发,所以安装Celery的命令如下: xxxxxxxxxx 1 1 pip install celery 3. Celery工作原理 3.1 生产者消费者模式 在介绍Celery工作原理之前,需要简单介绍一下生产者消费者模式。 在实际的软件开发过程中,经常会碰到如下场景: 某个模块负责产生数据,这些数据由另一个模块来负责处理(此处的模块是广义的,可以是类、函数、线程、进程等)。 产生数据的模块,就形象地称为生产者(Producer);而处理数据的模块,就称为消费者(Consumer)。 生产者消费者模式是通过一个容器来解决生产者和消费者的强耦合问题。生产者(Producer)和消费者(Consumer)彼此之间不直接通讯,而通过消息队列(缓冲区Buffer)来进行通讯。 简单来说:生产者(Producer)生产完数据之后不用等待消费者(Consumer)处理,直接扔给消息队列,消费者(Consumer)不找生产者(Producer)要数据,而是直接从消息队列里取,消息队列就相当于一个缓冲区(Buffer),平衡了生产者(Producer)和消费者(Consumer)的处理能力。   举个通俗的例子: 假如你非常喜欢吃包子(吃起来根本停不下来),今天,你妈妈(生产者)在蒸包子,厨房有张桌子(缓冲区),你妈妈将蒸熟的包子盛在盘子里,然后放到桌子上,你在看电视,看到桌子上有包子,你就会拿走。 此时,你和你妈妈使用了同一个桌子,这个桌子就是共享对象。生产者用于添加包子,消费者用于取走包子。好处是,你妈妈(生产者)不用直接把包子给你,只需要把包子放在桌子上,如果桌子满了,就不再放了,等待。即使有多个消费者也无所谓。 这样的好处是:生产者不用关注哪个消费者拿了包子,而消费者只需要关注桌子上是否有包子,没有的话就等待。 3.2 Celery原理 理解了生产者消费者模式之后,介绍celery的原理。…
12月8日 · 2021年

前端Cross-env的应用

33 0
前端Cross-env的应用 前端Cross-env的应用 前言 在实际开发项目的时候,通常会遇到需要区分 开发环境、生产环境、测试环境,且不同的环境请求不同的接口API。切换到不同环境的时候需要改代码,有时忘记的话, 往往就会导致对应的环境出现问题。这个时候在项目中配置 环境变量 就可以有效避免这个问题。 Cross-env 它是运行跨平台设置和使用环境变量(Node中的环境变量)的脚本。 Github:官网 安装 xxxxxxxxxx 1 1 npm install --save-dev cross-env 使用 设置一个环境变量 xxxxxxxxxx 5 1 { 2  "scripts": { 3      "build": "cross-env NODE_ENV=production webpack --config…
10月8日 · 2021年

JS仿Excel数字转英文字母

66 0
JS仿Excel数字转英文字母 JS仿Excel数字转英文字母 前言 开发的时候遇到一个需求,其中需要使用js模拟Excel,将数字转换成Excel一样的英文字母。本质上其实就是进制转换,10进制转换成26进制。即: 1 => A 26 => Z 27 => AA 703 => AAA 正文 数字转英文字母 1) 转换结果的最后一位可以根据数字对26的求余计算得到,即: 27 对 26 求余,余数为1,转换为英文字母为A。 27 % 26 = 1 … 1 => A 703 对 26求余,余数为1,转换为英文字母为A。…
10月8日 · 2021年

vue-cli3配置svg图标

19 0
vue-cli3与svg Vue-cli3引入封装Svg图标 前言 在前端项目中使用图标,除了字体图标以外,最喜欢用的应该就是svg图标了,不仅放大不失真,而且可以和字体图标一样随意更改颜色。之前都是使用的vue-cli2项目引入svg图标,后来开始使用vue-cli3了,配置有些不同,但大体相似,在此做个记录,避免重复造轮子。 使用方法 安装插件 安装svg-sprite-loader xxxxxxxxxx 1 1 npm install svg-sprite-loader --save-dev 创建组件 在components文件夹下创建svgIcon文件夹,并在svgIcon文件夹中创建一个新的组件,名字为SvgIcon.vue,内容如下: xxxxxxxxxx 43 1 <template> 2  <svg :class="svgClass" aria-hidden="true"> 3    <use  :xlink:href="iconName" /> 4  </svg> 5 </template> 6 7 <script>…
10月8日 · 2021年

Git使用之Git-flow

27 0
git 前言 在9月的最后一天,面临着即将的国庆小长假,内心就像脱缰的野马在草原上肆无忌惮地放肆。永伟大哥似乎发现了这一点,因此打算给我们几个新人讲一下关于Git的事情,也算是补上之前挖的坑。特此记录。 简介 Git目前是世界上最先进的分布式版本控制系统(没有之一)。 所谓的版本控制系统,简而言之则是对于需要改动的文件每次修改的版本进行一个记录的系统。 写论文的时候经常会出现一个情况:想删除一个段落,又怕将来想恢复找不回来怎么办?有办法,先把当前文件“另存为……”一个新的Word文件,再接着改,改到一定程度,再“另存为……”一个新文件,这样一直改下去,最后一篇论文变成了: 过了几天,再想找回被删除的段落,但是早已记不住忘记删除前保存在哪个文件里,只好一个个凭借记忆去找,非常麻烦。这还只是一个文档,且仅有自己一个人参与编辑,如果有多个人编辑多个文档的情况下,想要找回之前的内容,非常困难。 而所谓的版本控制系统,则是可以记录每一次文件的改动,待日后需要找到之前的版本时,非常的清晰: 版本 文件名 用户 说明 日期 1 paper.doc 陈默 删除了软件服务条款5 7/12 10:38 2 paper.doc 陈默 增加了License人数限制 7/12 18:09 3 paper.doc 陌尘 财务部门调整了合同金额 7/13 9:51 4 paper.doc 陈默 延长了免费升级周期…
9月29日 · 2021年

python异常处理机制

39 0
python异常处理机制 1. 前言 在自己摸索开发的过程中,程序运行时难免会碰到一些错误,尤其当前后端交互时出现各种资源问题,例如404,500等,在写前端代码的时候,就深知异常处理机制是十分重要的,因此在学习python时,有必要去学习一下Python程序的异常处理机制。 当Python程序遇到一些错误,例如除数为 0、年龄为负数、数组下标越界等,这些错误如果不能发现并加以处理,很可能会导致程序崩溃。处理异常机制的存在,可以让我们捕获并处理这些错误,让程序继续沿着一条不会出错的路径执行。 可以简单的理解异常处理机制,就是在程序运行出现错误时,让 Python 解释器执行事先准备好的除错程序,进而尝试恢复程序的执行。 借助异常处理机制,甚至在程序崩溃前也可以做一些必要的工作,例如将内存中的数据写入文件、关闭打开的文件、释放分配的内存等。 Python 异常处理机制会涉及 try、except、else、finally 这 4 个关键字,同时还提供了可主动使程序引发异常的 raise 语句。 2. 常见的异常类型 编写程序时遇到的错误大致分为两类:语法错误 和 运行时错误。 2.1 语法错误 语法错误,也就是解析代码时出现的错误。当代码不符合 Python 语法规则时,Python解释器在解析时就会报出 SyntaxError 语法错误,与此同时还会明确指出最早探测到错误的语句。例如: xxxxxxxxxx 1 1 print "Hello,World!" 我们知道,Python…
9月27日 · 2021年

virtualenv & venv & pipenv 之间的联系与区别

27 0
virtualenv &amp; venv &amp; pipenv 之间的联系与区别 1. 前言 学习python后端使用flask框架时,由于需要新建虚拟环境,在学习虚拟环境的时候遇到了virtualenv、venv、pipenv等名词。这些都与Python的虚拟环境有关,但之间的联系与区别就需要注意区分一下,因此在此记录。 2. virtualenv virtutalenv 官网:https://virtualenv.pypa.io/en/latest/reference/ virtualenv 是目前最流行的 Python 虚拟环境配置工具。它不仅同时支持 Python2 和 Python3,而且可以 为每个虚拟环境指定 Python 解释器,并选择不继承基础版本的包。 2.1 优点 使得不同Python应用的开发环境相互独立。 开发环境升级不影响其他应用的开发环境,也不会影响全局的环境(默认开发环境是全局开发环境),因为虚拟环境是将全局环境进行私有的复制,当我在虚拟环境进行 pip install 时,只会安装到选择的虚拟环境中。 它可以防止系统中出现包管理混乱和版本的冲突。 2.2 使用方法 (1)使用pip安装virtualenv xxxxxxxxxx 1…
9月27日 · 2021年

Pip、Pipenv安装特别慢

51 0
Pipenv安装特别慢 前言 在学习Python的Flask框架时,使用到了Pipenv代替pip,在下载项目的依赖时,locking部分特别慢,经常超时失败。搜索了一下解决方法,整理到一起。 pip 安装缓慢 问题原因 pipenv 是 Pipfile 主要倡导者、requests 作者 Kenneth Reitz 写的一个命令行工具,主要包含了Pipfile、pip、click、requests和virtualenv,能够有效管理Python多个环境,各种第三方包及模块。 pipenv中的Pipfile中source源为python官网,服务器在国外,因此加载的时候特别慢。 解决方法:将URL修改为国内的镜像源即可。 解决方法 国内镜像源: 清华:https://pypi.tuna.tsinghua.edu.cn/simple 阿里云:http://mirrors.aliyun.com/pypi/simple/ 中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/ 华中理工大学:http://pypi.hustunique.com/ 山东理工大学:http://pypi.sdutlinux.org/ 豆瓣:http://pypi.douban.com/simple/ 使用方法: 1. 临时 xxxxxxxxxx 2 1 # 临时:pip install -i +…
9月7日 · 2021年

vue源码——vDOM与Diff算法

21 0
diff算法 前言 入职第一个月开发公司一个小项目,由于项目比较小,因此由我一人担任前后端。在前端开发时,使用到了Element-UI的table组件。由于项目需要,需要对table组件进行样式的自定义设置。当时遇到了一个解决了很久的bug,当时还是求助公司的大牛才顺利解决。贴上当时的Bug记录: 【环境】 vue2.0+elementUI 【背景】 左右布局,左边是element table,右边是自己设计的菜单。左边table里装着全部分类的数据,右边菜单是每个分类的类别。 【需求】 点击右边菜单的类别,右侧样式跟随点击处,左边表格数据会自动选择对应数据并跟随。 【问题】 点击右边菜单,样式正常跟随,左侧表格却需要点击两次。排查后发现,只要修改控制样式的变量就会出现左侧表格的重新渲染。不修改控制样式的变量,一切正常。 【解析】 element table 有一个key控制渲染,因为我这里已经设置了随机值,所以只要页面上有变量更改,table就会刷新。 【解决】 element table key设置为固定值。 后来试用期的导师解释道:“由于vue的diff算法原因,因此修改变量会导致table的重新渲染,可以去了解一下diff算法”。 因此,有了这篇笔记。   概念 虚拟DOM 虚拟DOM(Virtual DOM),用普通js对象来描述DOM结构,因为不是真实DOM,所以称之为虚拟DOM。 虚拟DOM是相对于浏览器所渲染出来的真实的DOM而言的。在react、vue等技术出现之前,我们要改变页面展示的内容,只能通过遍历查询DOM树的方式找到需要修改的DOM,然后修改样式行为或者结构,以此来达到更新UI的目的。 但这种方式相当消耗计算资源,因为每次查询 DOM 几乎都需要遍历整棵 DOM 树,如果建立一个与 DOM 树对应的虚拟 DOM…

🎉 总访问量:13162 今日访问量:324 您是今天第:324 个访问者🎉