Creating a floating effect for a cube in Three.js involves applying specific techniques and animations

Question

Creating a floating effect for a cube in Three.js involves applying specific techniques and animations

I've been experimenting with making a Boxgeometry float in three.js, but my attempts have not been successful so far. I tried using setTimeout to achieve the floating effect, but it didn't work as expected. Here is what I attempted:

function animate() {
  requestAnimationFrame( animate );

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

  renderer.render( scene, camera );
}

Instead of smoothly floating, the cube just moves up and down in a choppy manner.

Can anyone suggest a better way to create a smooth floating animation for the cube?

javascript animation three.js

Answer 1

Answer №1

Utilizing trigonometric functions such as sin() can produce a simple floating effect.

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

initialize();
animate();

function initialize() {

  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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9de9f5eff8f8ddadb3acaea9b3ad">[email protected]</a>/build/three.min.js"></script>

The animations you create will vary depending on how you set up the calculations and combine trigonometric functions.

For even more versatility, consider using animation libraries like GSAP or Tween.js to access a wide range of easing functions easily.

Answer 2

Utilizing trigonometric functions such as sin() can produce a simple floating effect.

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

initialize();
animate();

function initialize() {

  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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9de9f5eff8f8ddadb3acaea9b3ad">[email protected]</a>/build/three.min.js"></script>

The animations you create will vary depending on how you set up the calculations and combine trigonometric functions.

For even more versatility, consider using animation libraries like GSAP or Tween.js to access a wide range of easing functions easily.

Creating a floating effect for a cube in Three.js involves applying specific techniques and animations

Answer №1

Similar questions

What is the process for populating dropdown options from state?

Having trouble with changing text in a link with an onclick event?

Preventing Body Overflow Without Affecting Iframe Overflow in Meteor.js

Make the browser interpret XHR response as gzip encoding

Attempting to create a responsive Boxplot in Three.js

Looping through a nested for loop within an HTML table

Utilizing Axios recursion to paginate through an API using a cursor-based approach

Is Next.js Dynamic Routing Failing You?

Is there a way to override the JSON.stringify method within the JSON class of a TypeScript project without using a custom call?

Having Trouble Retrieving Environment Variables in Next.js API Endpoints

Filter the ng-repeat in Angular based on the model's value

Exploring the Functionality of Chaining in JQuery and Understanding its Inner Workings

I'm puzzled as to why, but my code seems to be causing an issue with the command prompt, possibly due

Performing ajax requests with nested ajax calls within a loop

Vue.js computed property fails to initiate

Vue2 data vanishing mysteriously

The functionality of Angular animate becomes compromised when there is a conflict between predefined CSS states and transition states

Error encountered: `prisma.product.findMany()` function call is not valid when the application is deployed on V

Unable to upload a file to an email using the mandrillapp JSON API

Troubleshooting an Ajax Error