What is the best way to rotate points around a mesh?

Question

What is the best way to rotate points around a mesh?

I am attempting to utilize Three.js to create a collection of points using Three.Points. My goal is to have these points rotate around a single point or mesh. I have already successfully generated the points randomly within a cylinder region, following the guidance provided in this answer. Additionally, I have explored resources like this, which unfortunately did not produce the desired outcome as it was rotating one mesh around another.

This is my current progress:

//Mesh to be rotated 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 intended to revolve around the mesh

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

const geometry = new THREE.Geometry();

// [...] code for generating random points

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

You can view a complete demo here. How can I achieve the rotation of all points around the sphere mesh? Each vertex of the point "cloud" geometry should revolve around a central point, similar to a planet and its orbiting star.

javascript three.js point

Answer 1

Answer №1

A few issues with your code, but I have an improved solution for you: https://jsfiddle.net/pwwwght1/2/

When setting up your Three.js scene, it's best to keep all of your code within the init function. I've reorganized everything accordingly, calling init outside of the variable declaration. By doing this, init will create your scene and then trigger the animate function at the end. It's important to use animate instead of

render</code as it requests animation frames and calls <code>render</code on each one.</p>

<pre><code>function init() {
    // set up the scene components here

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

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

    animate();
}

init()

Now that animation frames are being requested, let's add some orbital movement. I created a simple function to rotate your point cloud along its z-axis, giving the appearance of orbiting around a sphere. Take note that orbit is called in animate:

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

You can further enhance this by having each point rotate at varying speeds around the sphere using the children property of pointCloud.

Answer 2

A few issues with your code, but I have an improved solution for you: https://jsfiddle.net/pwwwght1/2/

When setting up your Three.js scene, it's best to keep all of your code within the init function. I've reorganized everything accordingly, calling init outside of the variable declaration. By doing this, init will create your scene and then trigger the animate function at the end. It's important to use animate instead of

render</code as it requests animation frames and calls <code>render</code on each one.</p>

<pre><code>function init() {
    // set up the scene components here

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

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

    animate();
}

init()

Now that animation frames are being requested, let's add some orbital movement. I created a simple function to rotate your point cloud along its z-axis, giving the appearance of orbiting around a sphere. Take note that orbit is called in animate:

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

You can further enhance this by having each point rotate at varying speeds around the sphere using the children property of pointCloud.

What is the best way to rotate points around a mesh?

Answer №1

Similar questions

Regular expression designed to validate a 19 digit MasterCard number

JavaScript : Retrieve attributes from a JSON object

What is the best way to arrange map items using justify-content-around for optimal display?

Troubleshooting JavaScript Oscilloscope: resolving audio playback problems

Encountering a 500 (Internal Server Error) while trying to insert data into the database through ajax

Searching the database to find if the username is already in use with MEAN

What is the best way to insert a Button within a Tab while ensuring that the indicator remains in the appropriate tab?

transfer properties to a dynamic sub element

The functionality of Vue JS v-attr="expression1 && exp2 && exp3" seems to be malfunctioning

Is it possible to send variables within an ajax request?

Toggle the visibility of a component by clicking on a specific title within a table, dependent on the column title in Angular 9

Using only native JavaScript Vanilla, Rails does not execute create.js via Ajax

Send live information to router-link

Prevent vertical scrolling on touch devices when using the Owl Carousel plugin

"Interactive table feature allowing for scrolling, with anchored headers and columns, as well as the option to fix

Retrieve information according to the object ID with AngularJS UI-Router and $stateParams

Adjusting the gap between TableRows in Material-UI

Error message: "When using Webpack 4 with Bootstrap, a TypeError occurs where property 'jquery' is read as undefined."

Guide to updating information inside of script tags in html using javascript

Modifying the Color of Array Elements using JavaScript