angular – requestAnimationFrame只被调用一次
发布时间:2020-12-17 18:11:00 所属栏目:安全 来源:网络整理
导读:我正试图在我的Ionic 2应用程序中使用ThreeJS实现一个非常基本的动画.基本上是试图旋转立方体.但是多维数据集不会旋转,因为requestAnimationFrame只在render循环中执行一次. 我只能看到这一点. 没有旋转动画.我在下面分享我的代码. home.html的 ion-header i
我正试图在我的Ionic 2应用程序中使用ThreeJS实现一个非常基本的动画.基本上是试图旋转立方体.但是多维数据集不会旋转,因为requestAnimationFrame只在render循环中执行一次.
我只能看到这一点. 没有旋转动画.我在下面分享我的代码. 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); } } 解决方法
问题是您没有正确调用requestAnimationFrame.您没有直接传递渲染函数,而是返回一个返回渲染函数的lambda函数.
更改行requestAnimationFrame(()=> this.render); requestAnimationFrame(this.render); 编辑: 当像您一样使用ES2015类时,重要的是要记住类方法是声明为对象属性的函数.上下文(this)将是该方法所附加的对象.因此,在将方法传递给requestAnimationFrame(…)方法时,将不再使用相同的对象引用调用它.因此,我们需要在将其传递给requestAnimationFrame(…)之前绑定render方法的上下文: requestAnimationFrame(this.render.bind(this)); 这在this blog post中很好.(不要介意它专注于React,原则和例子是ES2015具体的). (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |