在Three.js中沿着样条线(圆圈)移动物体

Question

我对Three.js很陌生（只有1天的经验），我想创建一个太阳系模型，因此我需要行星沿着它们的轨道（圆）移动。

function render() { 
    requestAnimationFrame(render); 

    sun.rotation.y += 0.01;
    mercury.rotation.y +=0.03;

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

我尝试使用样条曲线来解决这个问题，但是由于不知道如何使用requestAnimationFrame与变量一起进行动画处理（只会简单的增量操作，例如+=0.03），所以无法实现。

mercury.position = spline.getPoint(t);

尝试使用数学计算，但结果相同。不知道如何对变量进行动画处理。

mercury.position.x = 20*Math.cos(4) + 0;

但是我没有任何在JS中进行动画制作的经验。因此，我对这个请求AnimationFrame的东西感到非常困惑，它来自一些教程，对我来说就像一个黑匣子。

- Alex Pyzhianov

Answer 1

var sunGeo = new THREE.SphereGeometry(12,35,35);
var sunMat = new THREE.MeshPhongMaterial(); 
    sunMat.map = THREE.ImageUtils.loadTexture("image/sunmap.jpg");
var sun = new THREE.Mesh(sunGeo, sunMat); 
sun.position.set(0,0,0);
scene.add(sun); // add Sun

var mercuryGeo = new THREE.SphereGeometry(2,15,15);
var mercuryMat = new THREE.MeshPhongMaterial(); 
    mercuryMat.map = THREE.ImageUtils.loadTexture("image/mercurymap.jpg");
var mercury = new THREE.Mesh(mercuryGeo, mercuryMat); 
scene.add(mercury); // add Mercury

var t = 0;
function render() { 
    requestAnimationFrame(render); 
    t += 0.01;          
    sun.rotation.y += 0.005;
    mercury.rotation.y += 0.03;

    mercury.position.x = 20*Math.cos(t) + 0;
    mercury.position.z = 20*Math.sin(t) + 0; // These to strings make it work

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

找到了解决方案

- Alex Pyzhianov