三角函数在Three.js中的点的移动轨迹应用

Posted Jaycethanks

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了三角函数在Three.js中的点的移动轨迹应用相关的知识,希望对你有一定的参考价值。

在学习2D文字的时候,看到官网有这样一个示例:
https://threejs.org/examples/#css2d_label

![](https://img2018.cnblogs.com/blog/1735896/201912/1735896-20191227112947468-1562608290.gif)

月球的运动轨迹,在刷新函数中是这样写的: ```javascript 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);

}

其中
```javascript
var clock = new THREE.Clock();

月球的运动轨迹就是通过修改月球在三维坐标系中的x和z值来实现的。 也就是这行关键代码: ```javascript moon.position.set(Math.sin(elapsed) * 5, 0, Math.cos(elapsed) * 5); ```
x轴坐标:`Math.sin(elapsed)*5` y轴坐标:`Math.cos(elapsed)*5`

其中elapsed作为相同参数即clock.getElapsedTime(),指的是保存时钟运行的总时长。即从页面刷新开始从0一直计时。


我们通过打印elapsed值和对应的坐标值加以观察:


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);

}

截取部分结果如下:

可以看个大概,随着elapsed值增加,x,z值大概呈现正弦变化。 不过并不直观,因为点太密集了,一个周期很多点。看不全。
通过Excel模拟一组数据来观察以下规律:

![](https://img2018.cnblogs.com/blog/1735896/201912/1735896-20191227141128715-1848866384.jpg)
![](https://img2018.cnblogs.com/blog/1735896/201912/1735896-20191227141235203-1177815670.jpg)

月球的运动轨迹,是围绕y轴,在xoz形成的平面内画圆。通过以上观察,在运动轨迹上,任一点的坐标x,z坐标满足以下规律:

![](https://img2018.cnblogs.com/blog/1735896/201912/1735896-20191227142516448-1773147661.png)

也就是三角函数的正弦余弦平方和为1。
即半径为1:

![](https://img2018.cnblogs.com/blog/1735896/201912/1735896-20191227143110891-751001843.png)

```javascript moon.position.set(Math.sin(elapsed) * 5, 0, Math.cos(elapsed) * 5); ``` x,z坐标仅在系数相同时,轨道为一正圆。即下面的n=m `Math.sin(elapsed)*n` `Math.cos(elapsed)*m` 此时,运动轨迹半径即是n=m 如果n不等于m,那么运动轨迹将呈椭圆。

这只是一种运动轨迹,可以通过更为复杂的数学公式,实现更多不同的运动轨迹。

以上是关于三角函数在Three.js中的点的移动轨迹应用的主要内容,如果未能解决你的问题,请参考以下文章

THREE.js:计算物体上一点的世界空间位置

关于MATLAB收集人工鼠标移动轨迹的坐标

three.js PointCloud 中的可点击粒子

在three.js中获取鼠标点击点的3D坐标

Three.js不同模型在不同轨道上的动画和移动

一篇文章教你在三维空间中创建流动线条(three.js实战1)