메쉬 주변의 점들을 어떻게 회전합니까?

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

커플 당신이 코드에 문제가 있지만, 여기 당신을 위해 업데이트 된 바이올린입니다 : 당신이 당신의 Three.js를 장면을 만들 때 https://jsfiddle.net/pwwkght0/2/

그래서 당신은 init 기능에 모든 코드를 유지하려는. 그래서 모든 것을 옮긴 다음 init을 변수 외부에 호출했습니다. 이렇게하면 init 장면이 마지막 줄에 도달 할 때까지 장면을 만들고 animate을 호출합니다. 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에서 호출하는 방법주의 사항 : pointCloud의 어린이 속성에 액세스하여 구 주위에 다른 속도로이 한 단계 더 걸릴 각 지점이 회전 할 수

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

.