three.js - 围绕轨道旋转对象

This is the work I have done so far.我正在使用 Three.js 动画,我想在其中创建一个太阳系。我想让行星绕着太阳转。我已经完成了围绕太阳创建轨道的工作。但我不知道如何使行星在特定轨道上旋转。我创造了这样的轨道和行星。

var material = new THREE.LineBasicMaterial({color: 'aqua'});
var geometry = new THREE.CircleGeometry(3.2, 1000);
geometry.vertices.shift();
var line = new THREE.Line(geometry, material);
line.position.set(0.5, 5, 6);
line.rotation.x = 2;`

geometry = new THREE.SphereGeometry(0.5, 32, 32);
material = new THREE.MeshBasicMaterial({color: 'yellow'});
p1 = new THREE.Mesh(geometry, material);
p1.position.set(3, 3.8, -1);'

所以,我想让行星围绕特定的圆旋转。

最佳答案

你知道太阳到地球的距离(半径),那么你可以使用Math.sin()Math.cos()函数来实现什么你想要的。

var orbitRadius = 10; // for example
var date;

在动画循环中你可以做:

date = Date.now() * 0.0001;
p1.position.set(
  Math.cos(date) * orbitRadius,
  0,
  Math.sin(date) * orbitRadius
);

jsfiddle例子

https://stackoverflow.com/questions/42418958/

相关文章:

bash - 创建动态变量名bash并获取值

spring-mvc - 如何在应用程序中使用 "RestController"和 "Control

html - 将鼠标悬停在文本上时显示图像

xml - “||” (OR) 在XML中怎么写?

c# - 无法将类型为 'System.DateTime' 的对象转换为类型 'System.Str

bash - 在 bash 命令输出中添加前缀

oracle - Windows 的 ins-32025 oracle 11g 错误

list - 为什么这个删除 Haskell 中的重复函数有两个参数而不是一个?

reactjs - 在reactjs中使用具有相同路由路径的条件组件

php - Woocommerce 优惠券添加自定义复选框