Animation 在Three.js中沿样条线(圆)移动对象

Animation 在Three.js中沿样条线(圆)移动对象,animation,three.js,tween,spline,requestanimationframe,Animation,Three.js,Tween,Spline,Requestanimationframe,我对Three.js很陌生(一天的体验lol) 我想建立一个太阳系的模型,这样我就得到了应该沿着轨道(圆圈)运动的行星 我尝试使用样条线进行此操作,但未能设置动画,因为我不知道如何使用 带变量的requestAnimationFrame(只有最简单的增量元素,如+=0.03) 我也试着用数学来做,但结果是一样的。不知道如何设置变量的动画 mercury.position.x = 20*Math.cos(4) + 0; 但我没有在JS中制作任何动画的经验。所以我的思想被这个requestAnim

我对Three.js很陌生(一天的体验lol) 我想建立一个太阳系的模型,这样我就得到了应该沿着轨道(圆圈)运动的行星

我尝试使用样条线进行此操作,但未能设置动画,因为我不知道如何使用 带变量的requestAnimationFrame(只有最简单的增量元素,如+=0.03)

我也试着用数学来做,但结果是一样的。不知道如何设置变量的动画

mercury.position.x = 20*Math.cos(4) + 0;
但我没有在JS中制作任何动画的经验。所以我的思想被这个requestAnimationFrame的东西吹走了,这是我从一些教程中得到的,对我来说就像一个黑匣子

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();
找到了解决办法

mercury.position.x = 20*Math.cos(4) + 0;
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();