js前端可视化 | 向量叉乘
一、向量叉乘的几何意义
1.1 向量叉乘的几何意义：
①|a x b|可表示为当这两个叉乘向量a，b共起点时，所构成的平行四边形的面积。
②在三维几何中，两个向量的叉乘的运算结果不是标量，而是一个新的向量，更通俗的叫法是法向量，并且a x b所得到的新向量c 垂直于向量a和b组成的坐标平面，即向量c同时垂直于向量a和b。
常用于以下情况：
- 通过两个向量的外积，生成第三个垂直于a、b的法向量，从而构建X、Y、Z坐标系;
- 当a是单位向量时，计算b终点到a所在直线的距离;
- 在二维空间中，axb等于由向量a和向量b构成的平行四边形的面积。
1.2 向量积（矢积）与数量积（标积）的区别
| 名称 | 标积/内积/数量积/点积 | 矢积/外积/向量积/叉积 |
| 运算式 | a·b = |a||b|·cosθ | axb = c, 其中|c| = |a||b|·sinθ，向量c的方向遵守右手定则。 |
| 几何意义和物理意义 |
几何意义：向量a在向量b方向上的投影与向量b的模的乘积， 物理意义：是力向量产生的位移向量所做的功 |
几何意义：c是垂直a、b所在平面，且以|b|·sinθ为高、|a|为底的平行四边形的面积 物理意义：二维空间中向量叉乘的物理意义就是 a 和 b 的力矩（力矩可以理解为一个物体在力的作用下，绕着一个轴转动的趋向。它是一个向量，等于力臂 a 和力 b 的叉乘） |
| 运算结果的区别 | 标量（常用于物理）/数量（常用于数学） | 矢量（常用于物理）/向量（常用于数学） |
1.2.1 向量点积
在N维线性空间中，a、b向量点积的几何意义，是a向量乘以b向量在a向量上的投影分量。它的物理意义相当于a力作用于物体，产生b位移所做的功。点积公式如下图所示：
1.2.2 向量叉乘
叉乘和点乘有两点不同：首先，向量叉乘运算的结果不是标量，而是一个向量；其次，两个向量的叉积与两个向量组成的坐标平面垂直。
以二维空间为例，向量a和b的叉积，就相当于向量a（蓝色带箭头线段）与向量b沿垂直方向的投影（红色带箭头线段）的乘积。如下所示，二维向量叉积的几何意义就是向量a、b组成的平行四边形的面积
二、法向量的叉乘公式
公式速记：
同理，当我们求y值时，先把y1， y2遮挡，只看x值和z值。最后得出结果如下所示：
js前端可视化 | 向量叉乘相关推荐
- js前端可视化 | 单位平面向量旋转的数学原理与计算
一.平面向量旋转原理: 如上图所示,我们用坐标系表示向量,已知原始向量A=(x1, x2), 旋转β角度后得到向量B=(x2, y2),现在我们要求出向量B的坐标值. 此处我们设向量的长度R = 1: ...
- 一份小白前端可视化学习指南——附思维导图
一份小白前端可视化学习指南--附思维导图 前言 因为群里粉丝一直要求我写一篇「可视化入门指南」,今天他来了.其实说起前端可视化,大家所能想到的就是各种图表,大屏.这种看着贼炫酷,而笔者呢工作也一直从事 ...
- PHP密码问题陈婷代码_登录中利用JS前端加密PHP后端解密保证数据非明文传输的安全方法...
为什么要研究这个呢,因为我所在单位的信息管理部门在监控系统上发现有大量的明文账号(身份证号)和密码在传输,被告知这很不安全,索性就直接解决这个问题,利用JS前端加密PHP后端再加密来解决这个问题,保证 ...
- 大数据前端可视化大屏--前端开发之路
从2016年开始接触可视化方向,一直想写一篇文章回顾一下这几年踩过的坑,接下来的这段时间里我会不定时的给大家分享一些可视化方面的经验和感悟,发出来跟大家一块分享一下.一起讨论讨论.共同学习进步. 前言 ...
- 推荐一些有趣实用的前端可视化工具库，助力可视化开发
前言 前端可视化一直是人们常谈到的词,随着SVG,Canvas,WebGL等技术的发展,也涌现了一大批的优秀的可视化库.本文将从中选择一些有趣实用的推荐给大家,工具使用好了,开发效率自然也就提升了. ...
- js 前端抠图 性能优化
原文链接: js 前端抠图 性能优化 上一篇: js 生成器 协程 下一篇: wasm 和cpp std 的使用 性能对比 下图是 字符串键 + 欧式距离 + 四方 字符串键 + 欧氏距离 + 八方 ...
- 前端可视化搭建的拖拽平台
前端可视化拖拽平台 简介 技术栈采用dva+hooks+umi+antd-mobile+sortable.js+react-color.基于sortable.js的前端可视化搭建的拖拽平台,ui组件采 ...
- CheckCode.js 前端验证码插件
CheckCode.js 前端验证码插件 效果截图 插件使用方法 CheckCode.js 本插件的参考示例 效果截图 插件使用方法 // 在html页面引入CheckCode.js <scri ...
- 《D3.js数据可视化实战手册》——2.5 使用子选择器
本节书摘来异步社区<D3.js数据可视化实战手册>一书中的第2章,第2.5节,作者: [加拿大]Nick Qi Zhu,更多章节内容可以访问云栖社区"异步社区"公众号查 ...
- 《D3.js数据可视化实战手册》—— 1.1 简介
本节书摘来异步社区<D3.js数据可视化实战手册>一书中的第1章,第1.1节,作者: [加拿大]Nick Qi Zhu,更多章节内容可以访问云栖社区"异步社区"公众号查 ...
最新文章
- Installing Oracle Database 18c Using RPM Packages
- POJ-2513 Colored Sticks 字典树，欧拉回路
- 手机 x PC 交叉感染？360 安全研究员演示“混血攻击”
- python语言的理解-初学Python语言者必须理解的下划线
- 查看docker镜像的dockerfile脚本json信息
- git获取管理员权限 windows_win10不兼容git2.7.3+版本
- 计算机科学与技术研究目的,计算机科学与技术专业培养目标分析
- 牛客网C++面经 容器和算法
- python中is和 的区别_Python中is和==的区别
- 使用 | Java使用WebMagic 爬取网站
- 学习笔记之dns正反向解析区域，主从服务，子域授权，安全
- 未能打开组策略对象 您可能没有合适的权限
- 小米路由器mini刷lede_小米 mini 路由器刷 openwrt
- HTML表单颜色选择器
- Toolchain的安装与验证（有图 ，超详细）
- safari支持java_safari上如何正确启用java插件
- 阿里云服务器被恶意ddos攻击了怎么办？
- 常见程序(discuz,ecshop,shopex,dedecms等)重置破解管理密码
- python中row是什么意思_row
- U8资产变动怎么处理