メッシュの周りの点をどのように回転させるのですか？

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に電話します。アニメーションがアニメーションフレームを要求し、それぞれrenderを呼び出すため、renderの代わりにanimateに電話したいとします。

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年代の子供たちのプロパティにアクセスすることで、球の周りに異なる速度で回転します。