3 .js -如何从左到右反复移动一个球

Three.js - How to move a Ball from left to right repeatedly

本文关键字：一个 移动 js 从左到右      更新时间：2023-09-26

我想将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();

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

通过在每一帧上更改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
相关文章：