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.