在threejs中在球体表面创建一个环

Question

我在 threejs 中有一个球体，我想要一个环在它的顶部设置动画。

我有以下进步：

在动画函数中，我调用：

const scale = Math.cos((circlePos / this.globeRadius) * Math.PI * 0.5);
console.log(scale);
this.ring.scale.set(scale, scale, 1);

我的理解是，sin 和 cos 函数正是我需要计算圆环到达圆周多远所需要的。然而，动画实际上显示环落入球体内部，然后最终在球体外部达到 0 刻度。

理想情况下，我也想改变球体的半径，但我也不知道该怎么做，所以我认为这可能是使用 scale 函数的问题。

怎样才能让圆环保持在球体表面？

Answer 1

不完全是。考虑一下：

你有一个直角三角形，其底边是 x 和 y，斜边为 r = globeRadius 。所以根据毕达哥拉斯定理，我们有：

x² + y² = r².

所以如果我们求解高度 y，我们得到：

y = √(r² - x²).

因此，在您的代码中，您可以编写它，例如像这样：

const scale = Math.sqrt(this.globeRadius * this.globeRadius - circlePos * circlePos);

但是，这是世界单位的比例，与物体无关。所以要让它起作用，你需要再次除以你的半径，或者只用半径 1 初始化你的环：

this.ringGeometry = new THREE.RingGeometry(1, 1.03, 32);

这里我给了它一个任意的环宽0.03——你当然可以根据自己的需要调整它。

Create a ring on the surface of a sphere in threejs