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

五、场景应用：如果是鼠标点呢？

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

把鼠标点击位置转为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!"