ThreeJS教程:射线Ray

推荐:将NSDT场景编辑器加入你的3D工具链
3D工具集:NSDT简石数字孪生

射线Ray

射线Ray和三维向量Vector3一样属于数学几何计算相关的API,可以进行射线交叉计算。

射线Ray

学习Three.js中的射线Ray概念,你可以类比数学几何中提到的射线,在三维空间中,一条线把一个点作为起点,然后沿着某个方向无限延伸。

// 创建射线对象Ray
const ray = new THREE.Ray()

射线起点.origin

射线Ray的起点.origin在3D空间中的坐标,可以用一个三维向量Vector3的x、y、z分量表示。

// 设置射线起点
ray.origin = new THREE.Vector3(1,0,3);

起点.origin属性值是三维向量Vector3,也可以用.set()方法设置。

// 设置射线起点
ray.origin.set(1, 0, 3);

射线方向.direction

射线Ray的方向.direction通用用一个三维向量Vector3表示,向量长度保证为1,也就是单位向量。

// 表示射线沿着x轴正方向
ray.direction = new THREE.Vector3(1,0,0);
// 表示射线沿着x轴负方向
ray.direction = new THREE.Vector3(-1,0,0);
// 表示射线沿着y方向
ray.direction = new THREE.Vector3(0,1,0);

注意.direction的值需要是单位向量,不是的话可以执行.normalize()归一化或者说标准化。

ray.direction = new THREE.Vector3(5,0,0).normalize();
// 表示射线沿着xy坐标轴的中间线
ray.direction = new THREE.Vector3(1,1,0).normalize();

.intersectTriangle()方法

射线Ray有很多关于数学计算的方法,下面就先介绍一个与三角形交叉计算相关的方法.intersectTriangle(),简单说,就是计算一个射线和一个三角形在3D空间中是否交叉。

执行.intersectTriangle()方法,如果相交返回交点坐标,不相交返回空值null

// 三角形三个点坐标
const p1 = new THREE.Vector3(100, 25, 0);
const p2 = new THREE.Vector3(100, -25, 25);
const p3 = new THREE.Vector3(100, -25, -25);
const point = new THREE.Vector3();//用来记录射线和三角形的交叉点
// `.intersectTriangle()`计算射线和三角形是否相交叉,相交返回交点,不相交返回null
const result = ray.intersectTriangle(p1,p2,p3,false,point);
console.log('交叉点坐标', point);
console.log('查看是否相交', result);

.intersectTriangle()参数4表示是否进行背面剔除,p1,p2,p3可以理解为一个三角形,有正反两面,一面是正面,一面是反面,关于三角形正反面可以参考2.3节讲解。

在一面观察p1,p2,p3,如果沿着三个点的顺序转圈是逆时针方向,表示正面,另一面观察,p1,p2,p3就是顺时针方向,表示背面。

.intersectTriangle()参数4设为true,表示进行背面剔除,虽然从几何空间上讲,该案例源码射线和三角形虽然交叉,但在threejs中,三角形背面对着射线,视为交叉无效,进行背面剔除,返回值rnull

const r = ray.intersectTriangle(p1,p2,p3,true,point);
console.log('查看是否相交', r);

上一篇:ThreeJS教程:抗锯齿后处理 (mvrlink.com)

下一篇:ThreeJS教程:Raycaster(射线拾取模型) (mvrlink.com)

NSDT场景编辑器 | NSDT 数字孪生 | GLTF在线编辑器 | 3D模型在线转换 | UnrealSynth虚幻合成数据生成器 | 3D模型自动纹理化工具
2023 power by nsdt©鄂ICP备2023000829号