threejs-向量基本知识回顾

1,103 阅读2分钟

向量基本操作

// 初始化, 不传参的话默认是0,0,0
const a = new THREE.Vector3()

// 设置x,y,z
a.set(2, 4, 8)

// 取模(获取长度)
const length = a.length()

// 加法
const b = new THREE.Vector3(0, 1, 0)
a.add(b)  // a = Vector3 {x: 2, y: 5, z: 8}

// 减法
const c = new THREE.Vector3(1, 2, 3)
a.sub(c)  // Vector3 {x: 1, y: 3, z: 5}

// 克隆  
// 返回一个新的Vector3,其具有和当前这个向量相同的x,y,z
const aCopy = a.clone() // Vector3 {x: 1, y: 3, z: 5} 

// 复制
// 将所传入Vector3的x,y,z属性复制给这一Vector3。
a.copy(b) // a = Vector3 {x: 0, y: 1, z: 0} 

// 转换为单位向量
a.normalize()

// 点乘
const a = new THREE.Vector3(1, 2, 3)
const b = new THREE.Vector3(2, 3, 4)
// 点乘结果
const dotValue = a.dot(b)

// 叉乘
const a = new THREE.Vector3(1, 2, 3)
const b = new THREE.Vector3(2, 3, 4)
// 把叉乘结果保存到crossValue
const crossValue = new THREE.Vector3()
crossValue.crossVectors(a, b)

点乘、叉乘回顾

点乘

点乘的结果是一个标量

几何定义

image.png

代数定义

image.png

运算律

image.png

点乘的用途

判断两个向量是否垂直

点乘为0,垂直

判断光照强度

两个单位向量的点乘,得到的是两个向量夹角的cos值,通过它可以知道两个向量的相似性

比如光线方向点乘三角面的法线,点积越大,说明夹角越小,光线更接近于直射三角面,所以更明亮,就可以设置更明亮的颜色

判断前后方
例如图中a方向为人面朝前方,ab点积大于零,所以b物体在人的前方,ac点积小于零,c物体在人的后方

image.png


叉乘

向量叉乘的结果不是标量,而是一个向量

image.png

叉乘的大小如上图所示,|a||b|sin(θ)
数值上等于以a,b夹角为θ组成的平行四边形的面积。

image.png

叉乘的方向如上图所示,垂直于a与b所决定的平面,按右手定则从a转向b来确定。

坐标运算

a=(xa, ya, za) b = (xb, yb, zb)

image.png

运算律

image.png

叉乘的用途

判断两个向量是否平行

返回值为0,则平行

求平面的法线

用平面两个非平行向量(或者不在同一直线的三个点),就可依靠叉乘求得法线

计算面积

image.png

物体是由一个个三角面组成的,要想求三角面的面积,知道组成三角面的三个顶点,就可以求面积
如图AC,AB向量叉乘大小的二分之一就是三角面ABC的面积

判断点是否在三角形内

image.png

如图ABXAP的方向指向屏幕外,P点在AB的左边,如果BCXBP,CAXCP的方向也一样(指向屏幕外),那就说明p也在BC,CA的左边,也就是在三角形ABC内

参考学习链接 www.bilibili.com/video/BV1X7…