三维向量的简单运算和实用意义
在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。
本文简要介绍三维计算机图形学中常用的基本运算的概念及其用途。
点积(Dot Product)
点乘比较简单,是相应元素的乘积的和:
V1( x1, y1, z1)·V2(x2, y2, z2) = x1*x2 + y1*y2 + z1*z2;
注意结果不是一个向量,而是一个标量(Scalar),可以是负数:
A·B = |A||B|Cos(θ)
θ是向量A和向量B之间的夹角。这里|A|我们称为向量A的模或范数。这样我们就和容易计算两条线的夹角:
Cos(θ) = A·B /(|A|*|B|)
点积常见的用处是:
求线段在某个方向的投影长度(使B为单位向量)
计算两条线的夹角
计算点到线的距离(比如Math.sqrt(|A|*|A| - (A·B)*(A·B)),其中B为单位向量)
叉积(Cross Product)
首先我们知道 ,对于向量u和v, u x v的结果,是得到一个既垂直于u又垂直于v的向量,假设记作n.
则有下面公式
n = u x v;
而n的方向,是由右手法则决定的。 即伸出右手,四个手指方向从u绕到v. 此时,大姆指的方向,就是n的方向。 我们通常叫做右向量。
叉积常见用途有计算点到线和点到面的距离。
点到线的距离
找出一个点和一条线间的距离是经常遇见的几何问题之一。假设给出三个点,A,B和P,你想找出点P到点A、B定出的直线间距离。第一步是找出A到B的向量AB和A到P的向量AP,现在我们用该两向量的叉积除以|AB|,这就是我们要找的的距离了。
d = (AB x AP)/|AB|
(AB X AP)/2是三角形ABC的面积,这个三角形的底是|AB|,高就是P到AB的距离。有时叉积得到的是一个负值,这种情况下距离就是上述结果的绝对值。
当我们要找点到线段的距离时,情况变得稍稍复杂一些。这时线段与点的最短距离可能是点到线段的某一端点,而不是点到直线的垂线。
例如上图(b)中点P到线段AB的最短距离应该是线段BP。我们有几种不同的方法来判断这种特殊情况。
第一种情况是计算点积AB·BP来判定两线段间夹角。如果点积大于等于零,那么表示AB到BP是在-90到90度间,也就是说P到AB的垂线在AB外,那么AB上到P距离最近的点就是B。同样,如果BA·AP大于等于零,那么点A就是距离P最近的点。如果两者均小于零,那么距离最近的点就在线段AB中的某一点。
点到面的距离
设某三维平面表达式为
a*x+b*y+c*z+d = 0;
则其法向量即为: (a,b,c).
任意一点 p = (x1, y1, z1)到该平面的距离为:
(a*x1 + b*y1 + c*z1+d) / (a*a + b*b +c*c)
最新评论
- 相关文章
3D感知和建模关键硬件技术:双目、3D结构光和TOF
无论VR、AR和3D打印,其核心技术包含3D成像和建模。而3D建模属于劳动密集型的工作,耗时耗力,凡这类工作都会是被新技术革命的地方,自动3D建模技术就是为了解决...
ARCore基本概念和工作原理简介
谷歌的WebAROnARCore项目基于Android手机提供的ARCore增强现实引擎,要了解WebAROnARCore,需要先了解ARCore的工作原理。基本上ARCore做了两件事,首先跟踪手机...
踏得网精选2016年度10大最佳HTML5动画
踏得网精选2016年度最酷最新的HTML5动画集,评选标准为:创意新颖度+实现技术难度+趣味程度。使用一些在线H5生成工具的作品,因其主要使用图片和CSS3套路动画,...
ES6小知识:动态对象键(Dynamic Object Keys)语法简介
在ES5,对象的键(key)总是被解释为字符串。ES6允许我们使用计算的值作为对象的键,使用方括号:[myKey]const
函数式JavaScript编程基础概念:Curry和Partial Application
本文介绍JS函数式编程中的两个概念:柯里(Curry)和部分应用程序(Partial Application)。什么是应用程序(Application)将函数应用于其参数以产生返回值的过...
如何使用CSS3合成模式(blend-mode)和滤镜(filter)实现彩色蜡笔(时光机)照片特效
在之前的文章中我们已经详细讲解过CSS3滤镜(filter,也可称之为过滤器)的工作方式,本文将实现一个当下流行的时光机相片特效实例来说明其实际用途。
我们...HTML5、Hybrid APP、Native APP对比和技术选型
HTML5和Native APP都很容易理解。为了获得HTML5的移植性和移动本地应用的高性能,搞出来一些混合APP的解决方案。比如Apache的Cordova(也就是以前的PhoneGap),...
WebGL 纹理映射模式以及WRAP_S | WRAP_T参数详解
我们在纹理滤镜一文中已经说明了2个重要的纹理参数,用来定义对象缩放时纹理的处理方式:GL_TEXTURE_MIN_FILTERGL_TEXTURE_MAG_FILTER本文讲解其余几个纹理参数...
Blender2.7 快捷键一览表
通用操作
停止当前操作:ESC
快捷搜索:SPACE撤销:ctrl+z重做:ctrl+shift+z渲染:F12
单选:鼠标右键(RMB)全选:A
框选:B
刷选:...使用Canvas绘制完美的不完美圆形
真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canva...
Three.js 3D打印数据模型文件(.STL)加载
3D打印是当下和未来10年产品技术主流方向之一,影响深远。对于电子商务类的3D打印网站,一个主要功能是把商品以3D的方式呈现出来,也就是3D数据可视化技术。HTML...
使用纯CSS3实现一个3D旋转的书本
有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制,而其中图书的展示是最为简单的一种,无需复杂的建模过程,使用图片和CSS3的一些变换即可实现...
更多...