threejs:让场景动起来的两种方法

1.变化物体的位置。不断循环animation函数,同时让物体在x方向位置增加。

            function animation()
            {
                mesh.position.x +=0.1;
                renderer.render(scene, camera);
                requestAnimationFrame(animation);
            }

2.变化相机的位置。不断循环animation函数,同时让相机朝着x正方向移动,那么物体就会向着反方向移动了。

	function animation(){
		camera.position.x += 1;
		renderer.render(scene,camera);
		requestAnimationFrame(animation);
	}

3.帧数监控。帧数监控用的是stats.js包。使用比较简单,如下,先创建一个stats对象,然后在需要监控的代码段使用stats.begin和stats.end监控就可以了。

3.1 创建一个stats对象

                var stats;
                stats = new Stats();
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.left = '0px';
                stats.domElement.style.top = '0px';
                document.getElementById('canvas-frame').appendChild(stats.domElement);

3.2 引用

            function animation()
            {
                stats.begin();
                mesh.position.x +=0.1;
                renderer.render(scene, camera);
                requestAnimationFrame(animation);
                stats.end();
            }

 

posted @ 2020-02-29 16:34  昨夜昙花  阅读(71)  评论(0)    收藏  举报