Three.js - 如何將球從左向右反覆移動

Question

我想將Three.js中的球移動到右側，然後移動到開始位置，然後重複回到右側。

var geometry = new THREE.SphereGeometry(5, 32, 32); 
var material = new THREE.MeshPhongMaterial({specular: "#fdfb57", 
color: "#d8d613", emissive: "#6b6a0d", side: THREE.DoubleSide}); 
var ball = new THREE.Mesh(geometry, material); 

var render = function() { 
    requestAnimationFrame(render); 
    renderer.render(scene, camera); 
    renderer.setSize(window.innerWidth, window.innerHeight); 

// What programming code I have to put on here? 
}; 

render(); 

但是我該如何實現移動球？

Answer 1

通過在每一幀上更改ball.position或使用像Tween.js這樣的庫來獲取要在其間移動的兩點之間的運動路徑。

對於簡單的從左到右 - 反向 - 重複動畫，您只需調整位置即可。

嘗試粘貼到這個avgp.github.io/h2g2three：

var geometry = new THREE.SphereGeometry(5, 32, 32); 
var material = new THREE.MeshPhongMaterial({specular: "#fdfb57", color: "#d8d613", emissive: "#6b6a0d", side: THREE.DoubleSide}); 
var ball = new THREE.Mesh(geometry, material); 
var dxPerFrame = 1; // how to move in a single frame 

scene.add(ball); 

onRender = function() { 
    ball.position.x += dxPerFrame; // move ball 
    if(ball.position.x > 100) dxPerFrame = -1; // if we're too far right, move towards the left 
    if(ball.position.x < -100) dxPerFrame = 1; // if we're too far left, move towards the right again 
}; 

// Alt+Return run the code