Question

我正在尝试使用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。我怎样才能让所有点都围绕球体网格旋转，就像点“云”几何体围绕中心点旋转的每个顶点，或者像行星和恒星一样的网格？

Answer 1

将代码与您的问题结合起来，但这里有一个更新的小提琴：https://jsfiddle.net/pwwkght0/2/

因此，当您创建Three.js场景时，您希望将所有代码保留在init函数中。所以我把所有内容都移到了那里，然后我在变量之外调用了init。执行此操作时，init将创建您的场景，直到它到达最后一行并调用animate。您想要调用animate而不是render，因为动画会请求动画帧并在每个帧上调用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的儿童属性让每个点围绕球体以不同的速度旋转。

如何旋转网格周围的点？

1 个答案: