Así que estoy tratando de hacer flotar una Boxgeometry en three.js, intento hacerlo con setTimeout pero no funcionó, esto es lo que intento.
function animate() { requestAnimationFrame( animate ); cube.position.y += 0.01 setTimeout(function(){ cube.position.y += -0.02 }, 10000); renderer.render( scene, camera ); }Solo sube y baja, eso no parece que esté flotando.
¿Cómo puedo hacer una animación flotante para el cubo?
Mediante el uso de funciones trigonométricas como sin() puede lograr un efecto flotante básico.
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>Dependiendo de cómo parametrice el cálculo y cómo combine las funciones trigonométricas, puede implementar animaciones bastante diferentes.
También considere usar una biblioteca de animación como GSAP o Tween.js para acceder fácilmente a una amplia gama de funciones de aceleración.