如何制作立方体的漂浮效果Three.js

Question

所以我试图使 Boxgeometry 在 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 这样的动画库来轻松访问各种缓动函数。

如何制作立方体的漂浮效果Three.js

How to make floating effect for cube Three.js

javascript

animation

three.js