javascript - 如何为Cube Three.js制作 float 效果

Question

所以我试图在three.js中制作一个Boxgeometry float ，我尝试用setTimeout来做但它没有用，这是我尝试的。

function animate() {
  requestAnimationFrame( animate );

  cube.position.y += 0.01
  setTimeout(function(){
    cube.position.y += -0.02
  }, 10000);

  renderer.render( scene, camera );
}

它只会上下移动，看起来不像是漂浮的。
如何为立方体制作 float 动画？

Answer 1

通过使用三 Angular 函数，如 sin()您可以实现基本的 float 效果。

let camera, scene, renderer;
let clock, mesh;

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
  camera.position.z = 1;

  scene = new THREE.Scene();
  
  clock = new THREE.Clock();

  const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
  const material = new THREE.MeshNormalMaterial();

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

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

}

function animate() {

  requestAnimationFrame(animate);

    const time = clock.getElapsedTime();
  
  mesh.position.y = Math.cos( time ) * 0.2;
 
  renderer.render(scene, camera);

}

body {
      margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.134.0/build/three.min.js"></script>

根据您如何参数化计算以及如何组合三 Angular 函数，您可以实现完全不同的动画。
还可以考虑使用 GSAP 或 Tween.js 之类的动画库来轻松访问各种缓动功能。