Three.js - 如何反复从左向右移动球

【问题标题】：Three.js - How to move a Ball from left to right repeatedlyThree.js - 如何反复从左向右移动球
【发布时间】：2015-09-25 05:24:27
【问题描述】：

我想将 Three.js 中的 Ball 向右移动，然后它会移动到起始位置，然后反复向右移动。

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();

但是我应该如何实现球的移动呢？

【问题讨论】：

标签： javascript animation three.js rendering

【解决方案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

【讨论】：