"我不是圆心最亲密的点,但我希望靠近它。"
------ 来自一个不确定位置的点
一、圆的烦恼:谁才是我的圈内人?
在 3D 世界里,圆心看着四面八方飞来的点,开始陷入沉思:
"我怎么知道这个点是不是我朋友圈的?是圈内的,还是圈外的?"
这并不是社交问题,而是几何问题 :给定一个点,如何判断它是否落在某个圆的范围内?
我们今天的主角是:Three.js ------ 一个迷人又灵活的 WebGL 封装库,让我们能在网页上自由驰骋于三维空间。
二、从直觉出发:怎么判断"在圆内"?
想象你站在圆心的位置(优越感 +1),你拿着一个测距仪,对准前方的某个点:
- 如果点离你比半径近,那么这个点就在圆里。
- 如果点正好在边界上,他也算你朋友圈的边缘好友。
- 如果太远了?对不起,出圈了!
这就是最原始的"点到圆心的距离和半径"的比较。
三、我们如何计算距离?用中学数学的眼睛看世界
在 2D 世界中,如果圆心坐标是 cx, cy
,某个点的坐标是 px, py
,那么点到圆心的"距离",可以通过一个经典套路算出来:
- 先算出横向和纵向的"差距"
- 然后使用三角函数祖师爷毕达哥拉斯的秘术
- 把这两个差值"勾"和"股"组合成斜边
换句话说,就是:
- 求出
(px - cx)
和(py - cy)
- 把这两个值的平方加起来
- 然后开方
但为了性能,在代码中我们往往不去开方,因为平方比较也能做判断(聪明的工程师绝不多用 CPU 的一滴汗水)。
四、代码时间!Three.js 中的圆与点判断
我们将用 Three.js 提供的 Vector2
类来进行向量操作,非常优雅。
arduino
import * as THREE from 'three'
// 圆的中心和半径
const center = new THREE.Vector2(0, 0)
const radius = 5
// 你想判断的点
const point = new THREE.Vector2(3, 4)
// 方法一:用向量距离判断
const distance = point.distanceTo(center)
if (distance <= radius) {
console.log('✅ 点在圆内或圆上')
} else {
console.log('❌ 点在圆外')
}
🚀 方法二:不使用平方根,更快!
arduino
const distanceSq = point.distanceToSquared(center)
const radiusSq = radius * radius
if (distanceSq <= radiusSq) {
console.log('✅ 点在圆内或圆上')
} else {
console.log('❌ 点在圆外')
}
这里
distanceToSquared
直接返回"距离的平方",避免使用Math.sqrt
,更适合大量点判断的场景,比如你在 Three.js 场景里丢了一地的粒子,想知道哪些落在神秘法阵范围内。
五、场景应用:如果是鼠标点呢?
如果你在网页中点击鼠标,想判断那个点是否落在某个圆形区域内,那你得:
- 把鼠标点击位置转为Three.js 世界坐标
- 然后再判断是否在圆内
arduino
// 假设我们有个 HTML 元素 canvas
canvas.addEventListener('click', (event) => {
const rect = canvas.getBoundingClientRect()
const mouse = new THREE.Vector2(
event.clientX - rect.left,
event.clientY - rect.top
)
// 判断是否在圆内
const isInCircle = mouse.distanceTo(center) <= radius
console.log(isInCircle ? '🟢 点在圆内' : '🔴 点在圆外')
})
注意:上面这个方法假设你用的是 2D 平面或者
orthographic
投影,若在 3D 透视相机中判断,需要使用Raycaster
来转换世界坐标。
六、结语:别让点在圆外孤单徘徊
点和圆心的关系,说到底是一场距离的较量,而程序员的任务,就是当那个为他们指点迷津的红娘 ------ 不用开方,不用浪漫,用代码和数学判断你们是否有"距离缘"。
Three.js 作为工具,给我们提供了优雅的向量运算,而你,作为开发者,只需让那些点不要越"界"。
🧩彩蛋问题:如何判断一个点是否在圆环中?
Hint:用两个半径,判断点是否在大圆内 并且不在小圆内 😉
如果你还想进一步扩展到判断点是否在任意多边形、椭圆或 3D 球体中,欢迎留言召唤我: "Circle Lord, I summon thee!"