🧙‍♂️用 Three.js 判断一个点是否在圆内 —— 一次圆心和点的对话


"我不是圆心最亲密的点,但我希望靠近它。"

------ 来自一个不确定位置的点


一、圆的烦恼:谁才是我的圈内人?

在 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 场景里丢了一地的粒子,想知道哪些落在神秘法阵范围内。


五、场景应用:如果是鼠标点呢?

如果你在网页中点击鼠标,想判断那个点是否落在某个圆形区域内,那你得:

  1. 把鼠标点击位置转为Three.js 世界坐标
  2. 然后再判断是否在圆内
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!"


相关推荐
共享ui设计和前端开发人才3 分钟前
UI前端与数字孪生融合案例:智慧城市的智慧停车引导系统
前端·ui·智慧城市
福娃B5 分钟前
【React】React初体验--手把手教你写一个自己的React初始项目
前端·javascript·react.js
逆向APP5 分钟前
SwiftUI Bug记录:.sheet首次点击弹出空白视图,第二次才正常显示
前端
Yodame7 分钟前
webpack+vite前端构建工具全掌握(中篇)
前端
迪迪SAMA7 分钟前
不再死记硬背!帮你理解原型相关八股概念!
前端
用户1512905452208 分钟前
jQuery-ui源代码重点难点分析
前端
逆向APP11 分钟前
siwftui代码,.sheet不能跳转
前端
24kHT13 分钟前
2.3 前端-ts的接口以及自定义类型
java·开发语言·前端
追光的栗子13 分钟前
vue3+vite 项目中怎么引入 elementplus 组件库
前端·vue.js·element
我命由我1234520 分钟前
VSCode - VSCode 快速跳转标签页
开发语言·前端·ide·vscode·编辑器·html·js