Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

requestAnimationFrame is being called only once

I'm trying to achieve a pretty basic animation using ThreeJS in my Ionic 2 application. Basically trying to rotate a cube. But the cube isn't rotating because requestAnimationFrame is being executed only once inside the render loop.

I'm able to see only this. enter image description here

No rotating animation. I'm sharing my code below.

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <div #webgloutput></div>
</ion-content>

home.ts

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';

import * as THREE from 'three';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('webgloutput') webgloutput: ElementRef;


  private renderer: any;
  private scene: any;
  private camera: any;
  private cube: any;

  constructor(public navCtrl: NavController) {
  }

  ngOnInit() {
    this.initThree();
  }

  initThree() {
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    this.renderer = new THREE.WebGLRenderer();
    this.renderer.setSize( window.innerWidth, window.innerHeight );
    this.webgloutput.nativeElement.appendChild(this.renderer.domElement);

    let geometry = new THREE.BoxGeometry(1, 1, 1);

    let material = new THREE.MeshBasicMaterial({ color: 0x00ff00});
    this.cube = new THREE.Mesh(geometry, material);
    this.scene.add(this.cube);
    this.camera.position.z = 5;

    this.render();
  }


  render() {
    console.log("render called");
    requestAnimationFrame(() => this.render);

    this.cube.rotation.x += 0.5;
    this.cube.rotation.y += 0.5;
    this.renderer.render(this.scene, this.camera);
  }

}
like image 498
somnathbm Avatar asked Apr 18 '17 07:04

somnathbm


People also ask

When to call requestanimationframe ()?

Note: Your callback routine must itself call requestAnimationFrame() if you want to animate another frame at the next repaint. You should call this method whenever you're ready to update your animation onscreen. This will request that your animation function be called before the browser performs the next repaint.

What is the purpose of the window requestanimationframe?

The window.requestAnimationFrame () method tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation before the next repaint. The method takes a callback as an argument to be invoked before the repaint.

How to use requestanimationframe () with Vanilla JS?

How to use requestAnimationFrame () with vanilla JS 1 Creating a callback function #. The requestAnimationFrame () method accepts one argument: a callback function to run. ... 2 Looping animations #. The requestAnimationFrame () method only runs once. ... 3 Canceling requestAnimationFrame () #. ... 4 Browser Compatibility #. ...

Is it easy to animate with requestanimationframe in react?

DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit . Animating with requestAnimationFrame should be easy, but if you haven’t read React’s documentation thoroughly then you will probably run into a few things that might cause you a headache.


1 Answers

The purpose of requestAnimationFrame is not to do animations, its purpose is to call the function provided on the next frame so basically we are calling the same function on each frame.

requestAnimationFrame(justNameofFun);

i.e.

const clock = new THREE.Clock();
const tick = () => {
  const elapsedTime = clock.getElapsedTime()
  cube1.rotation.y = elapsedTime * Math.PI * 1;
  renderer.render(scene, camera);
  window.requestAnimationFrame(tick);
};

// Call at least once to perform requestanimationframe

tick();
like image 89
Dpk Avatar answered Oct 08 '22 10:10

Dpk