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

问题描述 投票:0回答:1

我对 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个回答
19
投票

找到解决方案:

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

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

let 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();
© www.soinside.com 2019 - 2024. All rights reserved.