如何围绕网格旋转点？答案

【问题标题】：How do I revolve points around a mesh?如何围绕网格旋转点？
【发布时间】：2017-08-10 10:42:26
【问题描述】：

我正在尝试使用 Three.js 使用 Three.Points 生成一些点，然后使这些点本身围绕单个点（或网格）旋转。我已经在this 答案中提到的圆柱区域中随机生成了点，并查看了诸如this 之类的帖子，这似乎不起作用，因为它围绕网格旋转网格。

这是我目前得到的：

//Mesh that is to be revolved around
const blackHoleGeometry = new THREE.SphereGeometry(10, 64, 64);

const blackHoleMaterial = new THREE.MeshBasicMaterial({
    color: 0x000000
});

const blackHole = new THREE.Mesh(blackHoleGeometry, blackHoleMaterial);
scene.add(blackHole);

//Points that are supposed to revolve around the mesh

const particles = new THREE.PointsMaterial({
    color: 0xffffff
});

const geometry = new THREE.Geometry();

// [...] code to generate random points

const pointCloud = new THREE.Points(geometry, particles);
pointCloud.rotation.x = Math.PI / 2; //to rotate it 90*

您可以看到完整的演示 here。我怎样才能让所有的点都围绕球体网格旋转，就像点“云”的几何形状的每个顶点都围绕一个中心点旋转，或者像行星和恒星一样的网格？

【问题讨论】：

呃，“围绕网格旋转”是什么意思？根据定义，您不能围绕线以外的任何东西旋转点（尽管该线可能由一个点和您正在旋转的点定义）。
我认为您的术语可能是您的绊脚石。你的黑洞是一个球体，但你不能围绕一个球体“旋转”，你需要一个轴。如果您的轴穿过球体的中心点，那么它会看起来像围绕球体运行一样。这可能有助于stackoverflow.com/questions/11060734/…
@QPaysTaxes 如果围绕点定义的线和点本身旋转点会发生什么？ 没错！该点根本不会移动。
@Ben 非常感谢您的链接和信息！
@frederick99 呃，我很困惑。您是在尝试 ping 安德鲁吗？

标签： javascript three.js point

【解决方案1】：

你的代码有几个问题，但这里有一个更新的小提琴：https://jsfiddle.net/pwwkght0/2/

因此，当您创建 Three.js 场景时，您希望将所有代码保留在 init 函数中。所以我把所有东西都移到了那里，然后我在变量之外调用了init。当你这样做时，init 将创建你的场景，直到它到达最后一行并调用animate。您想调用 animate 而不是 render，因为 animate 将请求动画帧并在每个帧上调用 render。

function init() {
    //do all the things to make the scene

    function animate() {
        requestAnimationFrame(animate);
        orbit();
        controls.update();
        render();
    }

    function render() {
        renderer.render(scene, camera);
    }

    animate();
}

init()

现在您正在请求动画帧，是时候让事物轨道运行了。我做了一个非常简单的函数来抓取你的点云并在它的 z 轴上旋转它，以模拟它围绕球体旋转。注意orbit 在animate 中是如何被调用的：

function orbit() {
    pointCloud.rotation.z += 0.01;
}

您可以更进一步，通过访问 pointCloud 的 children 属性让每个点以不同的速度围绕球体旋转。

【讨论】：