ThreeJS入门（080）：THREE.Sphere 知识详解，示例代码

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 080篇入门文章

THREE.Sphere 是 Three.js 中用于表示三维空间中的球体的一个类。球体可以用一个中心点和一个半径来定义，在三维图形学中，球体经常用于包围体积、碰撞检测、光线追踪等场景。

构造函数

构造函数 new THREE.Sphere(center, radius) 接受两个参数来定义一个球体。

参数说明

• center：一个 THREE.Vector3 对象，表示球体的中心点。
• radius：一个浮点数，表示球体的半径。

如果未提供 center 和 radius 参数，构造函数将创建一个默认的球体，其中中心点为 (0, 0, 0)，半径为 0。

属性

THREE.Sphere 的实例拥有如下属性：

• center：一个 THREE.Vector3 对象，表示球体的中心点。
• radius：一个浮点数，表示球体的半径。

方法

THREE.Sphere 提供了以下常用的方法来操作和查询球体：

• set(center, radius)：设置球体的中心点和半径。
• clone()：返回一个新的 Sphere 实例，其值与当前球体相同。
• copy(sphere)：将另一个球体对象的值复制到当前球体对象。
• applyMatrix4(matrix)：将一个 THREE.Matrix4 矩阵应用到球体上。
• expandByPoint(point)：根据一个点扩展球体。
• expandByVector(vector)：根据一个向量扩展球体。
• expandByScalar(scalar)：根据一个标量扩展球体。
• setFromPoints(points)：根据一组点设置球体。
• setFromCenterAndRadius(center, radius)：根据中心点和半径设置球体。
• containsPoint(point)：判断一个点是否位于球体内。
• containsSphere(sphere)：判断一个球体是否完全位于当前球体内。
• intersectsSphere(sphere)：判断当前球体是否与另一个球体相交。
• distanceToSphere(sphere)：计算当前球体与另一个球体的中心点之间的距离。
• distanceToPoint(point)：计算当前球体的中心点与一个点之间的距离。
• equals(sphere)：检查当前球体是否等于另一个球体。
• isEmpty()：检查球体是否为空（即半径为零）。
• isSpinning()：检查球体是否正在旋转（此方法不存在，可能是指其他用途）。
• fromArray(array)：从数组中设置球体。
• toArray(array, offset)：将球体的中心点和半径转换为数组。

示例

创建一个基本的 Sphere 对象：

const center = new THREE.Vector3(0, 0, 0);
const radius = 5;
const sphere = new THREE.Sphere(center, radius);

创建一个球体并设置中心点和半径：

const sphere = new THREE.Sphere();
sphere.set(new THREE.Vector3(0, 0, 0), 5); // 设置中心点和半径

根据一组点设置球体：

const points = [
    new THREE.Vector3(-1, 0, 0),
    new THREE.Vector3(1, 0, 0),
    new THREE.Vector3(0, 1, 0),
    new THREE.Vector3(0, -1, 0)
];
const boundingSphere = new THREE.Sphere();
boundingSphere.setFromPoints(points);

判断一个点是否位于球体内：

const point = new THREE.Vector3(0, 0, 0);
console.log(boundingSphere.containsPoint(point)); // 输出 true

判断一个球体是否完全位于当前球体内：

const innerSphere = new THREE.Sphere(new THREE.Vector3(0, 0, 0), 2);
console.log(boundingSphere.containsSphere(innerSphere)); // 输出 true

判断当前球体是否与另一个球体相交：

const otherSphere = new THREE.Sphere(new THREE.Vector3(5, 0, 0), 2);
console.log(boundingSphere.intersectsSphere(otherSphere)); // 输出 true

计算当前球体与另一个球体的中心点之间的距离：

const otherSphere = new THREE.Sphere(new THREE.Vector3(5, 0, 0), 2);
console.log(boundingSphere.distanceToSphere(otherSphere)); // 输出 5

计算当前球体的中心点与一个点之间的距离：

const point = new THREE.Vector3(5, 0, 0);
console.log(boundingSphere.distanceToPoint(point)); // 输出 5

根据一个点扩展球体：

const point = new THREE.Vector3(10, 0, 0);
boundingSphere.expandByPoint(point);
console.log(boundingSphere.radius); // 输出新的半径

根据一个向量扩展球体：

const vector = new THREE.Vector3(10, 0, 0);
boundingSphere.expandByVector(vector);
console.log(boundingSphere.radius); // 输出新的半径

根据一个标量扩展球体：

boundingSphere.expandByScalar(2);
console.log(boundingSphere.radius); // 输出新的半径

使用 THREE.Sphere 在 Three.js 中

THREE.Sphere 在 Three.js 中主要用于实现各种几何操作和计算，例如：

• 包围体积：可以用来计算一组点的最小包围球体。
• 碰撞检测：可以用来检测物体之间是否发生碰撞。
• 光线追踪：在光线追踪算法中，可以用来检测光线是否与球体相交。

示例：包围体积

假设你有一组点，你想要计算它们的最小包围球体：

const points = [
    new THREE.Vector3(-1, 0, 0),
    new THREE.Vector3(1, 0, 0),
    new THREE.Vector3(0, 1, 0),
    new THREE.Vector3(0, -1, 0)
];
const boundingSphere = new THREE.Sphere();
boundingSphere.setFromPoints(points);

这段代码会计算一组点的最小包围球体。

示例：碰撞检测

假设你有两个球体，你想要检测它们是否相交：

const sphere1 = new THREE.Sphere(new THREE.Vector3(0, 0, 0), 5);
const sphere2 = new THREE.Sphere(new THREE.Vector3(3, 0, 0), 2);

if (sphere1.intersectsSphere(sphere2)) {
    console.log('Spheres intersect.');
}

这段代码会检测两个球体是否相交。

总结

THREE.Sphere 是一个用于表示三维空间中的球体的类，提供了丰富的操作和查询球体的方法。通过这些方法，你可以设置球体的中心点和半径，计算球体内的点，扩展球体，计算球体之间的距离等。在 Three.js 的许多功能中，THREE.Sphere 对于实现高效的几何计算和碰撞检测非常重要。理解并熟练使用 THREE.Sphere 对于开发高质量的 Three.js 应用程序是非常有帮助的。