Animation 在Three.js中沿样条线(圆)移动对象
我对Three.js很陌生(一天的体验lol) 我想建立一个太阳系的模型,这样我就得到了应该沿着轨道(圆圈)运动的行星 我尝试使用样条线进行此操作,但未能设置动画,因为我不知道如何使用 带变量的requestAnimationFrame(只有最简单的增量元素,如+=0.03) 我也试着用数学来做,但结果是一样的。不知道如何设置变量的动画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
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();