三维向量的简单运算和实用意义

techbrood 发表于 2016-07-31 21:18:08

标签: 点积, 叉积, 计算机图形学

- +

在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|)

点积常见的用处是:

  1. 求线段在某个方向的投影长度(使B为单位向量)

  2. 计算两条线的夹角

  3. 计算点到线的距离(比如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的距离。有时叉积得到的是一个负值,这种情况下距离就是上述结果的绝对值。

当我们要找点到线段的距离时,情况变得稍稍复杂一些。这时线段与点的最短距离可能是点到线段的某一端点,而不是点到直线的垂线。

blob.png

例如上图(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)

possitive(8) views17267 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • WebAssembly工作原理和JavaScript语言性能对比分析

    本文简单说明WebAssembly(简称wasm)工作原理和高性能的原由(和JavaScript相比)。不过需要提醒的是Wasm并非设计来完全替代JS,而是对JS的一个强大补充,JS中...

  • CSS3属性选择器特性使用详解

    CSS3除了引入动画、滤镜(用于特效)以及新的布局技术外,在选择器(selector)方面也有增强。属性选择器根据元素的属性(attributes)来匹配。这可以是一个单独...

  • CSS3特性查询(Feature Query: @supports)功能简介

    这是2017年不能不了解和学习的一个CSS新特性,非常实用,考虑到现实世界浏览器的复杂性,该特性本应该先于其他新特性出来。我们已经知道使用媒体查询(Media Que...

  • CSS3人行走动作图解和动画实现

    对于人类而言,行走是一种很自然的想要前进并防止跌倒的一组动作重复。大部分人1岁就学会了走路,但至此以后的几十年间,或许我们从来没留意过自己行走姿势。当...

  • 使用HTML5 FileReader和Canvas压缩用户上传的图片

    手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力。因此在某些应用下(对图片要求不那么高)我们可以在客户端来压缩图片,然后再提交给服务器。总体...

  • 深度贴图(depth map)概念简介和生成流程

    Depth map 深度图是一张2D图片,每个像素都记录了从视点(viewpoint)到遮挡物表面(遮挡物就是阴影生成物体)的距离,这些像素对应的顶点对于观察者而言是“可...

  • 如何使用Three.js加载obj和mtl文件

    OBJ和MTL是3D模型的几何模型文件和材料文件。在最新的three.js版本(r78)中,以前的OBJMTLLoader类已废弃。现在要加载OBJ和MTL文件,需要结合OBJLoader和MTLLoade...

  • 如何使用WebGL创建一个逼真的下雨动画

    之前写过文章来分别讲解如何使用CSS3和Canvas2D实现过雨滴和下雨动画。通过背景处理看起来也有视觉上的3D效果,但并非真正的3D场景,如果要加入用户交互,进行36...

  • 使用top/left/margin和CSS3 translate两种方法实现标题居中的性能差异详解

    要实现标题全屏居中(同时在垂直和水平方向居中),有若干种方法,包括使用弹性布局、表格单元、绝对定位、自动外边距和CSS3平移变换等。你可能已经使用了这些方...

  • Three.js 3D打印数据模型文件(.STL)加载

    3D打印是当下和未来10年产品技术主流方向之一,影响深远。对于电子商务类的3D打印网站,一个主要功能是把商品以3D的方式呈现出来,也就是3D数据可视化技术。HTML...

  • 使用纯CSS3实现一个3D旋转的书本

    有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制,而其中图书的展示是最为简单的一种,无需复杂的建模过程,使用图片和CSS3的一些变换即可实现...

  • 更多...