Movement track point trigonometric functions Three.js Application

When learning 2D text, see the official website there is such an example:
https://threejs.org/examples/#css2d_label




The trajectory of the moon, in refreshing function is written like this:

function animate() {

    requestAnimationFrame(animate);

    var elapsed = clock.getElapsedTime();

    moon.position.set(Math.sin(elapsed) * 5, 0, Math.cos(elapsed) * 10);
    console.log(moon.position)
        
    renderer.render(scene, camera);
    labelRenderer.render(scene, camera);

}

among them

var clock = new THREE.Clock();



Moon trajectory is to modify the value of x and z in a three dimensional coordinate system moon be achieved. That is the key to this line of code:

moon.position.set(Math.sin(elapsed) * 5, 0, Math.cos(elapsed) * 5);



x coordinate: Math.sin(elapsed)*5
Y coordinate axes:Math.cos(elapsed)*5

I.e. where the same parameters as the elapsed clock.getElapsedTime (), refers to the total duration of the stored running clock. That refresh start counting from 0 up from the page.


We observe them through print and elapsed values corresponding coordinate values:


function animate() {

    requestAnimationFrame(animate);

    var elapsed = clock.getElapsedTime();
    console.log(elapsed)
    moon.position.set(Math.sin(elapsed) * 5, 0, Math.cos(elapsed) * 5);
    console.log(moon.position)

    renderer.render(scene, camera);
    labelRenderer.render(scene, camera);

}

Cutting out section results were as follows:

You can see a ballpark, with the increase in elapsed value, x, z values probably presents a sinusoidal variation. But not intuitive, because too dense point, a period many points. Look incomplete.
Excel to look at the law through a simulated set of data:




Trajectory moon around the y axis, in the plane of the circle formed xoz. By the above observations, on the trajectory, the coordinates of any point x, z-coordinate at satisfy rules:

That is, trigonometric functions sine and cosine squared 1.
I.e., radius 1:



moon.position.set(Math.sin(elapsed) * 5, 0, Math.cos(elapsed) * 5);

x, z coordinates only in the same coefficients that track for a perfect circle. I.e., n = m below
Math.sin(elapsed)*n
Math.cos(elapsed)*m
If n is not equal to m, it will show an elliptical trajectory.

This is just a trajectory, through a more complex mathematical formulas to achieve more different trajectory.

Guess you like

Origin www.cnblogs.com/jaycethanks/p/12107227.html