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, чтобы получить путь движения между двумя точками, которые вы хотите переместить между ними.

Для простой анимации с левого-правого обратного повтора вы можете просто настроить положение.

Try вставляя это в 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