cari

Rumah >hujung hadapan web >tutorial js >Three.js利用性能插件stats实现性能监听实例详解

Three.js利用性能插件stats实现性能监听实例详解

巴扎黑
巴扎黑asal
2017-09-26 09:38:002479semak imbas

Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景，而下面这篇文章主要给大家介绍了关于Three.js如何利用性能插件stats实现性能监听的相关资料，需要的朋友可以参考借鉴，下面来一起学习学习吧。

前言

关于性能：测试一个程序，性能上是否有瓶颈，在3D世界里，经常使用帧数的概念，首先我们来定义一下帧数的意义。

帧数：图形处理器每秒钟能够刷新几次，通常用fps（Frames Per Second）来表示

关于性能：测试一个程序，性能上是否有瓶颈，在3D世界里，经常使用帧数的概念，首先我们来定义一下帧数的意义。

帧数：图形处理器每秒钟能够刷新几次，通常用fps（Frames Per Second）来表示

stats性能插件添加了以后，会默认在左上角显示性能帧数，每次刷新所用时间，占用内存。鼠标左键点击可进行切换，默认显示每秒的帧数。

   

首先需要将stats插件引入，地址是官网下载文件里面的examples/js/libs/stats.min.js。

然后需要实例化一个组件，然后添加到dom当中。


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

需要在requestAnimationFrame()函数调用里面更新stats。


function animate() { 
  //更新控制器 
  controls.update(); 
  render(); 
 
  //更新性能插件 
  stats.update(); 
  requestAnimationFrame(animate); 
 }

就这样，页面当中就会显示出来正常插件效果了。

设置默认显示的监听。

Stats.prototype.setMode()方法可以设置插件的默认监听


stats.setMode(0); //默认的监听fps 
stats.setMode(1); //默认的监听画面渲染时间 
stats.setMode(2); //默认的监听当前的不知道是啥

案例也是用的上一节的案例写的，全部代码：


<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>Title</title> 
 <style type="text/css"> 
  html, body { 
   margin: 0; 
   height: 100%; 
  } 
 
  canvas { 
   display: block; 
  } 
 
 </style> 
</head> 
<body onload="draw();"> 
 
</body> 
<script src="build/three.js"></script> 
<script src="examples/js/controls/TrackballControls.js"></script> 
<script src="examples/js/libs/stats.min.js"></script> 
<script> 
 var renderer; 
 function initRender() { 
  renderer = new THREE.WebGLRenderer({antialias:true}); 
  renderer.setSize(window.innerWidth, window.innerHeight); 
  document.body.appendChild(renderer.domElement); 
 } 
 
 var camera; 
 function initCamera() { 
  camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000); 
  camera.position.set(0, 0, 400); 
 } 
 
 var scene; 
 function initScene() { 
  scene = new THREE.Scene(); 
 } 
 
 var light; 
 function initLight() { 
  scene.add(new THREE.AmbientLight(0x404040)); 
 
  light = new THREE.DirectionalLight(0xffffff); 
  light.position.set(1,1,1); 
  scene.add(light); 
 } 
 
 function initModel() { 
  var map = new THREE.TextureLoader().load("examples/textures/UV_Grid_Sm.jpg"); 
  var material = new THREE.MeshLambertMaterial({map:map}); 
 
  var cube = new THREE.Mesh(new THREE.BoxGeometry(100, 200, 100, 1, 1, 1), material); 
  scene.add(cube); 
 } 
 
 //初始化性能插件 
 var stats; 
 function initStats() { 
  stats = new Stats(); 
  document.body.appendChild(stats.dom); 
 } 
 
 //用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放 
 var controls; 
 function initControls() { 
  controls = new THREE.TrackballControls( camera ); 
  //旋转速度 
  controls.rotateSpeed = 5; 
  //变焦速度 
  controls.zoomSpeed = 3; 
  //平移速度 
  controls.panSpeed = 0.8; 
  //是否不变焦 
  controls.noZoom = false; 
  //是否不平移 
  controls.noPan = false; 
  //是否开启移动惯性 
  controls.staticMoving = false; 
  //动态阻尼系数 就是灵敏度 
  controls.dynamicDampingFactor = 0.3; 
  //未知，占时先保留 
  //controls.keys = [ 65, 83, 68 ]; 
  controls.addEventListener( &#39;change&#39;, render ); 
 } 
 
 function render() { 
  renderer.render( scene, camera ); 
 } 
 
 //窗口变动触发的函数 
 function onWindowResize() { 
 
  camera.aspect = window.innerWidth / window.innerHeight; 
  camera.updateProjectionMatrix(); 
  controls.handleResize(); 
  render(); 
  renderer.setSize( window.innerWidth, window.innerHeight ); 
 
 } 
 
 function animate() { 
  //更新控制器 
  controls.update(); 
  render(); 
 
  //更新性能插件 
  stats.update(); 
  requestAnimationFrame(animate); 
 } 
 
 function draw() { 
  initRender(); 
  initScene(); 
  initCamera(); 
  initLight(); 
  initModel(); 
  initControls(); 
  initStats(); 
 
  animate(); 
  window.onresize = onWindowResize; 
 } 
</script> 
</html>

Atas ialah kandungan terperinci Three.js利用性能插件stats实现性能监听实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：详解Three.js利用orbit controls插件（轨道控制）控制模型交互动作Artikel seterusnya：Three.js用轨迹球插件（trackball）增加对模型的交互功能实例详解

Artikel berkaitan

Lihat lagi