requestAnimationFrame只被调用一次

Question

我想在我的Ionic 2应用程序中使用ThreeJS实现一个非常基本的动画。基本上试图旋转一个立方体。但多维数据集不旋转，因为requestAnimationFrame在渲染循环中只执行一次。

我只能看到这个。

没有旋转动画。我在下面分享我的代码。

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); 
    } 

} 

Answer 1

的问题是，你是不是正确的呼唤你的requestAnimationFrame。您没有直接通过渲染函数，而是使用渲染函数返回的lambda函数。

改线requestAnimationFrame(() => this.render);到requestAnimationFrame(this.render);

编辑：

当使用ES2015类，如你，一定要记住类的方法声明为对象属性的功能是非常重要的。上下文（this）将是该方法所附带的对象。因此，将该方法传递给requestAnimationFrame(...)方法时，将不再使用相同的对象引用调用该方法。正因为如此，我们需要把它传递给requestAnimationFrame(...)之前渲染方法的上下文绑定：

requestAnimationFrame(this.render.bind(this)); 

这this blog post是expained很好。 （不要介意它专注于React，原则和示例是ES2015的具体内容）。