在 Three.js 中沿样条线（圆）移动对象答案

【问题标题】：Move object along spline(circle) in Three.js在 Three.js 中沿样条线（圆）移动对象
【发布时间】：2014-06-25 20:26:31
【问题描述】：

我对 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 制作动画的经验。所以我的思绪被这个 requestAnimationFrame 东西所震撼，我从一些教程中得到，它对我来说就像一个黑盒子。

【问题讨论】：

标签： animation three.js tween spline requestanimationframe

【解决方案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();

找到解决办法

【讨论】：