如何制作cube Three.js的浮动特效

Question

所以我试着在three.js中做一个盒子几何浮点，我试着用setTimeout来做，但是不起作用，下面是我试过的。

function animate() {
  requestAnimationFrame( animate );

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

  renderer.render( scene, camera );
}

它只会上下移动，看起来不像是漂浮的。

如何为立方体制作浮动动画？

Answer 1

通过使用像sin()这样的三角函数，您可以实现基本的浮动效果。

​

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>

​

根据您如何参数化计算和如何组合三角函数，您可以实现完全不同的动画。

还可以考虑使用像GSAP或Tween.js这样的动画库来轻松访问各种轻松功能。