ThreeJS 使用 lerp 将对象动画到多个位置

Question

我正在尝试为球体沿一组预定义的顶点移动设置动画。我可以使用以下代码从一点到另一点制作动画

function animate() {
  requestAnimationFrame(animate)
  sphere.position.lerp(new THREE.Vector3(100, 2, 0), 0.05)
  render()
}
function render() {
  renderer.render(scene, camera)
}
animate()

这适用于从初始位置到 (100, 2, 0) 的单个动画。我如何继续添加顶点，以便它按顺序动画。

Answer 1

您可以根据您的点序列定义一条曲线，然后使用该曲线进行动画处理，从而使用纯 three.js 沿路径设置网格动画。

let camera, scene, renderer, clock;

let mesh, path;

const duration = 10;
let time = 0;

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
  camera.position.set( 3, 2, 3 );

  scene = new THREE.Scene();
  
  renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
  
  clock = new THREE.Clock();

  const controls = new THREE.OrbitControls( camera, renderer.domElement );

  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshNormalMaterial();
  mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );

  scene.add( new THREE.AxesHelper( 2 ) );

  // points and path

  const points = [ 
    new THREE.Vector3( 0, 0, 0 ), 
    new THREE.Vector3( 1, 2, - 2 ),
    new THREE.Vector3( 2, 2, - 0.5 ),
    new THREE.Vector3( 2, 1, - 2 ) 
    ];

  path = new THREE.CatmullRomCurve3( points, true );
    
  // visualize the path

  const lineGeometry = new THREE.BufferGeometry().setFromPoints( path.getPoints( 32 ) );
  const lineMaterial = new THREE.LineBasicMaterial();
  const line = new THREE.Line( lineGeometry, lineMaterial );
  scene.add( line );
  
}


function animate() {

  requestAnimationFrame( animate );
  
  time += clock.getDelta();
  
  const t = Math.min( time / duration, 1 );
  
  if ( t === 1 ) time = 0;
  
  path.getPointAt( t, mesh.position ); // animating

  renderer.render( scene, camera );

}

body {
  margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.137.5/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.137.5/examples/js/controls/OrbitControls.js"></script>

ThreeJS 使用 lerp 将对象动画到多个位置

ThreeJS animate object to multiple positions using lerp

javascript

animation

three.js