在 Three.js 中添加 oribit circle 和 label答案

【问题标题】：Adding oribit circle and label in Three.js在 Three.js 中添加 oribit circle 和 label
【发布时间】：2016-08-26 06:25:57
【问题描述】：

我正在开发一个小型行星系统，我在其中添加了一些围绕枢轴恒星旋转和旋转的行星。

这是执行上述操作的代码：

  var mercury = createMesh(new THREE.SphereGeometry(5.0, 10, 10, 0, Math.PI * 2, 0, Math.PI * 2), "mercury.png");
        mercury.position.x = 4;
        scene.add(mercury);
            var speed = 100;
            var distance = 2;
            mercury.position.x = Math.sin(step * speed) * distance*5;
            mercury.position.y = Math.cos(step * speed) * distance;
            mercury.position.z = Math.cos(step * speed) * distance * 5;

现在我想为每个移动的行星添加一个圆圈，以显示卫星围绕枢轴行星的轨迹，并在行星顶部添加一个标签，如上述行星上的“水星”标签，在我的案子。我该怎么做？

【问题讨论】：

标签： three.js

【解决方案1】：

轨道路径

你可以用几种不同的方式渲染一个圆圈。你可以使用Three.js lines，比如this example。

或者你可以渲染a torus来标记路径。

文字

您可以将更多几何图形创建为文本，as in this example。

或者您可以使用带有文本的精灵，在this SO Question 中讨论过。

图案

请注意，您再次对您的星球进行硬编码，例如在your previous question 中。我建议您通过创建一个为您构建三个.js 对象的函数来干燥您的代码。带有签名的东西，例如：

function createPlanetParent(planetName,planetDiameter,planetRadius,...) {...}

这样您就可以从视图代码（three.js 几何和枢轴）中分离出数据（行星信息）。

【讨论】：