如何围绕网格旋转点？

Question

我正在尝试使用 Three.js 生成一些带有 Three.Points, and then make the points themselves revolve around a single point (or mesh). I've generated the points randomly in a cylinder region as mentioned in this answer and reviewed posts such as 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。我怎样才能让所有的点都围绕球体网格旋转，就像点 "cloud" 的几何图形的每个顶点都围绕一个中心点旋转，或者像行星和恒星这样的网格？

Answer 1

您的代码存在一些问题，但这里有一个更新的 fiddle 供您使用：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 的子节点属性.

让每个点以不同的速度围绕球体旋转

如何围绕网格旋转点？

How do I revolve points around a mesh?

javascript

point

three.js