threejs论坛

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 5977|回复: 0

09 Three.js使用性能插件stats进行性能监听

[复制链接]

227

主题

203

帖子

589

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
589
发表于 2021-1-3 10:46:44 | 显示全部楼层 |阅读模式


stats性能插件添加了以后,会默认在左上角显示性能帧数,每次刷新所用时间,占用内存。鼠标左键点击可进行切换,默认显示每秒的帧数。
    
首先需要将stats插件引入,地址是官网下载文件里面的examples/js/libs/stats.min.js。
然后需要实例化一个组件,然后添加到dom当中。


  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style type="text/css">
  7.         html, body {
  8.             margin: 0;
  9.             height: 100%;
  10.         }

  11.         canvas {
  12.             display: block;
  13.         }

  14.     </style>
  15. </head>
  16. <body onload="draw();">

  17. </body>
  18. <script src="https://www.wjceo.com/lib/three.js"></script>
  19. <script src="https://www.wjceo.com/lib/js/controls/TrackballControls.js"></script>
  20. <script src="https://www.wjceo.com/lib/js/libs/stats.min.js"></script>
  21. <script>
  22.     var renderer;
  23.     function initRender() {
  24.         renderer = new THREE.WebGLRenderer({antialias:true});
  25.         renderer.setSize(window.innerWidth, window.innerHeight);
  26.         document.body.appendChild(renderer.domElement);
  27.     }

  28.     var camera;
  29.     function initCamera() {
  30.         camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000);
  31.         camera.position.set(0, 0, 400);
  32.     }

  33.     var scene;
  34.     function initScene() {
  35.         scene = new THREE.Scene();
  36.     }

  37.     var light;
  38.     function initLight() {
  39.         scene.add(new THREE.AmbientLight(0x404040));

  40.         light = new THREE.DirectionalLight(0xffffff);
  41.         light.position.set(1,1,1);
  42.         scene.add(light);
  43.     }

  44.     function initModel() {
  45.         var map = new THREE.TextureLoader().load("/lib/textures/UV_Grid_Sm.jpg");
  46.         var material = new THREE.MeshLambertMaterial({map:map});

  47.         var cube = new THREE.Mesh(new THREE.BoxGeometry(100, 200, 100, 1, 1, 1), material);
  48.         scene.add(cube);
  49.     }

  50.     //初始化性能插件
  51.     var stats;
  52.     function initStats() {
  53.         stats = new Stats();
  54.         document.body.appendChild(stats.dom);
  55.     }

  56.     //用户交互插件 鼠标左键按住旋转,右键按住平移,滚轮缩放
  57.     var controls;
  58.     function initControls() {
  59.         controls = new THREE.TrackballControls( camera );
  60.         //旋转速度
  61.         controls.rotateSpeed = 5;
  62.         //变焦速度
  63.         controls.zoomSpeed = 3;
  64.         //平移速度
  65.         controls.panSpeed = 0.8;
  66.         //是否不变焦
  67.         controls.noZoom = false;
  68.         //是否不平移
  69.         controls.noPan = false;
  70.         //是否开启移动惯性
  71.         controls.staticMoving = false;
  72.         //动态阻尼系数 就是灵敏度
  73.         controls.dynamicDampingFactor = 0.3;
  74.         //未知,占时先保留
  75.         //controls.keys = [ 65, 83, 68 ];
  76.         controls.addEventListener( 'change', render );
  77.     }

  78.     function render() {
  79.         renderer.render( scene, camera );
  80.     }

  81.     //窗口变动触发的函数
  82.     function onWindowResize() {

  83.         camera.aspect = window.innerWidth / window.innerHeight;
  84.         camera.updateProjectionMatrix();
  85.         controls.handleResize();
  86.         render();
  87.         renderer.setSize( window.innerWidth, window.innerHeight );

  88.     }

  89.     function animate() {
  90.         //更新控制器
  91.         controls.update();
  92.         render();

  93.         //更新性能插件
  94.         stats.update();
  95.         requestAnimationFrame(animate);
  96.     }

  97.     function draw() {
  98.         initRender();
  99.         initScene();
  100.         initCamera();
  101.         initLight();
  102.         initModel();
  103.         initControls();
  104.         initStats();

  105.         animate();
  106.         window.onresize = onWindowResize;
  107.     }
  108. </script>
  109. </html>
复制代码

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|threejs论坛 ( 京ICP备18014583号 )

GMT+8, 2023-12-2 00:05 , Processed in 0.016122 second(s), 19 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表